AdSense関連コンテンツユニットをAMP化したページに設置する方法

当ブログのAMP対応に伴うカスタマイズ記事の第2弾です。

今回も、AdSenseまわりをカスタマイズしていきます。触るのは、関連コンテンツユニットです。

そのままではAMPページには表示できない関連コンテンツユニットのコードを少しだけいじって、AMPページでも使えるようにしてみました。

難しいかと思いきや、一発でAMP対応できてしまうんです。

今回は、AdSenseの関連コンテンツユニットをAMP化したページに表示するカスタマイズの方法をご紹介します。

何がどうなるのか
#

通常はAMPページに配置できない（配置するとAMPエラーが出る）AdSenseの関連コンテンツユニットを、AMP化したページにも配置できるようにします。

どう見えるかは下記記事の記事下をご覧ください。（当ブログ別記事のAMPページです）

/insert-adsense-inside-amp-article?amp=1

通常のスマホ版と同様、関連記事と少し広告が表示されていると思います。

カスタマイズの方法
#

では、具体的なカスタマイズ方法です。

お手元に関連コンテンツユニットの広告コードをご準備ください。

次のような感じになっていると思います。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display: block;"
 data-ad-format="autorelaxed"
 data-ad-client="ca-pub-XXXXX"
 data-ad-slot="XXXXX">
</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

赤太字で示したdata-ad-clientとdata-ad-slotの値をコピーしておいてください。

これらを、次のコードの該当部分にペーストします。

<amp-ad layout="fixed-height" height="1221" type="adsense"
 data-ad-client="ca-pub-XXXXX"
 data-ad-slot="XXXXX"></amp-ad>

ペースト後のコードを、AMP化したページのどこかに貼り付けます。

以上です。簡単ですね！

Simplicityで記事下に入れる方法
#

当ブログで使っているテーマSimplicityの場合、親テーマのsingle-amp.phpの<div id="under-entry-body">の直下にこのコードをペーストすれば記事下（SNSシェアボタンの下）に関連コンテンツユニットが表示されます。

<div id="under-entry-body">
<!-- ここに貼り付ける -->
<amp-ad layout="fixed-height" height="1221" type="adsense" data-ad-client="ca-pub-XXXXX" data-ad-slot="XXXXX"></amp-ad>
<?php if ( is_related_entry_visible() ): //関連記事を表示するか?>

編集前のバックアップ取得をお忘れなく！

注意点やTipsなど
#

親テーマのファイルを編集しますので、テーマをバージョンアップすると編集部分が上書きされます。編集内容は別途保存ください
関連コンテンツユニットが縦長すぎると感じる場合、<amp-ad>タグ内のheightの値を調整すると幸せになれます（1221だと関連記事が13個出ます）
カスタマイズ後はAMPエラーが出ないかチェックをお願いします参考 AMP テスト - Google Search Console