SimplicityのAMPページに表示するアドセンスの設定方法

Simplicity2.3.1からAMPに対応しました。

SimplicityのAMP機能の使い方。カスタマイズ方法など。

Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言...

wp-simplicity.com

2017-08-25 12:46

以下では、AMPページで表示するAdSense広告の設定方法を紹介したいと思います。

Simplicityデフォルト機能で広告を設置している場合

以下の方法で、「広告 300×250」ウィジェットエリアにAdSenseコードを設置している場合は、わざわざAMP用に広告を設置する必要はありません。

Simplicityテーマ内にGoogle AdSense広告を貼り付ける方法

Simplicityでは、Google AdSenseの「レクタングル（大）」と「レクタングル（中）」の二つの広告を貼り付けるだけで、パソ...

wp-simplicity.com

2017-08-03 17:36

AdSenseコードが以下のように、テキストウィジェットで設置されている場合は、AMP用広告の設定は不要です。

Simplicityでは、設定されているAdSenseコードから「data-ad-client」と「data-ad-client」属性値IDを自動的に取得してAMP用のAdSenseコードに変換します。

Simplicityデフォルトの広告機能を利用している方は、初心者の方も多いと思います。ですので、取り立てて面倒な設定をあらためてしなくても良いように、このような仕様になっています。

ウィジェットで個別に広告を設置している場合

Simplicityでは、比較的広告が設置やすい場所に、ウィジェットエリアが設けられています。

ですのでパフォーマンスを上げるため、以下のように個別に「広告ウィジェット」を用いて設定している方もおられると思います。

Simplicity広告用ウィジェットの設定方法

Simplicity1.7.4から広告用ウィジェットを追加しました。 photo by Peter Kaminski 広告専用のウィジェッ...

wp-simplicity.com

2017-02-22 01:08

ただこちらの「ウィジェット広告を用いた方法」だと、新たに1つAdSenseコードを設定する必要があります。

設定方法は以下。

AdSenseコードの取得

まずは、アドセンス管理画面から「新しい広告ユニット」ボタンを押してください。

広告ユニットの作成ページに遷移したら、「名前」を入力し、「広告サイズ」は、「300×250 レクタングル」を選択します。そして最後に「保存してコードを取得」ボタンを押してください。

すると、以下のような広告コードが表示されるので、何かにコピペしてメモっておいてください。

AMP用コードの作成

AMP用のAdSenseコードを作成するには、コードの以下の部分のIDを利用します。

コード上の「data-ad-client」と「data-ad-slot」という属性値を利用して、以下のようなコードを作成します。

<amp-ad width="300" height="250" type="adsense" 
  data-ad-client="ca-pub-XXXXXXXXXXXXXXX" 
  data-ad-slot="XXXXXXXXXX"></amp-ad>

あとはこれをカスタマイザーの設定に貼り付けるだけです。

テーマカスタマイザーの設定

WordPress管理画面から「外観 → カスタマイズ」を選択してください。

あとは「AMP」項目にある「AMP用アドセンスコード」に先程作成したコードを貼り付けてください。もちろん「AMPの有効化」はオンになっている必要があります。

あとは「保存して公開」ボタンを押せば、設定は完了です。

「AMP用AdSenseコード」の設定値はIDさえ取得出来れば良い

ぶっちゃけ、「AMP用AdSenseコード」の設定値は、以下のような、AdSenseが生成したコードのままでもOKです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AMP広告例 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ただ、上記のようなScriptタグが入った行動だと、サーバーのファイヤーウォール設定によっては、設定値がブロックされて保存できない場合もあります。

ですので、一応先程説明したようなAMPの仕様に沿ったAdSenseコードを貼り付ける案内をしています。

<amp-ad width="300" height="250" type="adsense" 
  data-ad-client="ca-pub-XXXXXXXXXXXXXXX" 
  data-ad-slot="XXXXXXXXXX"></amp-ad>

基本的に、「data-ad-client」と「data-ad-slot」の属性値の値さえ取得出来れば良いので、以下のような入力でも全然OKです。

data-ad-client="ca-pub-XXXXXXXXXXXXXXX" 
data-ad-slot="XXXXXXXXXX"

もし<amp-ad>タグもテーマカスタマイザーでブロックされて登録できないサーバーなどありましたら、上記コードなども試してみてください。

AMPページでは「広告ウィジェット」では設定できない

SimplicityのAMPページでは、「広告ウィジェット」を用いての広告設定は出来ない仕様となっています。

というのも、ウィジェットエリア設置した場合、ユーザーによりAMPの制約から外れたコードが設置される可能性があります。そうすると、AMPエラーとなり、GoogleにAMPページとして扱われません。

そうなっては、設置する意味がなくなってしまうので、ウィジェットエリアでの設定はできないようにしています。

もし自前で広告を貼りたい場合は、テンプレートの「single-amp.php」を各自で編集してください。

まとめ

こんな感じで、Simplicityデフォルトの広告機能を利用している場合は基本的に設定不要。「広告ウィジェット」で設定している場合は、AdSenseコードを1つテーマカスタマイザーから貼り付けるだけで設定できるようになっています。

その代わり、貼り付けられる位置は決まっており、ウィジェットなどで自由に設置することもできません。

これは、AMPの成約が、非常に厳しいので、なるべくエラーを出ないようにするためこのような仕様になっています。

自由に広告を設定するには、テンプレートファイルをカスタマイズする必要があるのでご了承ください。