AFFINGER5のAMPページにAdSenseの自動広告を配信する方法

WordPressテーマ「AFFINGER5（WING）」のAMPページに、Google AdSenseの「AMP 自動広告」を配信する方法をご紹介します。

「AMP 自動広告」とは？

AdSenseの「AMP 自動広告」

AdSenseの「AMP 自動広告」は、その名の通りAMPページに自動で広告を配信するシステムです。

広告が配信される場所

自動広告を設置することで、AMPページの「ヘッダー」「コンテンツ内」「フッター」などに広告が配信（表示）されます。

配信される広告の種類

配信される広告の種類（広告ユニット）は、2019年2月現在で「テキスト広告」と「ディスプレイ広告」のみです。

その他の広告ユニット、たとえば「記事内広告」や「リンクユニット」は未導入です。

自動広告で配信できない広告ユニットは、AFFINGER5ユーザーならカスタマイズすることで配信できます。以下の記事もご参考に。

AMP 自動広告の設置方法

AMP 自動広告の設置方法は、AdSenseヘルプの案内通りですが、AFFINGER5の場合は具体的にどこに設置すべきか？解説します。

AdSense アカウントにログイン

Google AdSenseにログインします。

[広告] をクリック

左メニューの「広告」をクリックしたあとに、続けて「自動広告」をクリックします。

[AMP 自動広告] をクリック

「自動広告（通常ページ）」と「AMP 自動広告」のタブがあるので、「AMP 自動広告」をクリックします。

「テキストとディスプレイ」の広告フォーマットをオン

テキスト広告とディスプレイ広告のフォーマットが「オン」になっていることを確認します。

[新しいフォーマットを自動的に取得する] を選択したままにする

新しいフォーマットが AMP 自動広告に追加されたら、自動的に取得するよう設定できます。

現在は「テキスト広告」と「ディスプレイ広告」のみですが、今後は記事内広告やモバイルアンカー広告なども使用できるようになると思います。そのとき、ここの設定をオンにしておくと、自動的に表示されるようになります。

「amp-auto-ads」スクリプトを＜head＞内に貼り付ける

ココからが本題です。

AMP自動広告は、「head」と「body」の2カ所に、それぞれスクリプトを挿入することで表示ができます。

まずは「head」に貼り付けるスクリプトの場所から。

AFFINGER5ユーザーの場合、「single-amp.php」ファイルの＜/head＞の直前に貼り付けます。

外観＞テーマの編集＞single-amp.php

WordPress管理画面から直接編集する場合は、外観＞テーマの編集で、「single-amp.php」を選択します。

47行目あたりの＜/head＞の直前

47行目あたりに＜/head＞があるので、このタグの直前にスクリプトを貼り付けます。

head内に貼り付けるスクリプト

貼り付けるスクリプトは、AdSenseのAMP自動広告の「手順2」のものです。

「amp-auto-ads」スクリプトを＜body＞の開始タグ直後に貼り付ける

次に「body」に貼り付けるスクリプトの場所から。

315行目あたりの＜/body＞の直前

315行目あたりに＜/body＞があるので、このタグの直前にスクリプトを貼り付けます。

body内に貼り付けるスクリプト

貼り付けるスクリプトは、AdSenseのAMP自動広告の「手順3」のものです。

以上で、AFFINIGER5のAMPページに、AdSenseの自動広告が表示できました。

AMP 自動広告の設置確認

AMPテスト結果

AMP自動広告は、設定してから20分くらい待つと表示されているはずです。しばらく待ってから確認しましょう。

待っている間は、AMPページに問題がないか？チェックすることをおすすめします。もし、スクリプトの挿入位置に間違いがあったりすると、AMPページがエラーとなり、表示されなくなります。

ボクは、うっかり「＜/head＞」ではなく、「＜/header＞（67行目）」の直前にスクリプトを貼り付けてしまったため、エラーとなってしまいました。

AMPページのエラーチェックは、GoogleのAMPテストを使います。

エラーもなく、広告も配信できていたら、無事に終了です。

まとめ

「AFFINGER5（WING）」のAMPページに、AdSenseの「AMP 自動広告」を配信するには、「head」と「body」の2カ所に、それぞれスクリプトを挿入します。

スクリプトを挿入するファイルは、「single-amp.php」です。このファイル内の＜/head＞と＜/body＞の直前に、それぞれ貼り付けます。

スクリプトを挿入したあとは、AMPテストでエラーがないか？必ずチェックしてください。