AMPページにGoogleアドセンス広告を表示している方は多いと思いますが、意外と、関連コンテンツユニットを表示しているサイトを見かけませんよね。
あまりにも見かけないので、「AMPページでは関連コンテンツユニットは使えないのかな？」と思っている方もいそうです。
でも、実は、AMP用の関連コンテンツユニットも、通常のAMP用広告ユニットと同じように作成可能です。
関連コンテンツユニット（AMP用）の作成方法
AMP用の関連コンテンツユニットを作るために必要なのは、通常の関連コンテンツユニットのコードの中にある「data-ad-client」と「data-ad-slot」の2つの値。
その2つの値を下記のコードの〇〇の部分にそれぞれコピペするだけで、AMP用関連コンテンツユニットのコードになります。
<amp-ad layout="fixed-height" height="1221" type="adsense" data-ad-client="〇〇" data-ad-slot="〇〇"></amp-ad>（※data-ad-clientの値はdata-ad-clientへ、data-ad-slotの値はdata-ad-slotへコピペします）
表示したい場所へコードを貼り付け
コードが完成した後の流れは、通常の関連コンテンツユニットを表示する流れと同じです。
僕はウィジェットにコードを貼り付けて管理してます。<amp-ad>という特殊なタグですが、カスタムHTMLに貼り付ければ問題なく使えます。
サイズを変更する場合
関連コンテンツユニットをデフォルトのレスポンシブデザインで表示する場合、モバイル画面だと高さが1221pxになるので、それに合わせて上記のコードをご紹介しましたが、高さを変更することも可能です。
というより、普通の広告ユニットと同じように作るので、横幅と高さの値は自由に決めてOKです。横幅336px、高さ280pxのサイズで作ることも可能です。
ここら辺は、通常ページの関連コンテンツユニットのサイズと合わせればいいと思うので、適宜変更していただければと思います。
ただ、横幅を指定する場合は、上記のコードのlayoutの値をfixed-heightではなく、「responsive」にしましょう。
まとめ
「見かけないってことは、きっと難しいんだろうな〜」と後回しにしていましたが、こんなに簡単なら早くやっておけば良かったです。
表示される記事の関連性や、広告の精度などは、通常の関連コンテンツユニットと同じなので、重宝すると思いますよ。
以上、ご参考までに！(｀･ω･´)ゞ
