AMPページでGoogle Adsenseの広告ユニット・自動広告を使う方法

「amp-ad」コンポーネントをロードする

AMPページではJavascriptの実行に制限がかかっているため、通常のGoogle Adsense広告ユニットを挿入するとAMPエラーになって、AMPページとして動作してくれません。

そこでAMPページでGoogle Adsenseの広告ユニットを使うためには、「amp-ad」というコンポーネントを利用します。

amp-ad | AMP

使い方は簡単で、HTMLヘッダに下記のように記述するだけです。

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

これで、

<amp-ad></amp-ad>

とすることでJavasciptで動作する広告ユニットを利用出来るようになります。

amp-adコンポーネントはGoogle Adsense以外とも共用

amp-adコンポーネント自体はGoogle Adsenseに限定したコンポーネントではないので、Google Adsense以外の広告プラットフォーム、例えばアフィリエイトなどの他の広告でも利用可能です。

ただし、挿入する広告はamp-adフォーマットになっている必要があります。通常のimgタグを使ったバナー広告やJavascriptで自動表示する広告は使えない（厳密にはAMPエラーが出てAMPページとして認識されなくなる）ので注意しましょう。

自動広告を使う場合は「amp-auto-ads」コンポーネントを使う

ページに自動で広告を挿入してくれるGoogle Adsense自動広告を使っている場合は、「amp-auto-ads」という専用のコンポーネントを使います。

amp-auto-ads | AMP

先ほどのamp-adと同様に、HTMLヘッダに下記のコードを挿入します。

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

なお、自動広告を使うだけであれば、「amp-ad」コンポーネントのロードは不要です。自動広告と通常の広告ユニットを同時に使うのであれば、amp-adコンポーネントのロードも必須です。

これだけでは自動広告が有効にならないので、下記のコードをHTMLのbodyタグの直下に入れます。

<amp-auto-ads
  type="adsense"
  data-ad-client="ca-pub-XXXXXXXXXXXX">
</amp-auto-ads>

「ca-pub-XXXXXXXXXXXX」の部分は、自分のパブリッシャーコードを入れます。これだけでGoogle Adsenseの自動広告が有効になります。

自動広告が挿入されなかったら？

AMPのGoogle Adsense自動広告は、サイトで挿入した初期の頃には広告が表示されないことがあります。その際は、AMPのエラーが出ている可能性があるので、ブラウザの開発者ツールのコンソールからエラー文言を確認します。

もし、「No ad placements found for publisher ID」というエラーが出ていたら、下記のページの方法を試してみてください。

AMP Adsense自動広告で「No ad placements found for publisher ID」となった時にチェックしたいこと

---

AMPページでGoogle Adsenseを使う方法をみてきました。

一度仕組みを理解してしまえばなんら難しいことはないのですが、AMPページはエラーに厳しいので、一つずつ確実にやっていくようにしてみてください。