公開日 2020-04-13 最終更新日 2021-04-18
ワードプレスでブログ運営していると、グーグルアドセンス（Google AdSense）から「AMPを導入しましょう」と提案されるケースがあります。
提案のままwordpressのAMPプラグインを入れた場合、そのままでいるとAMPページのグーグルアドセンスとグーグルアナリティクスが無効になります。
この記事では、ワードプレスでAMPを導入した際の、アドセンスとアナリティクスの設置方法をご紹介します。
この記事の目次
SPONSORED
AMPとは何か
そもそもAMPとは何か。
モバイル表示の際、htmlやJava Scriptの制限、独自キャッシュの読み込みなどで、ページを高速表示する仕組みです。
平たく言うと、AMPを設定するればスマホ表示のスピードが速くなります。
開発したのは、グーグルです。
AMPで構築したページには、モバイルの検索結果に「⚡（カミナリマーク）」が表示されます。
普段、モバイル検索で、このマークを目にしたひともいるかもしれませんね。
アドセンスの提案のまま、設定すると…
ウェブサイトの高速表示は、ユーザーの利益になります。
グーグルアドセンスが、「これを実施したほうがいいですよ」とすすめるのも納得です。
実際、ワードプレスの場合は、プラグイン導入だけで実装できるため、深く考えず入れてしまうひともいるでしょう（ぼくがそうでした）。
でもAMP設定したあと放置すると、AMPページ（スマホのページ）にアドセンスとアナリティクスが効かなくなってしまいます。
つまり、
- AMPページにアドセンス広告が表示されない
- AMPページがアナリティクスでカウントされない
と、運営者にとって不都合なことになるのです。
AMPプラグインのグーグルアドセンスとアナリティクスの設置方法
ではどうすればよいのか。
ここから、対応方法を書いていきます。
グーグルアドセンスの設置方法
まずはグーグルアドセンスをAMPページに表示させる方法から。
アドセンス広告のコードをブログに貼り付けていると思いますが、AMPページに表示させるには、AMP用のコードを新たに貼り付けなければなりません。
アドセンスの広告ユニットのうちAMP対応は、ディスプレイ広告と関連コンテンツの2つです。
右上に、カミナリマークがついていますね。
ディスプレイ広告の貼り方
まずはAMP用のコードを発行します。
ディスプレイ広告のバナーをクリックして、次の画面に移ります。
左上の「広告ユニットの名前を入力」を入力。
右下の「作成」をクリックします。
次の画面で、「AMP」のタブをクリック。
すると2つのコード（ステップ1・ステップ2）が出ます。
ステップ1を、headタグ内に貼り付けます。
ステップ2は、アドセンス広告を表示させたい場所に貼り付けます。
設置できたら、完了ボタンを押します。
AMPページの広告は、ページ下のほうが有効
ここでひとつ、注意点があります。
AMPは表示スピードが速いため、アドセンス広告はページを開いた後に遅れて表示されます。
そのため広告ユニットを上部に設置した場合は、表示前にスクロールされる可能性が高いです。
AMPページのアドセンス広告は、なるべくページの中程〜下部へ貼ったほうが効果的かと思います。
関連コンテンツの貼り方
続いて関連コンテンツのAMPコードの貼り方です。
基本的にはディスプレイ広告と同じです。
関連コンテンツのバナーをクリックして、次の画面へ移ります。
右上の「広告ユニット名」を入力します。
スタイルやサイズを調整後、「保存してコードを取得」をクリック。
次の画面で、「AMP」のタブをクリック。
するとディスプレイ広告と同じように、ステップ1とステップ2の、2つのコードが出ます。
ステップ1は、headタグ内に貼り付けてください。
ディスプレイ広告時にすでに貼り付けた場合は、不要です。
ステップ2は、関連コンテンツを表示させたい場所に貼り付けます。
設置できたら、完了ボタンを押します。
設置後には、AMPページを確認してみる
設置後に、表示を確認してみましょう。
スマホのブラウザを開き、運営しているブログの適当な記事ページのURLの最後に、「/?amp」と書いて表示します。
自分の設置した場所に、広告が表示されていればOKです。
グーグルアナリティクスの設置方法
AMPプラグインから可能
AMPページをグーグルアナリティクスで計測するには、別途アナリティクスのコードを貼り付ける必要があります。
WordPressの左カラムにある、AMPの「Analytics」をクリックします。
表示された画面の、「Add new entry:」の「Type:」に「googleanalytics」と入力。
「ID:」は空欄のままでOKです。
「JSON Configuration:」に下記のコードを貼り付けます。
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}「UA-XXXXX-Y」には、自分のアナリティクスのプロパティIDを入れます。
左下の「Save」をクリックします。
AMPページがアナリティクスに反映されているか確認する
アドセンスと同じように、設置後、表示を確認してみましょう。
スマホのブラウザを開き、普段あまり読まれないページのURLの最後に、「/?amp」と書いて読み込みます。
アナリティクスのリアルタイムのコンテンツに、表示したページのurlが「/?amp」付きでカウントされていれば問題ありません。
ユーザーの利益になる、モバイルの高速化
どのサイトも、現状はモバイルからの流入がほとんどだと思います。
AMPを導入することは、何よりもモバイルで閲覧するユーザーの利益になりますから、積極的に導入したいところです。
しかし導入したからといって、アドセンス広告が表示されなかったり、正確なPVがわからないと困ります。
この記事を参考に、AMP導入後、アドセンスやアナリティクスの設定をしてみてください。
読まれるブログを書くには？
表示速度はもちろん大切ですが、「そもそも読まれるブログとは何だろう」と疑問に持ちます。
PV数の高い記事を振り返って、読まれるブログについて考えてみました。
SPONSORED