将Google Tag Manager与Google Analytics集成

:bookmark: 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.

:information_source: 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.

:person_raising_hand: 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.

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


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

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

:information_source: 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.):

  1. Choose the virtualPageView trigger for this tag.
  2. 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.

:warning: 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.

:warning: 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:

Related Links

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

Check documentPerform check on document:
46 个赞

如前所述,GA4 配置代码已移除,现在您将选择 Google 代码。设置步骤保持不变,但我已更新了文档。

对于之前设置过 GA4 代码的任何人,它应该已自动更新,无需您进行任何更改。

值得一提的是,就当前的 GA4/GTM 最佳实践而言,这不是一个理想的设置,并且“触发器”部分中的步骤 #2 似乎不正确。

应该使用名为 virtualPageView 的自定义事件触发器,而不是页面浏览触发器。

cookieDomain = auto 似乎是通用分析 (Universal Analytics) 的遗留设置,并非必需。GA4 会自动处理子域导航。

另一个最佳实践是让 Google Tag 在初始化时触发,将 send_page_view 设置为 false,而是为 page_view 设置单独的 GA4 事件代码。

在实施时,我们还为 page_location 添加了一个覆盖,使用网站的完整 URL + 虚拟页面路径。这将正确填充标准的 GA4 报告。

1 个赞

您好 Stefan,

感谢您的笔记。

我已经更新了“触发器”部分中的第 2 步,因为我已经有了匹配的屏幕截图,我们将尽快更新其余部分。

2 个赞

描述

我在 Discourse 论坛上遇到了 Google Tag Manager (GTM) 的一个问题。让我详细解释我的设置和问题:

  1. GTM 设置

    • 我已设置了一个 Google Tag Manager 容器(ID:GTM-…MZV)。
    • 出于测试目的,我在 GTM 中添加了一个Google Analytics 4 标签,配置为在初始化期间在所有页面上触发。
    • 我没有添加任何复杂的触发器、用户层或数据层。这只是一个基本的配置,用于验证 GTM 是否正常工作。
  2. GTM 与 Discourse 的集成

    • 在我的 Discourse 论坛中,我在管理员设置中输入了容器 ID (GTM-W…MZV) 来配置 GTM。
    • 当我检查我的网站时,我可以看到:
  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 在网络选项卡中加载。
  • 检查浏览器控制台是否有任何内容安全策略 (CSP) 或其他 JavaScript 错误。
  • 清除我的网站和浏览器的缓存,以确保没有缓存问题。
  • 重新发布 GTM 容器,以确保其已更新。

请求

有人能帮我弄清楚为什么 GTM 预览模式无法检测到我的 GTM 设置,尽管 gtm.js 脚本正在正确加载吗?在设置或集成过程中,我是否遗漏了什么?