AMPページにGoogle Adsenseの広告を追加

アフィリエイト

ブログにGoogle Adsenseを挿入しているサイトをAMP対応させると、これまで表示されていたAdsenseの広告が表示されなくなってします。

AMP対応はGoogleAdsense自身がサイト改善案として提示してきます。

しかし、AdsenseもAMPに対応させないと、改善したはずなのに収益が低下する可能性が高いので、AMPページにもきちんとAdsenseに対応できるよう手順をまとめました。

AMP用コードをヘッダーに挿入

まず、AdsenseをAMP対応させるには以下のコードをヘッダーに挿入します。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">

AMP用レスポンシブ広告ユニットの作成・編集

AMPに対応させる広告ユニットを新たに作成します。

AMPに対応させるAdsenseの広告ユニットを新たに作成します。

作成した広告ユニットのコードのうち、data-ad-clientと、data-ad-slotの2行を控えておきます。

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"

上記の、data-ad-clientと、data-ad-slotの2行を以下のコードに差し替ます。

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"

data-ad-client="ca-pub-000000000000"

data-ad-slot="000000000">

</amp-ad>
Adsense広告をAMPページに対応させることは、仕組みを理解すれば新たな広告ユニットを作成しなくても、すでに作成している広告ユニットで対応させる事はできます。

ただ、Adsenseは収益をアップさせるために極力広告ユニットを分け、試行錯誤する事が収益アップにつながるため、今回の例では新たにAMP用の広告ユニットを作成しています。

関連コンテンツのユニットを作成・編集

関連コンテンツの広告ユニットをAMP対応させる場合にも新たに広告ユニットを作成します。

関連コンテンツの広告ユニットを新たに作成

広告コードの中から、レスポンシブ広告ユニットと同じようにdata-ad-clientと、data-ad-slotのコードを控えておきます。

同じく、data-ad-clientと、data-ad-slotの2行を以下のコードに差し替えます。

<amp-ad
layout="fixed-height"
height="500"
type="adsense"

data-ad-client="ca-pub-000000000000"

data-ad-slot="000000000">

</amp-ad>

AMPページを判別する関数を作成し分岐させる

最後に、上記で作成したコードをテンプレートに挿入します。

以下のように、AMPページの場合に条件分岐するコードをfunctions.phpに追加します。

function is_amp(){
  $is_amp = false;
  if ( empty($_GET['amp']) ) {
    return false;
  }
 
  //かつsingleページのみ$is_ampをtrueにする
  if(is_single() &&
     $_GET['amp'] === '1'
    ){
    $is_amp = true;
  }
  return $is_amp;
}
 

テンプレートに広告コードを挿入する場合には以下のように利用し、AMPの場合と通常のページとで広告ユニットを分岐させれば完了です。

<?php if(is_amp()):?>
<!-- AMP用広告 -->

<?php else:?>
<!-- レスポンシブ広告 -->

<?php endif;?>

コメント