020 AMPのトラッキング

AMPには通常とは異なるコードやコンテナを挿入する

AMPでは、いくつかのルールに基づいて表示速度の向上を実現していますが、そのルールの1つに「JavaScriptの制限」が挙げられます。AMPの仕様に沿ったJavaScriptだけが許容されるため、通常のサイトのHTMLソースに挿入されているJavaScriptの多くは動作しません。

そのため、GoogleアナリティクスでAMPの利用状況を計測する観点でも、通常とは異なる導入が必要になってきます。トラッキングコードをHTMLソースに直接挿入する方法と、Googleタグマネージャを利用する方法のそれぞれについて、以下で解説します。

AMP向けのトラッキングコードをHTMLソースに挿入する

AMPの仕様には、AMPにおけるサイト利用状況を計測するための「amp-analytics」要素が含まれています。これを呼び出すためのコードを、すべてのAMP対応ページのHTMLソースに挿入しましょう。コードはGoogleアナリティクスの開発者向けヘルプにも記載されています。

<head>タグ内に挿入するコード

  

1:<head>タグ内のコードと同じコンテナIDが記述されている

<body>タグ内に挿入するコード




5:「UA-」から始まる部分を自社サイトのトラッキングIDに修正する

AMPページにアナリティクスを追加する

AMP向けのコンテナをGoogleタグマネージャで作成する

AMPにおける計測をGoogleタグマネージャ経由で行う場合、通常のサイトとは別に、AMP向けのコンテナを作成します。コンテナスニペットも別になるため、AMP対応ページのHTMLソースに忘れずに挿入してください。その後、ワザ017018を参考に、作成したコンテナにGoogleアナリティクスのタグを作成・公開します。

1コンテナの一覧を表示する

AMPには通常とは異なるコードやコンテナを挿入する - できる逆引き Googleアナリティクス 増補改訂2版

2新しいコンテナを作成する

AMPには通常とは異なるコードやコンテナを挿入する - できる逆引き Googleアナリティクス 増補改訂2版

3コンテナの設定をする

AMPには通常とは異なるコードやコンテナを挿入する - できる逆引き Googleアナリティクス 増補改訂2版

4コンテナスニペットをコピーする

AMPには通常とは異なるコードやコンテナを挿入する - できる逆引き Googleアナリティクス 増補改訂2版

5コンテナにタグを追加する

AMPには通常とは異なるコードやコンテナを挿入する - できる逆引き Googleアナリティクス 増補改訂2版

ポイント

  • 自社サイトのAMP対応には、AMPの仕様に則った形で既存のページを出力できるようにするなど、大規模な開発が伴います。サイト制作会社や社内のシステム部門の協力を得ることになるので、トラッキングコードの挿入も同時に依頼しておくとスムーズです。
  • Googleタグマネージャ経由で挿入した場合、AMPの「ページビュー」だけでなく「スクロール」や「タイマー」などをトリガーとして、トラッキングビーコンを送信することもできます。
  • Googleアナリティクスのヘルプでは、通常のサイトとAMPでプロパティを分けることが推奨されています。この方法に従うには、あらかじめワザ069を参考に新しいプロパティを作成し、そのプロパティIDをAMPのコードやタグに入力する必要があります。

AMPは新しい技術なので、仕様のアップデートがよく行われます。Googleが発表するAMP関連のニュースをウォッチするようにしましょう。