AMP用Googleアドセンス関連コンテンツユニットの作成方法。

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」にしましょう。

まとめ

「見かけないってことは、きっと難しいんだろうな〜」と後回しにしていましたが、こんなに簡単なら早くやっておけば良かったです。

表示される記事の関連性や、広告の精度などは、通常の関連コンテンツユニットと同じなので、重宝すると思いますよ。

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!