前回の記事でAMPの導入からアナリティクスの設定手順までを紹介しました。
関連記事 : 【WordPress】これでわかった！AMPの導入とアナリティクス対応手順
AMPはモバイルページの高速化を図るためにGoogleやTwitterが参加している最新プロジェクトです。AMPを導入することでAMPページがインデックスされやすくなるというもの。
WordPressの場合、プラグインを有効化するだけで導入できますが、デフォルトのままでは従来のアドセンスが表示されません。
せっかくPVが増加してもアドセンスが表示されないとなると困ってしまいまね。早急な対処が必要です。
ということで、今回はAMPページにアドセンスを設定する方法を紹介したいと思います。
結論を先に言いますと、AMPページ用アドセンスを表示させるためにはAMP HTMLというAMP専用のHTMLを記述する必要があります。現在当ブログが利用している、無料の高機能テーマ「Cocoon」でもテーマのカスタマイズから追加することはできません。
実際に記述する場所は2か所。
- <head></head>の間に「スクリプトタグ」
- 通常のアドセンスコードの真下にAMP用アドセンスコードを追記
アドセンスをAMPページに設定
これについてはアドセンスのヘルプページにて解説されているので、確認してみましょう。
Accelerated Mobile Pages（AMP）は、高速表示されるコンテンツ ページを作成することでユーザーのモバイルウェブ体験の向上を目指すオープンソース プロジェクトです。AMP ページに AdSense 広告を掲載するお客様は、このガイドで AMP 対応の広告ユニットの作成方法をご確認ください。
AMP ページは AMP HTML で作成します。AMP HTML は標準の HTML に似ていますが、パフォーマンスの信頼性に一定の制約があり、リッチ コンテンツを作成できる、簡易 HTML 以上の拡張機能を備えています。そのため、AMP 広告ユニットには通常の AdSense タグとは異なる独自のタグが必要になります。
出典 : AMP 広告ユニットを作成する | AdSenseヘルプ
このように、AMPはモバイルページ高速化のために従来のHTMLではなく、AMP HTMLという特殊な基準で作成されているとのことです。そのため通常のHTMLへの出力のために設定されたアドセンスは表示されないことになります。
スクリプトをAMP HTMLに追加
さきほどのアドセンスヘルプを見ると、スクリプトについてこのように書いてあります。このスクリプトを設定することでAMP用アドセンスが読み込まれ表示されるとのこと。
<head>要素内に記述すればいいみたいです。
AMP HTML の <head> と </head> タグの間に記述されている以下のコードをコピーして貼り付けます。
ですが、これだけではどこに追加していいのか私のような素人同然のユーザーからしたらまったくもってわかりません。
これについては少し戸惑いましたが、すぐに解決しました。AMP内の「amp/templates/single.php」です。といってもわかりづらいかもしれませんが、AMPのファイル編集はWordPressのダッシュボード操作で行うことができます。
左メニューから「プラグイン」→「インストール済みプラグイン」を選択。プラグイン一覧からAMPを探し、「編集」を選択します。
テーマ編集からファイルを編集するような画面に切り替わります。
この中から「amp/templates/single.php」を探して選択。<head>内の「<meta charset=”utf-8″>」真下に先ほどのスクリプトコードを貼り付けて更新します。
念のためエラーが出てないのか確認しておきましょう。問題なければAMP用アドセンスを表示させるためのスクリプト準備は完了です。
新しい広告ユニットを作成
続いて任意の場所にAMP用アドセンスを表示させるための記述といきたいところですがAMPにアドセンスを設定する場合、従来の広告ユニットではなく新規にAMP用の広告ユニットを作成する必要があります。気になる広告サイズの方は、AMPについて言及しているアドセンスヘルプを見るとレスポンシブ広告の作成を推奨しているような感じですので今回は当サイトもレスポンシブ広告AMP用広告ユニットを作成したいと思います。
まずはアドセンスのアカウントページにログイン。コンテンツの広告ユニットページから「新しい広告ユニット」を選択します。
レスポンシブのサイズを選択し、広告ユニットを新規作成します。広告ユニットの名前は「通常アドセンスの広告ユニット名＋AMP」としておけばパフォーマンスの確認時などにわかりやすいかと。
AMP用の広告ユニットができたら、以下の画面をそのまま表示させておくなりいったんメモ帳などにコピペして控えるなどしておきます。
AMP用の表示コードを作るさいに必要なのが以下の2つの値です。
「ca-pub-xxxxxxxxxxxxxxxx」
「date-ad-slot=”xxxxxxxxxx“」
「ca-pub-xx…」は固定ですが、「date-ad-slot=”xx…」は作成する広告ユニットによって違うので設定するさいは間違えないように気を付けましょう。
コードは2種類
スクリプトの設定とAMP用アドセンスの準備ができて、これでようやく任意の場所にAMP用アドセンスを表示させるためのコード設定をすることができます。
AMP用アドセンスの広告ユニットは表示場所によって2種類のコードがあります。「スクロールせずに見える範囲」と「スクロールしなければ見えない範囲」です。
「スクロールせずに見える範囲」というのは、ファーストビューのことでしょう。ユーザーが記事に訪問した時に目にする最上部の位置です。ここにAMP用アドセンスを設定する場合は、「スクロールせずに見える範囲」。
▼スクロールせずに見える範囲 (高さ100px)
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>
それに対し記事中や記事下部に表示させるAMP用アドセンスは「スクロールしなければ見えない範囲」になります。今回は記事中に設定するので、「スクロールしなければ見えない範囲」のコードを選択します。
▼スクロールしなければ見えない範囲 (レスポンシブ… 幅300px 高250px)
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>
この「xxxxxxxx..」の部分を先ほどAMP用で作成した広告ユニットの値にそれぞれ置きかえます。これを通常のテーマ編集操作で広告を表示させたい任意の場所にコードを追記すればOKです。
コードの追記について
さきほどのコードの追記場所は例えば、モバイルの通常ページと同じ場所にAMP用アドセンスを表示させたいのであれば通常アドセンスと同じ場所に追記することでAMPページにもアドセンスを表示させることができます。
このような感じで通常のアドセンスコードの真下に追記すればOKです。
……
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
//AMP用アドセンスコード
<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>
当サイトは記事内にショートコードを設定していますが、その場合も通常のアドセンスコードの隣にAMP用アドセンスコードを追記するだけで問題なく作動します。
ちなみにショートコードというのは、2008年以降のWordPressに備わっている機能で「functions.php」にショートコードの関数を予め指定することで短いショートコード名を書くだけで動作してくれるというもの。
関連記事 : 「WordPress」ショートコードとは？記事中にアドセンスを設置する
例えば[sc]というショートコード名に「functions.php」からアドセンスコードを設定しておけば記事内の任意の場所に[sc]と入力するだけでアドセンスを表示させることができるという仕組みです。
記事内に3つアドセンスを設置したいとしましょう。この場合は[sc][sc2][sc3]と3つのショートコード名にアドセンスコードを予め設定することで表示させたい場所にそれぞれ表示させることができるという大変便利なものです。
このショートコードでもAMP用アドセンスのコードを設定することができるので、設定している場合はやってみるといいかもしれません。
通常のレスポンシブ広告(300×250)をAMPの同ページ内に3つ設置したのですが、上の広告だけが表示され他の広告は読み込みが遅かったり表示されないことがありました。広告の設置で読み込みが遅くなってはAMPの意味があまりないような気がしますのでレクタングルサイズは同ページ内に1つ、または2つまでがいいのかもしれません。
また、リンクユニットや関連コンテンツであればそれほど遅延することなく表示されました。ちなみにAMP設置の関連コンテンツの同サイトへのリンク先はAMPページではなく通常ページになるようです。
表示されない
他にも色々試してみましたが、ウィジェットからのAMP用アドセンスは設定することができないようです。そのうちWordPressがアップデートされウィジェットからAMP用アドセンスが設定できるようになるかもしれませんが、現状では表示されないようでした。
まとめ
AMP用アドセンスを設定した数時間後、アドセンスの「広告ユニット」を確認するとAMPの設定からまだ2、3日しか経っていませんが既にPV全体の1割ほどがAMPページのPVになっているとAMP用アドセンスの広告表示回数から推測できました。
まだ一部のインデックスで1割のPVですから、今度はもっとAMPページのPVの割合が多くなるかもしれません。このようにAMPページは思っているよりも需要がありそうなので、AMPを有効化したらアドセンスの設定は一日でも早く済ませておいた方がいいといえるでしょう。