AMP導入にあたり、それに合わせた広告を貼らなければなりません。その手順を記載しておきます。方法はいくつかありますが、簡単にGoogleの広告を貼ることができる次の3つの方法を記載します。
広告を貼るwebサイトとAdsenseを紐付けします。
<head>タグ～</head>タグの間に次のコードを貼りつけます。
| <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script> |
コードを貼りつける方法は2つの方法があります。
中にはコードを挿入できないテーマもありますのでご注意下さい。
広告ユニットはレスポンシブを選んで下さい。レスポンシブは表示される端末の利用できるスペースに合わせてサイズを自動調整します。画面の向きが変わった場合もそれに合わせ広告を配信してくれます。
広告コードを表示します。必要なコードは赤文字の部分です。
| <ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-1234567891234567“ data-ad-slot=”0123456789“ data-ad-format=”auto”></ins> <script> |
保存した広告コードから太文字の部分をメモします。
ca-pub-1234567891234567はサイト運営者のIDで、1234567890は広告ユニットIDです。
| <amp-ad width=”100vw” height=320 |
上記のAPM広告コードをモバイルページのHTML ソースコードに貼ります。
注意:広告コードは<div>や<iframe>など高さが固定されている中には貼らないこと。
広告が表示されているかモバイルでテストします。実際に広告が表示されるまで時間がかかります。20分程待つように記載がありました。
AMP 広告コードを配置したら、さまざまなモバイル端末で広告をテストして、レスポンシブ機能が適切に動作しているか確認することをおすすめします。
お手持ちのモバイルで表示されていない場合もあります。AMP広告ユニットが表示されているかを確認するには、パフォーマンスレポートで確認して下さい。
広告ユニットの日付毎の表示回数がわかります。また「一般的なレポート」→「コンテンツプラットフォーム」ではモバイル端末でのAMP広告の表示回数がわかります。
プラグインAMP for WPは、AMPの設定やデザインの他、AMPページに簡単に広告を設置できます。AMP for WP をインストールし有効化します。
Advertisement（広告）をクリックし「Advertisement Positions」を開きます。
#1～#6の広告の表示位置は次の表の通りです。
| AD#1 | Headerの下 |
| AD#2 | Footerの下 |
| AD#3 | 記事の上 |
| AD#4 | 記事の下 |
| AD#5 | タイトルの下 |
| AD#6 | 関連記事の上 |
「Data AD Client」と「Data AD Slot」については、上の「広告ユニットを作成する」同じです。
保存した広告コードです。赤文字の部分を記載します。
| <ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-1234567891234567“ data-ad-slot=”0123456789“ data-ad-format=”auto”></ins> <script> |
ヘッダー下の広告の例
プラグイン Advanced Ads を利用すると様々な広告を広告を簡単に貼ることができます。Advanced Adsをインストール、有効化します。
Advanced Adsの設定は2つです。
AMP広告ユニットの作り方は、上記の「AMP広告ユニットを作成する」を参考にして下さい。
AMP広告ユニットの例
| <amp-ad width=”100vw” height=320 |
設置をクリックするか、または広告の内容を貼り終わるとそのまま設置の画面が表示されるようになっています。
配置の種類を記事の内容に注入するように選んだ場合、保存後に詳しい位置を指定できます。
詳しくは下記リンクをご参考下さい。
AMP for WP でAMP自動広告を貼る場合は有料の拡張機能が必要です。
そこで Ad Inserter は有料を利用しなくても、自動広告AMPを貼れるようです。その手順を記載します。
For the body code simply configure one block with adsense code
[ADINSERTER AMP]
<amp-auto-ads type=”adsense” data-ad-client=”ca-pub-123456789123456″>
</amp-auto-ads>and set automatic insertion Before post (if your theme does not support this position use Before content).
This position is not immediately after the <body> tag but is the topmost position available without modifying theme files. It should work normally.
AMP 自動広告の貼り方は、下記のリンクに詳しく記載しています。
This post was last modified on 11/04/2019 11:41 AM