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 タグ(gtag.js)または Google タグ マネージャーのいずれかを使用して、Google アナリティクスのタグを設置します。手順はそれぞれ下記のとおりです。

方法 1: Google タグ

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

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

必要に応じて、AMP ページがサイトへの送信リンクと異なるトップレベル ドメインでホストされている場合、またはよく知られているサブドメイン(www.、amp.、m. など)に 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 ページがサイトへの送信リンクと異なるトップレベル ドメインでホストされている場合、またはよく知られているサブドメイン(www.、amp.、m. など)に AMP ページがない場合は、AMP ページがホストされているトップレベル ドメインと送信リンクのドメインをカンマ区切りで列挙して追加します。

 

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: Google タグ

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

  • MEASUREMENT_ID は、データの送信先にする Google アナリティクス プロパティのトラッキング ID に置き換えます。
  • 必要に応じて、AMP ページがサイトへの送信リンクと異なるトップレベル ドメインでホストされている場合、またはよく知られているサブドメイン(www.、amp.、m. など)に AMP ページがない場合は、次のようにリンカーの設定を含めます。AMP ページがホストされているドメインのほか、送信リンクのドメインを追加します。
<!-- Google tag (gtag.js) -->
<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': ['example.com', 'example2.com']
  });
  gtag('js', new Date());
  gtag('config', 'MEASUREMENT_ID');
</script>

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

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

AMP ページがサイトへの送信リンクと異なるトップレベル ドメインでホストされている場合、またはよく知られているサブドメイン(www.、amp.、m. など)に AMP ページがない場合は、次のように設定を含めます。Google アナリティクス タグで、[allowLinker] 欄を追加して値を true に設定します。手順は次のとおりです。

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

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

方法 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 ページがサイトへの送信リンクと異なるトップレベル ドメインでホストされている場合、またはよく知られているサブドメイン(www.、amp.、m. など)に 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', ['subdomain1.example.com', 'subdomain2.example.com','www.example2.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: AMP タグテストツールで確認する

AMP タグテスト ツールで、テストする AMP URL を入力します。

注: AMP タグ テストツールは、ビューアから配信された AMP ページから次のページへのリンクまでのフローをシミュレートする自動テストツールです。このツールはガイドラインとして使用するべきで、すべてのテスト シナリオを網羅できるとは限りません(AMP ページに異なるドメインやサブドメインへのリンクがある場合など)。手動テストには、以下の方法を使用してください。

方法 2: 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 の表示がないことに注目しましょう)。

 

方法 3: 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 ページを閉じた場合は、セッション統合が行われません。

この情報は役に立ちましたか?

改善できる点がありましたらお聞かせください。
true
独自の学習プログラムを選択する

Google アナリティクス 4 を最大限に活用するための新しいリソースをご確認ください(google.com/analytics/learn)。新しいウェブサイトには、動画、記事、ガイド付きフローが含まれ、Google アナリティクスの Discord、ブログ、YouTube チャンネル、GitHub リポジトリへのリンクも記載されています。

今すぐ学習を始める

検索
検索をクリア
検索を終了
メインメニュー
8277649174233571156
true
ヘルプセンターを検索
true
true
true
true
true
69256
false
false