AMP 用に Google アナリティクス セッション統合の初期設定を行う

この記事の内容:

AMP ページは AMP キャッシュ ドメインから配信されるため、サイト本体とはドメインが異なります。AMP リンカーを使用すれば、AMP キャッシュとサイト内のページを行き来するユーザー ジャーニーをトラッキングすることができます。AMP リンカーは amp-analytics の機能で、AMP クライアント ID をユーザー識別子としてユーザー セッションの統合を行うものです。

AMP リンカーは、AMP キャッシュ ページからのアウトバウンド リンクに AMP クライアント ID を追加する仕組みです。リンクを経由して、Google アナリティクスのタグを設定されたページにアクセスすると、ページが URL クエリ パラメータから AMP クライアント ID を読み取り、その ID をユーザー識別子としてユーザー セッションの結合を行います。

この記事では、Google アナリティクスで AMP リンカーの初期設定を行う手順を解説します。

AMP のクライアント ID がデータに及ぼす影響

AMP キャッシュとサイト本体のドメインとの間で AMP クライアント ID を同期することにより、各種ユーザー関連指標(例: セッション継続時間、直帰率、セッションあたりの閲覧ページ数)の精度を高めることができます。なお、AMP クライアント ID を有効に利用するには、データ収集を同一の Google アナリティクス プロパティで行う必要があります。

注: AMP キャッシュとサイト本体との間で AMP クライアント ID を同期すると、既存の Google アナリティクス ユーザー識別子(コホート分析、ライフタイム バリュー、オーディエンス ターゲティングなどの機能に使用)が一度リセットされます。これにより、新規ユーザーに関する指標や関連レポートのデータが、一時的に大きく変動する可能性があります。

AMP リンカーの初期設定

Google アナリティクスにおける AMP リンカーの初期設定は、3 つのステップに分かれています。

  1. AMP ページのタグ設定
  2. 非 AMP ページのタグ設定
  3. 参照元除外の設定

ステップ 1: AMP ページのタグ設定(URL に AMP リンカー パラメータを追加するよう設定)

グローバル サイトタグまたは Google タグ マネージャーを使って、Google アナリティクスのタグを設置します。手順はそれぞれ下記のとおりです。

方法 1: グローバル サイトタグを使用

AMP 版のランディング ページに、AMP のグローバル サイトタグを追加します。下記のコード例を基本に、次のとおり変更を加えて使用してください。

MEASUREMENT_ID は、データの送信先にする Google アナリティクス プロパティのトラッキング ID に置き換えます。

必要に応じて、AMP ページがサイトへの送信リンクと異なるドメインでホストされている場合は、次のようにリンカーの設定を含めます。AMP ページがホストされているドメインのほか、送信リンクのドメインを追加します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars": {
    "gtag_id": "MEASUREMENT_ID",
    "linker": {
      "domains": ["example.com", "example2.com"]
    }
    ,
    "config": {
      "MEASUREMENT_ID": {
        "groups": "default"
      }
    }
  }
}
</script>
</amp-analytics>
注: gtag_id には、AMP ページで使用している Google のサービス(例: Google 広告、検索広告 360 など)の ID を 1 つだけ指定します。使用しているサービスが複数ある場合、どれを選んでも問題ありません。

方法 2: Google タグ マネージャーを使用

Google タグ マネージャーで AMP コンテナを作成します。

作成した AMP コンテナに Google アナリティクスのタグを追加します。

同じ AMP コンテナにコンバージョン リンカーを追加し、[ドメイン間でのリンクの有効化] と [Google アナリティクスのクライアント ID へのリンクの有効化] を選択します。AMP ランディング ページがホストされているドメイン / サブドメインと、サイト本体(非 AMP)へのリンクのドメイン / サブドメインが同一の場合、ドメイン欄は空欄でかまいません。

AMP ページがホストされているドメイン / サブドメインが、サイト本体(非 AMP)へのリンクのドメイン / サブドメインと異なる場合は、両方のドメイン(使用しているものすべて)をカンマ区切りで列挙して追加します。ドメインの正式名に「www.」が含まれる場合、設定コードにも正確に反映します。

 

AMP ページに、タグ マネージャーのデフォルトのコードを使用します。下記のコード例を基本に、GTM_CONTAINER_ID は実際のタグ マネージャーのコンテナ ID に置き換えて使用してください。

<!-- Google Tag Manager →
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=<   GTM_CONTAINER_ID>&gtm.url=SOURCE_URL" data-credentials="include">
</amp-analytics>

ステップ 2: 非 AMP ページのタグ設定(AMP リンカー パラメータを読み取るよう設定)

AMP リンカー パラメータを読み取るために非 AMP ページにタグを付ける方法はいくつかあります。ご使用の構成に合った方法をお選びください。

方法 1: グローバル サイトタグを使用

非 AMP ページに gtag.js グローバル スニペットを組み込みます。下記のコード例をご覧ください。

  • MEASUREMENT_ID は、データの送信先にする Google アナリティクス プロパティのトラッキング ID に置き換えます。
  • AMP ページがホストされているドメイン / サブドメインが、サイト本体(非 AMP)へのリンクのドメイン / サブドメインと異なる場合は、下記のようにリンカーの設定をコードに組み込みます。AMP ページがホストされているドメインと、サイト本体へのリンクのドメインをすべて列挙してください。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('set', 'linker', {
    'domains': ['amp.example.com', 'www.example.com, www.example-b.com']
  });
&nbsp; gtag('js', new Date());
  gtag('config', 'MEASUREMENT_ID');
</script>

方法 2: Google タグ マネージャーを使用

GTM ウェブコンテナについて、Google アナリティクスのタグが追加されていることを確認します。

AMP ページがサイトへの送信リンクと異なるドメインやサブドメインでホストされている場合は、次の設定を追加します。Google Analytics タグで、[allowLinker] 欄を追加して値を true に設定します。手順は次のとおりです。

  1. 編集する「Google アナリティクス設定」変数を開いて、[変数の設定] カードをクリックします。
  2. [詳細設定] > [設定するフィールド] に移動します。
  3. [+ フィールド] をクリックします。
  4. [フィールド名] を「allowLinker」に、[] を「true」に設定します。
  5. 新しい変数設定を保存します。
  6. 該当するすべての Google アナリティクス設定変数について、前述の手順を繰り返します(コンテナで複数の変数を使用している場合)。
  7. コンテナを公開します。

非 AMP ページに、タグ マネージャーのデフォルトのコードを使用します。

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=<GTM_CONTAINER_ID>&gtm.url=SOURCE_URL" data-credentials="include">
</amp-analytics>

方法 3: analytics.js を使用

非 AMP ページで、デフォルトの analytics.js コードを使って、AMP リンカー パラメータを読み取るよう設定します。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

AMP ページがホストされているドメイン / サブドメインが、サイト本体(非 AMP)へのリンクのドメイン / サブドメインと異なる場合は、下のコード例のハイライト箇所を追加します。詳しくは、analytics.js のクロスドメイン設定の解説を参照してください。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'GA_TRACKING_ID', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['amp.example.com', 'www.example.com', 'www.example-b.com'] );

ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

ステップ 3: Google アナリティクスの管理コンソールに参照元除外の設定を追加

Google は AMP コンテンツをユーザーに表示する際、Google AMP キャッシュを使用します。ユーザーがキャッシュされた AMP サブドメインのページを経由してもセッションが分断されないよう、ドメイン「cdn.ampproject.org」を参照元除外のリストに追加しておく必要があります。

複数のサブドメインから AMP ページを配信する場合は、AMP サブドメインの扱い方をサブドメインごとに変えることをおすすめします。ウェブサイトの参照の除外で指定されている既存のサブドメインのキャッシュ バージョンを入力すると、AMP サイトと非 AMP サイトをまたいで特定の参照を除外することができます。たとえば、subdomain.example.com に対して参照の除外を設定している場合、subdomain-example-com.cdn.ampproject.org にも参照の除外を追加します。AMP キャッシュ URL の形式の詳細

設定の確認

AMP ページと非 AMP ページとで Google AMP のクライアント ID が一致していることを確認します。

方法 1: Chrome 拡張機能「Google Tag Assistant」で確認する

  1. Chrome 拡張機能「Google Tag Assistant」をダウンロードしてインストールします。
  2. Google 検索で、サイトの AMP ページを返す検索クエリを入力します。
  3. Tag Assistant Recordings を開始します。
  4. 記録を開始後、ブラウザで検索結果を更新(再読み込み)します。
  5. 検索結果をクリックして、サイトの AMP ページに移動します。
  6. AMP ページで、サイト本体(非 AMP)のページに移動するリンクをクリックします。
  7. Tag Assistant Recordings を停止します。
  8. 下の図のように、セッションが 1 つだけであり、ID が一貫していることを確認します(Page load 2 には Session Start の表示がないことに注目しましょう)。

 

方法 2: Chrome Developer Tools で確認する

  1. Google Chrome ブラウザをシークレット モードで開きます。Chrome Developer Toolsモバイル デバイス エミュレータを有効化します。
  2. Google 検索で、サイトの AMP ページを返す検索クエリを入力し、検索結果をクリックして AMP ページに移動します。AMP ページは、Google AMP キャッシュを通して、Google 検索 AMP ビューア内に表示されます。
    • 注: Google 検索結果で目的のページを表示しにくい場合も、セッション統合の動作テストは可能です。ページが Google のインデックスに登録されてさえいれば、AMP テスト ツールを使って検索結果のプレビューを表示し、下記の手順で確認を行うことができます。
  3. AMP ページビューの Google アナリティクス ネットワーク リクエストを見つけます。Chrome Developer Tools の [Network] タブで、[Filter] 欄に「collect」と入力します。
  4. www.google-analytics.com に送信されるネットワーク リクエストを見つけ、選択します。リクエストの [Headers] タブで [Query String Parameters] までスクロールし、クライアント ID を探します。cid パラメータを確認しましょう。
  5. AMP ページが AMP ビューアを通して表示された場合、cid は 64 文字の base64 文字列になります。
  6. [消去] をクリックして、ネットワーク リクエストを消去します。
  7. 非 AMP ページ側の設定も正しく完了していれば、AMP ページから非 AMP ページに移動しても、同じ cid パラメータが維持されるはずです。AMP ページで任意のリンクをクリックし、サイト本体のドメインから配信される非 AMP ページに移動してみましょう。クライアント ID を確認するには、再度フィルタ欄に「collect」と入力します。www.google-analytics.com に送信されるネットワーク リクエストを選択します。cid クエリ パラメータの値が、ステップ 5 で確認した値と一致することを確かめます。

制限事項

  • AMP リンカーによるセッション統合は、リンクへの情報追加によって成り立っているため、初めてアクセスしてきたユーザーが別のページまで進むことなく AMP ページを閉じた場合は、セッション統合が行われません。
  • AMP キャッシュ ページのリンク先が、サイト本体のドメインでホストされている別の AMP ページである場合は、現在のところセッション統合ができません。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。