Google Adsenseがサイト改善案としてAMP対応をお知らせしてくれます。
ですが、何も考えずにAPM対応させると、Google AdsenceがAMPページでは表示されず、改善したはずなのに収益が低下するという問題があります。
このページではAMP対応したページでもきちんとAdsense広告を表示する手順をまとめました。
ヘッダーにAMP用コードを挿入
まず、AdsenseをAMP対応させるには以下のコードをヘッダーに挿入します。
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">adsenseでAMP用レスポンシブ広告ユニットの作成・編集する
AMPに対応させる広告ユニットを新たに作成します。
作成した広告ユニットのコードのうち、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用の広告ユニットを作成しています。
関連コンテンツのユニットを作成・編集
関連コンテンツの広告ユニットを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;?>
TOCを設定している場合、見出しにAMPと書くとエラーになってしまう
このページがまさにそうなのですが、以下の条件の場合エラーとなります。
- プラグインTOC+を利用している
- 見出し（hタグ）にAMPという文字が入っている
この場合、「上級者設定」を表示し、除外する見出しに「*AMP*」と書いてあげるとエラーがなくなります。
設定がおわったらAMPテストツールにてエラーがでないかチェックしてみましょう。
コメント