このガイドでは、Googleタグマネージャー (GTM) のセットアップ方法と、DiscourseサイトでのGoogle Analytics (GA) との連携方法について説明します。さらに、ページビューを追跡するためにGTMで変数、トリガー、タグを設定する方法についても説明します。
このガイドはGoogleタグマネージャーの設定を対象としています。サイトでGoogle Analyticsを有効にするだけでよい場合は、サイト設定の ga universal tracking code にGタグを設定してください。当サイトの設定では、すべての分析を universal と呼んでいる場合がありますが、これはレガシーなフィールド名の名残です。以下の手順では、Googleタグに対応しており、機能します。
必要なユーザーレベル: 管理者
Googleタグマネージャー (GTM) とGoogle Analytics (GA) を統合することで、Discourseサイト上のイベントを効果的に管理および追跡できます。このガイドでは、GAアカウントの作成から、必要なタグとトリガーを使用したGTMの設定まで、完全なセットアッププロセスを網羅しています。
概要
- Google Analyticsアカウントとプロパティを作成します。
- Googleタグマネージャーを設定します。
- GTMの変数、トリガー、タグを設定します。
- GTMをDiscourseサイトと統合します。
Google Analyticsアカウントの作成
-
Google Analytics にアクセスし、Googleアカウントでサインインします。
-
まだアカウントをお持ちでない場合は、案内に従って作成してください。
-
「管理」をクリックし、次に「プロパティを作成」をクリックしてプロパティを作成します。
-
「プロパティの作成」画面で、必要な詳細情報を入力します。
-
次の画面でビジネスの詳細を入力します。
-
ビジネスの目標を適切に選択します。
情報: 4つのセクションを選択すると、Analyticsが通常提供してきたレポートに最も近くなります。
-
データ収集のプラットフォームとして「ウェブ」を選択します。
-
サイトのURLとストリーム名を入力して、データストリームを設定します。
ウェブストリームの作成に成功したら、測定IDを控えておいてください。これはGTMの設定で必要になります。
Googleタグマネージャーの設定
- Google Tag Manager にアクセスし、アカウントを作成します。
- コンテナを作成する際、案内に従って進め、「ウェブ」をプラットフォームとして選択します。
GTMの設定
変数
- GTMの「変数」タブに移動し、「ユーザー定義変数」セクションの「新規」をクリックします。
- 2つのデータレイヤー変数を作成します。
例として、変数タイプを選択します。
次に、この例のように変数を設定します。
トリガー
-
「トリガー」タブに移動し、「新規」をクリックします。
-
タイプとして「カスタムイベント」を選択します。
-
トリガーに virtualPageView という名前を付け、「保存」します。
最終的な結果は次のようになります。
タグ
-
「タグ」タブに移動し、新しいタグを作成します。
-
タグタイプとして Google Analytics: Google Tag を選択します。
-
タグを次の詳細で設定します。
- 測定 ID: GAから取得した測定IDを入力します。
- 設定が必要なフィールド:
title: {{DL-page-title}}page: {{DL-page-url}}send_page_view: truepage_path: {{Page Path}}
完了すると、次のようになります（上記のパラメーターに加えて userID パラメーターを追加することもできますが、その場合は DL-page-url のような追加の変数が必要になります）。
- このタグに
virtualPageView トリガーを選択します。
- タグに名前を付けて「保存」します。
GTMワークスペースの公開
ページ右上の青い「送信」ボタンをクリックして、GTMコンテナを公開します。
重要: googletagmanager.com から404エラーが発生する場合は、GTMコンテナの変更が公開されていることを確認してください。
GTMとDiscourseの統合
- Discourse管理設定に移動し、
gtm container id を検索します。
- 対応するフィールドにGTMコンテナID（形式:
GTM-XXXXXX）を入力します。
注記: Discourseの ga universal tracking code および ga tracking code 設定から、既存の分析トラッキングコードをすべて削除してください。
サイトをリロードし、GAのリアルタイムコンテンツビューで、データがGTM経由で流れていることを確認します。
その他の用途
GTMを使用すると、次のような追加のイベントを追跡するためにタグを追加できます。
関連リンク
「いいね！」 47
指摘したように、GA4設定タグは削除され、代わりにGoogleタグを選択するようになります。設定手順は同じですが、ドキュメントを更新しました。
以前にGA4タグを設定したことがある場合は、自動的に更新されているはずですので、お客様側での変更は不要です。
言及する価値があるのは、現在の GA4/GTM のベストプラクティスの観点から、これは最適な設定ではなく、トリガーセクションのステップ #2 は間違っているようです。
ページビュー トリガーの代わりに、virtualPageView という名前のカスタム イベント トリガーにする必要があります。
cookieDomain = auto はユニバーサル アナリティクスからの持ち越しであり、不要です。GA4 はサブドメインのナビゲーションを自動的に処理します。
別のベスト プラクティスは、Google タグを初期化時にファイアさせ、send_page_view を false に設定し、代わりに page_view 用の個別の GA4 イベント タグを持つことです。
実装時に、サイトの完全な URL + 仮想ページ パスで page_location のオーバーライドも追加しました。これにより、標準の GA4 レポートが正しく入力されます。
「いいね！」 1
ステファン様
ノートをありがとうございます。
すでに一致するスクリーンショットがあったため、「トリガー」セクションのステップ#2を更新しました。残りの部分もできるだけ早く更新します。
「いいね！」 2
luigi7up
(Luka)
99
説明:
DiscourseフォーラムでGoogle Tag Manager (GTM) に関する問題が発生しています。セットアップと問題の詳細を以下に説明します。
-
GTMのセットアップ:
- Google Tag Managerコンテナ（ID: GTM-…MZV）を設定しました。
- テスト目的で、GTMにGoogle Analytics 4タグを追加し、初期化時にすべてのページで発火するように設定しました。
- 複雑なトリガー、ユーザーレイヤー、データレイヤーは追加していません。GTMが機能していることを確認するための基本的な設定です。
-
DiscourseとのGTM連携:
- Discourseフォーラムでは、管理者設定にコンテナID（GTM-W…MZV）を入力してGTMを設定しました。
- ウェブサイトを検査すると、以下のことが確認できます。
-
問題:
- 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のセットアップを検出しない理由を理解するのを手伝っていただけますか？セットアップまたは連携プロセスで何か見落としていることはありますか？
