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

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

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

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

スポンサーリンク

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

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

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

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

広告300×250にAdSenseコードが設置されている_thumb

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

AdSenseコードから必要な情報を抽出する_thumb[1]

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

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

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

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

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

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

設定方法は以下。

AdSenseコードの取得

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

アドセンス管理画面から新しい広告ユニットの追加ボタンを押す_thumb

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

新しい広告の追加でレクタングル広告を選択する_thumb

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

アドセンス管理画面で作成した広告コード_thumb

AMP用コードの作成

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

AdSenseコードの属性値を利用する_thumb

コード上の「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管理画面から「外観 → カスタマイズ」を選択してください。

外観からテーマカスタマイザーの設定をする_thumb

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

AMP用をAdSenseコードに値をコピペ_thumb

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

ちなみに、ウィジェット(広告 300×250)とテーマカスタマイザー両方に設定してある場合は、テーマカスタマイザーの「AMP用AdSenseコード」項目が優先して利用されます。PC、モバイル、AMPの3つだけ分けてパフォーマンスを計測したいなんて場合にも、テーマカスタマイザーの方に新しいコードを貼り付けても良いかもしれません。

「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の成約が、非常に厳しいので、なるべくエラーを出ないようにするためこのような仕様になっています。

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

スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. かぶらがわ より:

    こちらの記事に書かれている機能を導入しようか悩んでいるところです。

    「まとめ」内の記述について確認させていただきたいのですけど、現在は「広告ウィジェット」で設定していて、AdSenseコードを1つテーマカスタマイザーから貼り付けた場合。

    「貼り付けられる位置は決まっており、ウィジェットなどで自由に設置することもできません」とのことですが、具体的にはどういう位置にAdSenseが表示されるのでしょうか?

    あと、まだ私はAMPページに関してイマイチ理解しきれていないのですが、試しにAMP機能を有効化してみて、何らかの不具合が出た場合は簡単に元の状態に戻せるようなものなのでしょうか?

    フォーラムで質問すべきか迷いましたが、記事に関することでしたのでこちらにコメントさせていただきました。ご助言くださるありがたいです。

  2. わいひら わいひら より:

    とりあえずはこんな感じで表示されます。
    https://wp-simplicity.com/amp-adsense/?amp=1

    あと、v2.3.5では、広告ウィジェットで個別に広告を設定していて、テーマカスタマイザーでコードを貼り付けても、広告が表示されない不具合があります。次のバージョンで改善されます。
    詳細:AMP広告が表示されない(広告 300×250ウィジェットを使わずに、テーマカスタマイザーで設定した場合)

    あと、まだ私はAMPページに関してイマイチ理解しきれていないのですが、試しにAMP機能を有効化してみて、何らかの不具合が出た場合は簡単に元の状態に戻せるようなものなのでしょうか?

    何をもって不具合とするかにもよります。
    PHPの不具合だと、機能をオフにすれば即座に解消されると思います。
    Google Search ConsoleでAMPエラーが出るのを不具合とするのなら、機能を無効にしても、クロールされるまで反映には時間がかかります。
    加えて、本文中にAMPエラーがある場合は、自前で本文のエラー箇所を修正する必要があります。全てのエラーに対してコードだけで対応することはできないのです。
    ただ、AMPエラーが出たからといって、検索順位などには影響しないものと思います。なにせ、AMPは仕様が厳しく、エラーがすぐ出やすいものなので、そんなことで通常ページの順位を下げられてしまったら、誰も導入しようとはしないと思うからです。

  3. かぶらがわ より:

    わいひらさん、ご丁寧に回答いただきどうもありがとうございます。AMP機能に関する現状がよくわかりました。

    いましばらく理解を深めた後、前向きに導入にチャレンジしてみたいと思います。