Google Tag ManagerとGoogle Analyticsの統合

[Discourse]

このガイドでは、Google Tag Manager (GTM) の設定方法と、Discourse サイトでの Google Analytics (GA) との連携方法について説明します。さらに、ページビューをトラッキングするために GTM で変数、トリガー、タグを設定する方法についてもカバーします。

このガイドは GTM の設定について説明します。サイトに Google Analytics を有効にするだけでよい場合は、ga universal tracking code サイト設定で G-Tag を設定してください。当サイトの設定では、すべての分析を依然として universal と参照している場合がありますが、これはレガシーなフィールド名の名残です。以下の手順では、Google Tag を使用し、それらが機能します。

必要なユーザーレベル: 管理者

Google Tag Manager (GTM) と Google Analytics (GA) を統合することで、Discourse サイトでのイベントを効果的に管理およびトラッキングできるようになります。このガイドでは、GA アカウントの作成から、必要なタグとトリガーを使用した GTM の設定まで、完全なセットアッププロセスをカバーします。

概要

1. Google Analytics アカウントとプロパティを作成します。
2. Google Tag Manager を設定します。
3. GTM の変数、トリガー、タグを設定します。
4. GTM を Discourse サイトと統合します。

Google Analytics アカウントの作成

1. Google Analytics にアクセスし、Google アカウントでサインインします。

2. まだアカウントがない場合は、ガイド付きの手順に従って作成します。

3. 「管理」をクリックし、「プロパティを作成」をクリックしてプロパティを作成します。
   

   

4. 「プロパティの作成」画面で必要な詳細情報を入力します。
   

   

5. 次の画面でビジネスの詳細を入力します。
   

   

6. ビジネスの目標を適切に選択します。

情報: 4つのセクションを選択すると、Analytics が通常提供してきたレポートと最も一致します。

7. データ収集のプラットフォームとして「ウェブ」を選択します。
   

   

8. サイトの URL とストリーム名を入力して、データストリームを設定します。
   

   

ウェブストリームの作成が完了したら、測定 ID を控えておきます。これは GTM 設定で必要になります。

Google Tag Manager の設定

1. Google Tag Manager にアクセスし、アカウントを作成します。
2. ガイド付きの手順に従ってコンテナを設定し、プラットフォームとして「ウェブ」を選択します。
   
   

GTM の設定

変数

1. GTM の「変数」タブに移動し、ユーザー定義変数セクションの「新規」をクリックします。
2. 2つのデータレイヤー変数を作成します。

• 名前: DL-page-title
  種類: データレイヤー変数
  データレイヤー変数名: page.title
  データレイヤーバージョン: 2

• 名前: DL-page-url
  種類: データレイヤー変数
  データレイヤー変数名: page.url
  データレイヤーバージョン: 2

例として、変数タイプを選択します。

次に、この例のように変数を設定します。

トリガー

1. 「トリガー」タブに移動し、「新規」をクリックします。

2. 種類として「カスタムイベント」を選択します。

   

3. トリガーを virtualPageView と名付け、「保存」します。

   最終結果は次のようになります。
   

   

タグ

1. 「タグ」タブに移動し、新しいタグを作成します。

2. タグの種類として Google Analytics: Google Tag を選択します。
   

   

3. タグを次の詳細で設定します。

• 測定 ID: GA の測定 ID を入力します。
• 設定が必要なフィールド:
  • title: {{DL-page-title}}
  • page: {{DL-page-url}}
  • send_page_view: true
  • page_path: {{Page Path}}

完了すると、次のようになります（上記のパラメーターに加えて userID パラメーターを追加できますが、その場合は DL-page-url のような追加の変数を作成する必要があります）。

4. このタグのトリガーとして virtualPageView を選択します。
   
   
5. タグに名前を付けて「保存」します。

GTM ワークスペースの公開

ページ右上の青い「送信」ボタンをクリックして、GTM でコンテナを公開します。

重要: googletagmanager.com から 404 エラーが発生する場合は、GTM コンテナの変更が公開されていることを確認してください。

Discourse への GTM の統合

1. Discourse の管理設定に移動し、gtm container id を検索します。
2. 対応するフィールドに GTM コンテナ ID（形式: GTM-XXXXXX）を入力します。
   
   

注意: GTM を使用する場合は、重複トラッキングを避けるため、Discourse の ga universal tracking code 設定から既存の Analytics トラッキングコードを削除してください。

サイトをリロードし、GA のリアルタイムコンテンツビューを確認して、データが GTM を介して流れていることを確認します。

その他の用途

GTM を使用すると、次のような追加のイベントをトラッキングするためにタグを追加できます。

• Google DFP
• AdWords
• LinkedIn

関連リンク

• Google Tag Manager スクリプトで nonce を使用する
• カスタムイベントを Google Tag Manager および Analytics にプッシュする
• Google Tag Manager 経由で Discourse に Google Auto Ads を追加する方法

[MarkDoerr]

指摘したように、GA4設定タグは削除され、代わりにGoogleタグを選択するようになります。設定手順は同じですが、ドキュメントを更新しました。

以前にGA4タグを設定したことがある場合は、自動的に更新されているはずですので、お客様側での変更は不要です。

[Stefan_Holmes]

言及する価値があるのは、現在の GA4/GTM のベストプラクティスの観点から、これは最適な設定ではなく、トリガーセクションのステップ #2 は間違っているようです。

ページビュー トリガーの代わりに、virtualPageView という名前のカスタム イベント トリガーにする必要があります。

cookieDomain = auto はユニバーサル アナリティクスからの持ち越しであり、不要です。GA4 はサブドメインのナビゲーションを自動的に処理します。

別のベスト プラクティスは、Google タグを初期化時にファイアさせ、send_page_view を false に設定し、代わりに page_view 用の個別の GA4 イベント タグを持つことです。

実装時に、サイトの完全な URL + 仮想ページ パスで page_location のオーバーライドも追加しました。これにより、標準の GA4 レポートが正しく入力されます。

[MarkDoerr]

ステファン様

ノートをありがとうございます。

すでに一致するスクリーンショットがあったため、「トリガー」セクションのステップ#2を更新しました。残りの部分もできるだけ早く更新します。

[luigi7up (Luka)]

説明:

DiscourseフォーラムでGoogle Tag Manager (GTM) に関する問題が発生しています。セットアップと問題の詳細を以下に説明します。

1. GTMのセットアップ:

   • Google Tag Managerコンテナ（ID: GTM-…MZV）を設定しました。
   • テスト目的で、GTMにGoogle Analytics 4タグを追加し、初期化時にすべてのページで発火するように設定しました。
   • 複雑なトリガー、ユーザーレイヤー、データレイヤーは追加していません。GTMが機能していることを確認するための基本的な設定です。

2. DiscourseとのGTM連携:

   • Discourseフォーラムでは、管理者設定にコンテナID（GTM-W…MZV）を入力してGTMを設定しました。
   • ウェブサイトを検査すると、以下のことが確認できます。
     • GTMスクリプト（https://www.googletagmanager.com/gtm.js?id=GTM-W...MZV）が`head`セクションに読み込まれています。
     • GTMまたはgtm.jsに関連するエラーは、ブラウザコンソールまたはネットワークタブには表示されません。

3. 問題:

   • GTMコンテナを公開した後、Google Tag Managerのプレビューモードに移動し、ウェブサイトのURL（https://forum.hobiguru.com）を入力しました。
   • しかし、GTMプレビューデバッガーは、私のサイトでGTMタグが見つからないと表示されます。
   • gtm.jsは読み込まれ、目に見えるエラーがないにもかかわらず、デバッガーはGTMのセットアップを認識していません。

スクリーンショット:

• スクリーンショット1: Google Tag ManagerでのGTMコンテナ設定（GA4タグとトリガーを表示）。
• スクリーンショット2: Discourse管理者設定で、GTMコンテナID（GTM-W…MZV）が設定されていることを表示。
• スクリーンショット3: ブラウザの開発者ツールで、gtm.jsライブラリがウェブサイトに正常に読み込まれていることを表示。
• スクリーンショット4: GTMプレビューモードで、エラーメッセージ「ウェブサイトにGTMタグが見つかりません」を表示。

試したこと:

• ネットワークタブでgtm.jsが読み込まれていることを確認しました。
• ブラウザコンソールで、Content Security Policy (CSP) またはその他のJavaScriptエラーがないか確認しました。
• キャッシュの問題がないことを確認するために、サイトとブラウザのキャッシュをクリアしました。
• GTMコンテナを再公開して、更新されていることを確認しました。

依頼:

gtm.jsスクリプトは正しく読み込まれているにもかかわらず、GTMプレビューモードがGTMのセットアップを検出しない理由を理解するのを手伝っていただけますか？セットアップまたは連携プロセスで何か見落としていることはありますか？