Integrating Google Tag Manager with Google Analytics

[Discourse]

This guide will help you set up Google Tag Manager and use it with Google Analytics on your Discourse site. Additionally, it covers configuring variables, triggers, and tags in Google Tag Manager to track page views.

This guide covers setting up Google Tag Manager. If you only want to enable Google Analytics for your site, set the G-Tag in the ga universal tracking code site setting. Our settings may still refer to all analytics as universal, but this is a legacy field naming artifact. The following instructions use, and work for, Google Tags.

Required user level: Administrator

Integrating Google Tag Manager (GTM) with Google Analytics (GA) allows you to manage and track events on your Discourse site effectively. This guide covers the full setup process, from creating a GA account to configuring GTM with the necessary tags and triggers.

Summary

1. Create a Google Analytics account and property.
2. Set up Google Tag Manager.
3. Configure GTM variables, triggers, and tags.
4. Integrate GTM with your Discourse site.

Create a Google Analytics account

1. Visit Google Analytics and sign in with your Google account.

2. If you don’t have an account yet, follow the guided steps to create one.

3. Create a property by clicking on “Admin” and then “Create Property”.
   

   

4. Fill in the required details on the “Property creation” screen.
   

   

5. Enter your business details on the next screen.
   

   

6. Select your business objectives appropriately.

Info: Selecting the four sections will most closely match the reports Analytics has typically provided:

7. Choose “Web” as the platform for data collection.

8. Set up a data stream by entering your site’s URL and a stream name.
   
   

After successfully creating your web stream, make a note of your Measurement ID. You’ll need this for GTM setup.

Set up Google Tag Manager

1. Visit Google Tag Manager and create an account.
2. Set up a container by following the guided steps, and choose “Web” as the platform.
   
   

Configure GTM

Variables

1. Go to the “Variables” tab in GTM and click “New” in the User-Defined Variables section.
2. Create two Data Layer Variables:

• Title: DL-page-title
  Type: Data Layer Variable
  Data Layer Variable Name: page.title
  Data Layer Version: 2

• Title: DL-page-url
  Type: Data Layer Variable
  Data Layer Variable Name: page.url
  Data Layer Version: 2

As an example, choose the variable type:

Then configure the variables, as in this example:

Triggers

1. Go to the “Triggers” tab and click “New”.

2. Choose “Custom Event” as the type.

   

3. Name the trigger virtualPageView and Save it.

   The end result should look like this:
   

   

Tags

1. Go to the “Tags” tab and create a new tag.

2. Choose Google Analytics: Google Tag as the tag type.
   

   

3. Configure the tag with the following details:

• Measurement ID: Enter your Measurement ID from GA.
• Required Fields to Set:
  • title: {{DL-page-title}}
  • page: {{DL-page-url}}
  • send_page_view: true
  • page_path: {{Page Path}}

When finished it should look like this (note that you can add a userID parameter in addition to the parameters above, but you will need to add an additional variable like DL-page-url.):

4. Choose the virtualPageView trigger for this tag.
   
   
5. Name your tag and Save it.

Publish your GTM workspace

Publish your container in GTM by clicking the blue “Submit” button in the upper-right corner of the page.

Important: If you encounter 404 errors from googletagmanager.com, ensure your GTM container changes have been published.

Integrate GTM with Discourse

1. Go to your Discourse Admin settings and search for gtm container id.
2. Enter your GTM Container ID (format: GTM-XXXXXX) in the corresponding field.
   
   

Note: Remove any existing Analytics tracking code from the ga universal tracking code and ga tracking code settings in Discourse.

Reload your site and check the Real-Time content view in GA to confirm that data is flowing through GTM.

Additional Uses

With GTM, you can add more tags to track additional events such as:

• Google DFP
• AdWords
• LinkedIn

Related Links

• Using nonces in Google Tag Manager scripts
• Push custom events to Google Tag Manager and Analytics
• How to add Google Auto Ads to Discourse via Google Tag Manager

Last edited by @jessii 2024-08-03T01:04:37Z

Check document

Perform check on document:

[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のセットアップを検出しない理由を理解するのを手伝っていただけますか？セットアップまたは連携プロセスで何か見落としていることはありますか？