AMPプラグイン導入の際の、グーグルアドセンスとアナリティクスの設置方法

ワードプレスでブログ運営していると、グーグルアドセンス(Google AdSense)から「AMPを導入しましょう」と提案されるケースがあります。

提案のままAMPプラグインを入れた場合、そのままでいるとAMPページのグーグルアドセンスとグーグルアナリティクスが無効になります

この記事では、ワードプレスでAMPを導入した際の、アドセンスとアナリティクスの設置方法をご紹介します。

SPONSORED

AMPとは何か

モバイルページを高速表示

そもそもAMPとは何か。
モバイル表示の際、htmlやJava Scriptの制限、独自キャッシュの読み込みなどで、ページを高速表示する仕組みです。
開発したのは、グーグルです。

AMPで構築したページは、モバイルの検索結果に「⚡(カミナリマーク)」が表示されます。
普段、モバイル検索で、このマークを目にしたひともいるかもしれませんね。

AMP

アドセンスの提案のまま、設定すると

ページ高速表示は、ユーザーの利益になります。
グーグルアドセンスが、「これを実施したほうがいいですよ」とすすめるのも納得です。

実際、ワードプレスの場合は、下記のプラグイン導入だけで実装できるため、深く考えず入れてしまうひともいるでしょう(ぼくがそうでした)。

AMP

でもAMP設定したあと放置すると、AMPページにアドセンスとアナリティクスが効かなくなってしまいます。

つまり、

・AMPページにアドセンス広告が表示されない
・AMPページがアナリティクスでカウントされない

と、運営者にとって不都合なことになるのです。

AMPプラグイン導入の際の、アドセンスとアナリティクスの設置方法

ではどうすればよいのか。
ここから、対応方法を書いていきます。

グーグルアドセンスの設置方法

アドセンスの広告ユニットのうちAMP対応は、ディスプレイ広告と関連コンテンツの2つです。

AMPアドセンス

右上に、カミナリマークがついていますね。

ディスプレイ広告の貼り方

バナーをクリックして、次の画面に移ります。

左上の「広告ユニットの名前を入力」を入力。
右下の「作成」をクリックします。

AMPアドセンス

次の画面で、「AMP」のタブをクリック。
するとステップ1とステップ2の、2つのコードが出ます。

ステップ1は、headタグ内に貼り付けてください。
ステップ2は、アドセンス広告を表示させたい場所に貼り付けます。
設置できたら、完了ボタンを押します。

通常のアドセンス広告と同じように、設置数に上限はありません。

ひとつ注意点があります。

AMPは表示スピードが速いため、アドセンス広告は遅れて画面に現れます。
そのため広告ユニットを上部に設置した場合は、表示前にスクロールされる可能性が高いです。

なるべく、ページの中程〜下部へ貼ったほうが効果的かと思います。

関連コンテンツの貼り方

バナーをクリックして、次の画面へ移ります。

右上の「広告ユニット名」を入力します。
スタイルやサイズを調整後、「保存してコードを取得」をクリック。

AMPアドセンス

次の画面で、「AMP」のタブをクリック。
するとステップ1とステップ2の、2つのコードが出ます。

ステップ1は、headタグ内に貼り付けてください。
ディスプレイ広告時にすでに貼り付けた場合は、不要です。
ステップ2は、関連コンテンツを表示させたい場所に貼り付けます。

設置できたら、完了ボタンを押します。

確認してみましょう

設置後に、表示を確認してみましょう。

スマホのブラウザを開き、運営しているブログの適当な記事ページのURLの最後に、「/?amp」と書いて表示します。
自分の設置した場所に、広告が表示されていればOKです。

グーグルアナリティクスの設置方法

AMPプラグインから可能

AMPページをグーグルアナリティクスで計測するには、別途コードを貼り付ける必要があります。

インストールしたプラグインAMPの、「Analytics」をクリックします。

AMPアナリティクス

「Add new entry:」の「Type:」に「googleanalytics」と入力。
「ID:」は空欄のままでOKです。

AMPアナリティクス

「JSON Configuration:」に下記のコードを貼り付けます。

{
    "vars": {
        "account": "UA-XXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

「UA-XXXXX-Y」には、自分のアナリティクスのプロパティIDを入れます。

「Save」をクリックし、保存すればOKです。

確認してみましょう

アドセンスと同じように、設置後、表示を確認してみましょう。

スマホのブラウザを開き、普段あまり読まれないページのURLの最後に、「/?amp」と書いて読み込みます。

アナリティクスのリアルタイムのコンテンツに、表示したページのurlが「/?amp」付きでカウントされていれば問題ありません。

ユーザーの利益になる、モバイルの高速化

どのサイトも、現状はモバイルからの流入がほとんどだと思います。

AMPを導入することは、何よりもモバイルで閲覧するユーザーの利益になりますから、積極的に導入したいところです。

でも導入したからといって、アドセンス広告が表示されなかったり、正確なPVがわからないと困るひとも多いかと思います。
この記事を参考に、AMP導入後もアドセンスやアナリティクスの設定をしていきましょう。

SPONSORED

Hasselblad 500C/Mで、写真を撮っています。