当ブログのAMP対応に伴うカスタマイズ記事の第2弾です。
今回も、AdSenseまわりをカスタマイズしていきます。触るのは、関連コンテンツユニットです。
そのままではAMPページには表示できない関連コンテンツユニットのコードを少しだけいじって、AMPページでも使えるようにしてみました。
難しいかと思いきや、一発でAMP対応できてしまうんです。
今回は、AdSenseの関連コンテンツユニットをAMP化したページに表示するカスタマイズの方法をご紹介します。
何がどうなるのか
通常はAMPページに配置できない（配置するとAMPエラーが出る）AdSenseの関連コンテンツユニットを、AMP化したページにも配置できるようにします。
どう見えるかは下記記事の記事下をご覧ください。（当ブログ別記事のAMPページです）
通常のスマホ版と同様、関連記事と少し広告が表示されていると思います。
カスタマイズの方法
では、具体的なカスタマイズ方法です。
お手元に関連コンテンツユニットの広告コードをご準備ください。
次のような感じになっていると思います。
<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
まとめ：ブログ収益化が加速する…かも？
以上、AdSenseの関連コンテンツユニットをAMP化したページでも使う方法でした。
関連コンテンツユニットは、関連記事一覧としても収益の面でも非常に優秀です。（詳しくは下記関連記事で触れています）
AMP化したからといって捨てるのは非常にもったいないので、仮に関連コンテンツユニットを理由にAMP化をとどまっている方がいたら、この方法をぜひご活用ください。
当ブログでは、今回のカスタマイズと下記記事のあわせ技で、通常のスマホ版と全く同等のAdSense陣形がAMPページでも実現できました。ぜひあわせてご覧くださいませ。
https://bloglab.naenote.net/entry/insert-adsense-inside-amp-article
コメント