如何给网站添加Google Tag Manager

如何为网站添加Google Tag Manager

本文提供了关于如何设置 Google Tag Manager 和 Google Analytics 的全面指南,帮助您在 Framer 网站上追踪和分析用户事件。

如仅需集成 Google Analytics,请参考

此文档

的操作指引。


创建 Google Tag Manager 账户

  1. 访问

    tagmanager.google.com


  2. 点击右上角“Create Account”。


  3. 填写 Account Name(建议填写公司或团队名),Container Name(建议为项目名称),平台选择“Web”,同意条款后即创建成功。


  4. 您会被跳转到显示需嵌入 Framer 站点的代码片段页面,请复制该代码。


  5. 打开 Framer 项目,点击左上角 Framer 进入站点设置,选择“General”后分别将代码片段嵌入 <head><body> 区域。

    • 第一段代码需添加到 <head> 标签内。

    • 第二段代码需添加到 <body> 标签起始处。完成后请保存并发布页面,参考下方图片。


Custom code section in site settings to add Google Tag Manager code

检查代码是否正确安装

  1. 打开 Google Tag Manager 后台,点击右上角“preview”。


  2. 输入网站 URL 并点击“Connect”。若连接成功,页面右下角及后台将弹出提示窗口。



    建议安装

    Tag Assistant Companion 插件

    ,以便在新标签页中使用预览模式。


关联 Google Tag Manager 与 Google Analytics 4

完成基础配置后,可将 Tag Manager 与 Google Analytics 关联,实现数据互通及页面访问统计。


  1. 访问

    analytics.google.com


  2. 输入 Account Name(建议填写公司或团队名),点击 Next。


  3. 填写 Property Name,点击 Next。


  4. 填写业务相关信息,点击 Next。


  5. 在下一个页面选择“Get Baseline Reports”。


  6. 平台选择“Web”。


  7. 输入您的网站 URL,点击“Create stream”。


  8. 随后将跳转至代码片段安装指引页面,关闭页面即可。此时页面会显示 Measurement ID,点击图标复制该值。


  • 如需跟踪特定点击事件,请将 Measurement ID 临时保存,后续步骤将用到。


  1. 回到 Google Tag Manager,点击左侧 Tags,选择 New - Tag Configuration - Google Analytics,选择 Google Tag。



  2. 将 Measurement ID 填入 Tag ID 框。


  3. 点击 Triggering,选择 Initialization - All pages。


  4. 设置 tag 名称并保存。


检查 Google Analytics 代码是否生效

  1. 回到 Google Tag Manager 后台,点击右上角“preview”。


  2. 输入站点 URL 并点击“Connect”。当 Tag Assistant 显示连接成功后,回到左侧,点击 Initialization,可看到事件已触发。


检查数据是否传递到 Google Analytics

在 Google Analytics 后台左下方进入 Admin,点击 Debug View,即可查看相关事件日志。


用 Google Tag Manager 跟踪网站全站元素点击

  1. 左侧点击 Triggers,点击“New”。


  2. 在 Trigger Configuration 选择 Click 分类下的 “All Elements”。


  3. 命名触发器并保存。


通过 Google Tag Manager 传递点击事件信息到 Google Analytics

按以下步骤将点击事件信息同步到 Google Analytics:


  1. 进入 Tags。

  2. 点击“New”。

  3. 选择“Tag Configuration”。

  4. 选择“Google Analytics - Google Analytics: GA4 Event”。

  5. 粘贴 Measurement ID。

  6. 设置事件名称(如 all_elements)。

  7. Triggering 选择 “All Elements Clicks”。

  8. 命名事件并保存。

  9. 点击“Preview”,在您的网站上点击任意链接,再去 Google Analytics “Admin > Debug View” 即可看到 all_elements 事件。


用 Google Tag Manager 跟踪全站链接点击

  1. 在左侧点击“Click Triggers”,然后点击“New”。


  2. Trigger Configuration 选择 Click 分类下的 "Just Clicks"。


  3. 命名触发器并保存。


测试该触发器

  1. 点击“Preview”,在网站上点击任意链接。


  2. 回到 Tag Assistant,可看到“Links Clicks”已被添加。


用 Google Tag Manager 跟踪指定元素点击

需启用点击变量以便筛选需要跟踪的元素,请按如下步骤操作:


  1. 左侧点击 Variables。


  2. 点击 Configure。


  3. 在“Clicks”部分勾选全部选项。


启用后,点击 preview 并在站点上点击目标链接,返回 tag assistant,左侧会出现相应的 link click 触发器。


本示例中,待跟踪链接有统一 className,即 "framer-styles-preset-c6u029"。


编辑已有的 link click 触发器,在 Google Tag Manager 左侧点击 Trigger,选择之前新增的 “All Links Clicks”。


  1. 点击铅笔图标。

  2. 选择 "Some Link Clicks"。

  3. 右侧输入框填写 "framer-styles-preset-c6u029"。

  4. 重命名并保存。

向 Google Analytics 传递点击事件信息

  1. 进入 Tags

  2. 点击 New

  3. 点击 Tag Configuration

  4. 选择 Google Analytics - Google Analytics: GA4 Event

  5. 粘贴 Measurement ID

  6. 设置事件名称

  7. 点击 Event Parameter - Add parameter

  8. 左侧输入“link_url”,Value 右侧点击图标选择“Click URL”

  9. 添加新参数

  10. 左侧输入“link_text”,选择“Click Text”

  11. Triggering 选择 “All Link Clicks”

  12. 命名事件并保存

  13. 点击“Preview”,在网站上切换任意链接,再去 Google Analytics “Admin > Debug View” 查看事件(如 menu_links)。


发布变更

  1. 确认所有功能均已正常运行后,点击右上角 Submit。


  2. 填写版本名称。

  3. 点击 Publish。


常用资源:

Create a free website with Framer, the website builder loved by startups, designers and agencies.