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

AMPで関連コンテンツユニットを使う

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

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

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

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

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

何がどうなるのか

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

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

AMP化した記事内にAdSenseを自動的に挟み込むSimplicityカスタマイズ
AMP対応した記事ページにAMP用AdSense広告ユニットを自動的に挟み込むカスタマイズの方法です。

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

カスタマイズの方法

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

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

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

<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など

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

まとめ:ブログ収益化が加速する…かも?

以上、AdSenseの関連コンテンツユニットをAMP化したページでも使う方法でした。

関連コンテンツユニットは、関連記事一覧としても収益の面でも非常に優秀です。(詳しくは下記関連記事で触れています)

AdSense関連コンテンツユニットの利用条件、導入効果、問題点
AdSenseの関連コンテンツユニットが使えるようになったので入れてみました。条件や効果をまとめます。

AMP化したからといって捨てるのは非常にもったいないので、仮に関連コンテンツユニットを理由にAMP化をとどまっている方がいたら、この方法をぜひご活用ください。

当ブログでは、今回のカスタマイズと下記記事のあわせ技で、通常のスマホ版と全く同等のAdSense陣形がAMPページでも実現できました。ぜひあわせてご覧くださいませ。

AMP化した記事内にAdSenseを自動的に挟み込むSimplicityカスタマイズ
AMP対応した記事ページにAMP用AdSense広告ユニットを自動的に挟み込むカスタマイズの方法です。

この記事が役に立ったら
いいね!お願いします

ブログで言えない話はTwitterにて
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアやコメントお待ちしてます

おすすめ記事

こんな記事も読まれています

スポンサーリンク
スポンサーリンク