AMP導入にあたり、それに合わせた広告を貼らなければなりません。その手順を記載しておきます。方法はいくつかありますが、簡単にGoogleの広告を貼ることができる次の3つの方法を記載します。
AMP for WP | Advanced Ads | Ad Inserter |
---|---|---|
広告コードを簡単に追加できる | 簡単 | 少し複雑 |
headerにコードを簡単に追加できる | 簡単 | 少し複雑 |
コンテンツの中は表示できない | 設置位置を細かく指定可 | 設置位置を細かく指定可 |
簡単にAMP広告を貼れるのは「Advanced Ads」だと思います。「AMP for WP」はコンテンツの中には広告を表示できませんが、「Advanced Ads」と「Ad Inserter」はコンテンツの中の指定(h2タグの前などの指定)ができます。
AMP Adsenseコードは<head>タグ~</head>タグの間に貼ります。
<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”> </script> |
コードを貼りつける方法は2つの方法があります。
中にはコードを挿入できないテーマもありますのでご注意下さい。
AMP広告(ディスプレイ広告)
レスポンシブは表示される端末の利用できるスペースに合わせてサイズを自動調整します。画面の向きが変わった場合もそれに合わせ広告を配信してくれます。
<amp-ad width=”100vw” height=320 type=”adsense” data-ad-client=”ca-pub-1234567891234567“ data-ad-slot=”1234567890“ data-auto-format=”rspv” data-full-width> <div overflow></div> </amp-ad> |
パブリッシャーID | ca-pub-1234567891234567 |
広告スロットID | 1234567890 |
上記のAPM広告コードをAMPページに貼ります。
注意:広告コードは<div>や<iframe>など高さが固定されている中には貼らないこと。
それぞれの広告コードの貼り方は下に記載しています。
広告設定のプレビューで確認する
設定した広告の場所が表示されます。
実際に広告が表示されるまで時間がかかります。20分程待つように記載があります。
AMP 広告コードを配置したら、さまざまなモバイル端末で広告をテストして、レスポンシブ機能が適切に動作しているか確認することをおすすめします。
お手持ちのモバイルで表示されていない場合もあります。AMP広告ユニットが表示されているかを確認するには、パフォーマンスレポートでも確認できます。
広告ユニットの日付毎の表示回数がわかります。また「内訳」→「コンテンツプラットフォーム」ではモバイル端末でのAMP広告の表示回数がわかります。
プラグインAMP for WPは、AMPの設定やデザインの他、AMPページに簡単に広告を設置できます。
AD#1 | Headerの下 |
AD#2 | Footerの下 |
AD#3 | 投稿コンテンツの上 |
AD#4 | 投稿コンテンツの下 |
AD#5 | タイトルの下 |
AD#6 | 関連記事の上 |
AMPのHead、body、Footer にHTML記述が可能です。
AMP for WP の設定は下にリンクを参照
「プレーンテキストとコード」または「Adsense」で広告コードを挿入できます。
プレーンテキストとコードを選択した場合の設定
Adsenseを選択した場合の設定(コードを貼る必要がない)
Advanced Ads の詳しい設定は下にリンクを参照
Ad Inserter の詳しい設定は下にリンクを参照