はじめに

AMPページで広告を出すときの備忘録

AMPで広告を出す場合は、amp-ad コンポーネントを使う

リファレンスページは以下。ページ下部には対応している広告も紹介している。ただし、Amazonアソシエイトの日本版は多分ない(やり方がわからなかった)

使い方

まずは、headに下記を追加


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

続いて広告を表示したい場所にコードを追加。Google AdSense広告を例に記述


<amp-ad width=600 height=150
layout="responsive"
type="adsense"
data-ad-client="xxxxxxxx"
data-ad-slot="xxxxxxxx"
>
</amp-ad>

幅高さや、レスポンシブは画像と同じ。どの広告なのかタイプを指定して、それにあったデータを入力していく。Google AdSenseで必要な data-ad-client と data-ad-slot に関しては、作成したユニットコードを見ると書いてあるのでそれをコピペしてあげればいい。他のものはコピペ不要。

Google AdSense の自動広告について

Google AdSenseを使うのが初めてで、自動広告がどんな動作をするかわからなかったのでAMPページにも追加してみた。

使う場合は、アドセンス管理画面で 広告 > 自動広告 に進み、AMP自動広告のタブを選択。

手順1の 新しいフォーマットを自動的に取得する のチェックは入れておいて損はなさそう。手順2のコードをheadに追加。これは、amp-ad とはまた違うので忘れないようにする


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

手順3のコードをbody内に貼り付ける


<amp-auto-ads type="adsense"
              data-ad-client="xxxxxxx">
</amp-auto-ads>>

どんな風に表示されるか

ページの作りによっておそらく表示方法も変わるようなので一概には言えないが、うまくいったケースといまいちなケースを紹介する

まずは、いまいちなケース。こちらは横長の広告が自動で挿入されたが、コンテンツ枠内からはみ出てしまっている。

全部そうなのかと思いきや、Amazonアソシエイトの一番下に自動挿入されたヤツはコンテンツ枠内に入りきっている。Amazonアソシエイトと幅が同じ場合もあった。

また、手動広告はそのまま表示されているので、特定の場所は手動、それ以外は自動広告という方法もとれるみたい

Amazonアソシエイトについて

AmazonアソシエイトのAMP-HTML対応」でも書いたが、A9広告のamp-ad対応はしているが、日本のAmazonのウィジェットなどの対応はまだしていないっぽい。

Amazonアソシエイトのページを見てみたが、特に言及はなかった。ただ、iframeで表示されている広告については、amp-iframe コンポーネントを使うことで表示・クリックを行うことができ、アソシエイトに送られているようなのでそれで対応するしかないようだ。