【Googleアドセンス】AMP対応広告ユニットを設置しました

Accelerated Mobile Pages

Google AdSenseの設定

Google AdSense→広告→概要→「AMPサイトをお持ちですか?」をクリックします。

「AMPサイト用AdSenseコードを取得する」ページで、「AMPサイトにディスプレイ広告を自動的に表示」をオンにするとコードが表示されます。

 

また、広告→「AMPはオンです」をクリックしてもコードを表示させることができます。

 

1.AMPの<head>タグ内にコードを貼る

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

記述場所は、Cocoonの場合、ダッシュボード→外観→テーマエディター→Cocoon Child→amp-head-insert.phpになります。

<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>の下に記載します。

 

2.<body>タグのすぐ後に貼る

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-サイト運営者ID">
</amp-auto-ads>

記述場所は、Cocoonの場合、ダッシュボード→外観→テーマエディター→Cocoon Child→amp-body-top-insert.phpになります。

<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>の下に記載します。

参照→AMP 自動広告の設定方法 – AdSense ヘルプ

 

一応、下記にカスタマイズ方法を記載しておきますが、現在は自動広告設定にしておけば関連コンテンツも自動的に表示されるようです

 

レスポンシブ広告

Google AdSense→広告→広告ユニットごと→ディスプレイ広告

この2つの値を置き換えます。

  • サイト運営者ID(data-ad-client)
  • 広告ユニットID(data-ad-slot)

<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-サイト運営者ID
data-ad-slot=”広告ユニットID“>
</amp-ad>

幅(width)と高さ(height)が指定されていますが、レスポンシブ用の広告が反映されます。

約20分程度で反映されます。

参照→AMP 対応のディスプレイ広告ユニットを作成する – AdSense ヘルプ

ウィジェットに貼る場合

Cocoonの場合は、テキストやテキスト(モバイル用)のウィジェットに貼り付けます。

ウィジェットの下の方にある表示設定で、ウィジェットの表示を「チェック・入力したページで表示」に変更して、「AMPページ」にチェックを入れて保存をクリックします。

 

関連コンテンツ

Google AdSense→広告ユニット→関連コンテンツ

表示されたコードを置き換えて、AMP用のウィジェットに貼りつけます。

ユニットの数を変更したい場合は「height=”1221” 」の数値を変更します。

横幅を指定したい場合は「layout=”fixed-height”」ではなく「layout=”responsive”」と書きます。

<amp-ad
layout=”fixed-height”
height=”1221
type=”adsense”
data-ad-client=”ca-pub-サイト運営者ID
data-ad-slot=”広告ユニットID“></amp-ad>

コードの貼り方はCocoonの場合は、前述した「レスポンシブ広告」と同様です。

設定後は、エラーが出ていないか「Google AMP テスト」で確認すると安心です。







AMP サイト運営
わたしらしく