Google タグ マネージャーでシングルページ アプリケーションを測定する

このチュートリアルでは、Google タグ マネージャーを使用してシングルページ アプリケーション（SPA）の Google アナリティクスの測定を設定する方法について説明します。Google アナリティクスのプロパティを構成する方法、必要な GTM 変数を有効にする方法、履歴の変更時にトリガーされるタグを作成する方法について説明します。

始める前に

このチュートリアルでは、次のことを前提としています。

ステップ 1: GA4 データ ストリームを準備する

SPA で page_view イベントを手動でトラッキングするには、重複カウントを避けるため、まず GA4 で履歴ベースのページビューを自動的にトラッキングしないように設定する必要があります。

  1. Google アナリティクスを開きます。
  2. [管理] の [データの収集と修正] で、[データ ストリーム] をクリックします。
  3. ウェブデータ ストリームを選択します。
  4. [拡張計測機能] で、設定アイコン をクリックします。
  5. [ページビュー > 詳細設定を表示] で、[ブラウザの履歴イベントに基づくページの変更] をオフにします。
  6. [保存] をクリックします。

ステップ 2: タグ マネージャーで組み込みの履歴変数を有効にする

GTM で履歴ベースのトリガーまたは変数を使用するには、まず組み込みの履歴変数を有効にする必要があります。

  1. Google タグ マネージャーを開きます。
  2. ワークスペースで [変数] に移動します。
  3. [組み込み変数] で [設定] をクリックします。
  4. [履歴] セクションで、次の変数を有効にします。
    • History New URL Fragment
    • History Old URL Fragment
    • History New State
    • History Old State
    • History Source
  5. 構成パネルを閉じます。

ステップ 3: 履歴の変更トリガーを作成する

次に、SPA で履歴の変更イベント（pushState や replaceState など）が発生するたびに起動するトリガーを作成します。

  1. タグ マネージャーのワークスペースで、[トリガー] メニューに移動します。
  2. [新規] をクリックします。
  3. [**トリガーの設定**] で、[**履歴の変更**] トリガーを選択します。
  4. （省略可）特定の画面の変更のみをトラッキングする場合は、[一部の履歴の変更] でトリガーが起動するように更新します。
  5. トリガーに名前（「履歴の変更」など）を付けて、[保存] をクリックします。

ステップ 4: Google タグを作成する

次に、履歴が変更されるたびに page_location パラメータを更新する Google タグを作成します。

  1. [タグ] メニューで [新規] をクリックします。
  2. [タグの設定] で、[Google タグ] を選択します。
  3. タグ ID （最初の Google タグで使用した ID と同じ）を入力します。

  4. [設定] で次のパラメータを追加します。

    • page_location: {{Page URL}}
    • page_title: {{Page Title}}
    • update: true

  5. タグに名前（「Google タグ - SPA の更新」など）を付けて、[保存] をクリックします。

ステップ 5: 仮想 page_view イベントを送信する

最後に、仮想ページが読み込まれるたびに実際の page_view イベントを送信する GA4 イベントタグを作成します。

  1. [タグ] メニューで [新規] をクリックします。
  2. [タグの設定] で、[Google アナリティクス: GA4 イベント] を選択します。
  3. 測定 ID を入力します。
  4. イベント名 を page_view に設定します。
  5. [詳細設定 > タグの順序付け] で、[GA4 イベント - 仮想ページビューが起動する前にタグを起動する] を選択し、ステップ 4 で作成した [Google タグ - SPA の更新] タグを選択します。
  6. [トリガー] で、ステップ 3 で作成した [履歴の変更] トリガーを選択します。
  7. タグに名前（「GA4 イベント - 仮想ページビュー」など）を付けて、[保存] をクリックします。

ステップ 6: 設定を確認する

仮想ページビューが正しく記録されていることを確認するには:

  1. タグ マネージャーで [プレビュー] をクリックして、プレビュー モードにします。
  2. SPA を操作します。
  3. Google アナリティクス DebugView で、画面が切り替わるたびに新しい page_view イベントが表示されることを確認します。
  4. page_location の値が想定どおりであることを確認します。
前へ
シングルページ アプリケーション（SPA）を測定する
次へ
購入イベントを設定する