iscle [イズクル] - あなたの生活に役立つネタを!

AMP用ページにGoogleアドセンスを問題なく設置する方法

竹中文人
執筆者:
[最終更新日]2017/04/06
[カテゴリ]アドセンス

AMP アドセンス広告

モバイル向けGoogleの検索結果にAMPが表示されるようになりましたが、AMP用ページは限られたタグやコードしか使用できないという制限があります。アクセス解析のGoogleアナリティクスを使用する場合も、通常のトラッキングコードを入れるのではダメで修正が必要でした。

またAMP用ページには広告を設置することが可能ですが、Javascriptを使用することができないAMPではGoogleアドセンスの広告コードをそのまま挿入することができません。AMPでは広告を設置する場合 <amp-ad> のタグを使用します。なお、アドセンスを含めて現時点で下記の広告がAMPに対応しています。

  • A9
  • Adform
  • AdReactor
  • AdSense
  • AdTech
  • Dot and Media
  • Doubleclick
  • Flite
  • plista
  • Smart AdServer
  • Yieldmo
  • Revcontent

アドセンスの設置方法

ここではアドセンス広告をAMP用ページにも表示する方法をご紹介致します。なお、AMP用に広告コードを修正する必要がありますが、ポリシー違反にはならないことを確認しております(2016/3/8 確認)。

まずはAMP用ページの head タグ内に下記のコードを入れてください。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

レクタングルの場合

まずはAMP用ページに掲載する広告をアドセンスで作成してください。作成方法は通常と変わりません。広告サイズは 300 x 250 の「レクタングル」にします。
amp-ads-02

広告を作成してコードを取得してください。必要なのは下記の部分です。

data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000"

取得したら下記の <amp-ad> タグのコードの部分を、取得したコードと差し替えてください。これをAMP用ページの広告を表示させたい場所(記事下がお勧め)へ設置すればOKです!

<amp-ad
width="300"
height="250"
type="adsense"
data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000">
</amp-ad>

レスポンシブで広告を表示させたい場合

上記のレクタングルでは 300 x 250 のサイズでしか表示できません。レクタングル(大)では一部端末で広告が切れてしまうため、ポリシー違反となる可能性があるからです。

しかし画面サイズが大きい端末にはレクタングル(大)を含めた、横幅の広いサイズの広告を表示させたいですね。その場合、広告サイズで「レスポンシブ」を選択してください。

先ほどと同様に下記の部分をコピーして控えておいてください。

data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000"

下記の <amp-ad> タグのコードの部分を、取得したコードと差し替えて広告を表示させる場所に設置します。

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000">
</amp-ad>

「width=300」「height=250」となっているので大丈夫なのか心配になる方もいらっしゃるかもしれませんが、上記のコードを入れればレスポンシブタイプの広告ユニットとしてAMP用ページでも機能します。

もし WordPress を使用されている場合は、プラグインによって簡単にアドセンスの広告コードもアナリティクスのコードも設置することが可能です。下記ページでプラグインの使い方についてご紹介しておりますので、ぜひご覧ください。