AMP用のアドセンス関連コンテンツユニットの作成とCocoonに実装する方法

先日他のブログをAMP化しました。

AMPに対応したことによりページの読み込み速度が速くなり、画像つきで自分の記事がGoogleの検索結果に表示されたり、AMPに対応したメリットを感じます。

けれど代わりにアドセンス収益がいきなり激減しました（笑）。

「これはやばい（笑）」

と思い、AMPページにもアドセンスの関連コンテンツユニットを表示させることにしました。

この記事ではAMPページ用の関連コンテンツユニットの作成方法と、CocoonテーマにAMP用の関連コンテンツユニットを実装する方法を書いています。

AMPページ用関連コンテンツユニットの作成

関連コンテンツユニットをAMPページに表示させる場合、AMPページに対応した関連コンテンツユニットを作成してAMPページにコードを貼り付ける必要があります。

アドセンスヘルプには関連コンテンツユニットのコードをAMP用に修正する方法は直接書かれていません。

けれど関連コンテンツユニットはレスポンシブ広告。

通常のレスポンシブ広告と同じ方法で関連コンテンツユニットをAMPページに表示させることができます。

アドセンスヘルプにはレスポンシブ広告をAMP用のコードに修正する方法が書かれています。

アドセンスヘルプに書かれている基本となるコードを元にして、AMPページ用の関連コンテンツユニットを作成します。

 

AMPページ用の関連コンテンツユニットのコード

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

アドセンスヘルプにあるAMPレスポンシブ広告の修正コードです。

「layout=”fixed-height”」というのは高さを固定幅にすることです。

「heigt」は任意に変更可能で、1221にすると自分の環境では13の関連コンテンツが表示されました。

表示を確認しながら「height」の数字を設定するといいと思います。

そして、このコードの<ca-pub-1234…>の部分と<data-ad-slot>を自分のサイトの関連コンテンツユニットのコードに書かれているIDに変更します。

おそらく<data-ad-slot>に書かれているIDは広告IDだと思います。

そしてAMPページに修正したコードを貼り付けると、AMPページで関連コンテンツユニットが表示されます。

 

Coco0n（コクーン）テーマにAMP関連コンテンツユニットを表示させる

最初はCocoon（コクーン）のテーマを編集して、AMPページのファイルにコードを貼り付けようと思いました。

けれど、AMPの投稿ページのファイルが見つかりません。

そこでテーマを編集し、条件分岐タグを使用してAMPページに関連コンテンツユニットを表示させようと思っていました。

けれどCoco0nのver.0.3.7から、ウィジェットの表示条件設定でAMPページだけに表示できるウィジェットを作成できるようになったようです。

 

ウィジェットでAMPページだけに表示させる

 

ウィジェットでAMPページにだけ表示させるには、テキストウィジェットを作成して「表示設定」で「ウィジェットの表示」を「チェック・入力したページで表示」にして、「AMPページ」にチェックを入れます。

これでAMPページだけでウィジェットが表示されるようになるので、作成したAMP用の広告コードを貼り付けて保存します。

これでCocoonのAMPページで関連コンテンツユニットが表示されるようになります。

 

表示の確認

 

AMPページで関連コンテンツユニットが表示されるようになりました。

ただ通常ページの関連コンテンツユニットとAMPページの関連コンテンツユニットは多少表示が異なるようです。

通常ページでは広告数3つですが、AMPページでは2つの広告が表示されます。

 

 

また通常ページではリンクユニットのようなものが表示されますが、

 

 

AMPページではリンクユニットが表示されません。

 

まとめ

関連コンテンツユニットが許可されていないサイトでもアドセンスの自動広告では関連コンテンツユニットが表示されます。

収益倍増！？アドセンスの自動広告の驚きの効果と表示形式

けれどAMP自動広告では関連コンテンツユニットが表示されません。

AMP用にコードを修正して表示させる必要がありますが、思っていたよりも簡単に表示させることができました。

また、Cocoonはテーマの機能で自動で表示される広告はAMPページでも表示されますが、自動広告はAMPに対応させる必要があります。

さらにアドセンス以外でもGoogleタグマネージャーもAMPに対応する必要があります。


今回はAMPページで関連コンテンツユニットを表示させるようにコードを修正しました。

他にも通常ページではカスタマイズして様々な表示形式に変更することもできます。

アドセンスの関連コンテンツをカスタマイズして表示形式を変える方法

 

今日のたつじんへの一歩