Googleアドセンス。AMP対応広告ユニットを設置

<head>タグ内にコードを入れる

 

このコードを「header.php」の<head>タグと</head>タグの間に配置します。

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

 

Luxeritasの場合

  1. 子テーマの編集
  2. Head タグ : add-header.php

 

AMP用のウィジェットに貼りつける

 

Luxeritasでは、AMP用のウィジェットは全部で9個あります。

 

  1. AMP用サイドバー
  2. ヘッダー下ウィジェット(AMP用)
  3. 記事タイトル上ウィジェット(AMP用)
  4. 記事タイトル下ウィジェット(AMP用)
  5. 投稿内で最初に見つかったH2タグの上(AMP用)
  6. 関連記事上ウィジェット(AMP用)
  7. 関連記事下ウィジェット(AMP用)
  8. 記事下ウィジェット(AMP用)
  9. 記事下ウィジェットよりさらに下(AMP用)

 

レスポンシブ広告

 

  1. Google AdSense
  2. 新しいレスポンシブ広告ユニットを作成

 

 

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

 

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

 

<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-++++++
data-ad-slot=”++++++“>
</amp-ad>

 

幅(width)と高さ(height)が指定されていますが問題はありません。AMPにおいてもレスポンシブ用の広告が反映されます。

コードを「ウィジェット #1 アドセンス (Luxeritas オリジナル)」に記載して、AMP用のウィジェットに貼りつけます。

すぐには表示されません。少し経ってからお手持ちのスマホなどで確認しましょう。

 

ヘッダー下やタイトル下に配置

 

Google先生からの提案でレスポンシブ広告を貼りました。

 

<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-+++++++++”
data-ad-slot=”+++++++++“>
</amp-ad>

 

関連コンテンツ

 

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

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

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

 

<amp-ad
layout=”fixed-height”
height=”1221
type=”adsense”
data-ad-client=”ca-pub-++++++++++++
data-ad-slot=”++++++++++++“></amp-ad>

 

翌日は崩れまくりでしたが、いつの間にかちゃんと表示されるようになっていました。ですが「ユニットが3つ」のまま。それ以上は表示されません。

 

 

ちなみに、Simplicityの場合はこのように配置します。

 

親テーマ「single-amp.php」の<div id=”under-entry-body”>の直下にコードを貼りつけると、記事下に関連コンテンツユニットが表示されます。

AMP 対応広告ユニットの作成方法 - AdSense ヘルプ

 

【未解決】(AMP自動広告)

 

※現在、AMP 自動広告ではテキスト広告とディスプレイ広告のみがサポートされています。AdSenseヘルプ

 

 

  1. Google AdSense
  2. 最適化
  3. Labs
  4. 「AMP 自動広告 – テキスト広告とディスプレイ広告」をオンにします

 

 

①このコードを「header.php」の<head>タグと</head>タグの間に配置

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

 

Luxeritasの場合

  1. 子テーマの編集
  2. Head タグ : add-header.php

 

②このコードを<body>タグの直後に配置

<amp-auto-ads type="adsense"
data-ad-client="ca-pub-ご自身のアドセンスID">
</amp-auto-ads>

 

  1. 外観
  2. テーマの編集
  3. 親テーマの「header.php」
  4. <body>直下に配置

 

テストしたらエラーでした。

The tag ‘amp-auto-ads’ requires including the ‘amp-auto-ads’ extension JavaScript

 

【タグ「amp-auto-ads」には拡張機能 JavaScript の「amp-auto-ads」が含まれている必要があります】とのこと。

 

物は試しに、footer.phpの</body>の直上に置いてみましたが、うんともすんとも言いませんでした。

 

ちなみに、子テーマの「アクセス解析(body)」に設置してもエラーでした。記載の場所が異なるのか、何かを足さないといけないのでしょうが、アホな私には分からないというか意味そのものが不明なので諦めました。

 

ちなみに、Simplicity2の場合はこんな風に設置

1. 外観 -> テーマの編集に移動
2. 編集するテーマを選択でSimplicity2を選択 (Simplicity2-Childではない)
3. amp-header.phpを選択
4. </head>の上と<body>の後ろにそれぞれscriptタグを挿入し保存
Google AdsenseのAMP自動広告のタグ挿入について

 

結果

 

パソコンのアドセンスは自動広告、モバイルは手動でAMP広告を貼りつけました。AMPに関してはLuxeritasよりSimplicityの方が分かりやすいかも。取りあえずはこのままで。また見直したいと思います。