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

Accelerated Mobile Pages

 

AMP自動広告

Google AdSenseの設定

Google AdSense→自動広告→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 //ログインユーザーも含めてカウントする場合は以下に挿入 ?>の下に記載します。

 

広告コードをAMP HTMLの本文に貼り付ける

<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 ヘルプ

 

ただし!

Cocoon設定→広告→アドセンス表示方式で「自動広告をONにしている場合」は…

headタグ内に入れたこのコードは外します。

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

外さないとAMPエラーになります→(タグ「amp-auto-ads extension .js script」がドキュメントで複数回使用されています)

 

レスポンシブ広告

 

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の場合は、前述した「レスポンシブ広告」と同様です。

1番楽なのは自動広告かと思います

タイトルとURLをコピーしました