已部署GTM的网站如何用GA4跟踪自定义事件？

我已在网站头部部署了Google Tag Manager（GTM）代码：

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

现想集成Google Analytics 4（GA4），了解到推荐通过GTM实现，无需硬编码G-XXXXXX ID，有以下疑问：

1. 是否无需添加以下独立GA4代码？

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXX');
</script>

2. 原本通过以下代码向GA4发送自定义事件：

gtag('event', '<event_name>', {
  <event_parameters>
})

但不清楚如何通过GTM向指定G-XXXXXX ID发送自定义事件，GTM如何关联该ID？
3. GTM配置是否等效于独立GA4配置？

解答 #

1. 是否需要保留独立GA4代码？ #

不需要。既然已经部署了GTM容器代码，所有GA4相关配置都能通过GTM后台完成，硬编码的独立GA4代码会和GTM配置重复，甚至可能导致数据统计异常，直接删除即可。

2. 如何通过GTM关联G-XXXXXX ID并发送自定义事件？ #

关联GA4 ID

• 登录GTM后台进入你的容器，点击新建标签
• 标签类型选择Google Analytics: GA4 Configuration
• 在配置界面输入你的G-XXXXXX ID，触发条件设置为All Pages（确保所有页面都能初始化GA4）
• 保存并发布容器，GTM就会自动在页面加载时完成GA4初始化，关联你的ID

发送自定义事件

有两种常用实现方式：

• 方式一：通过dataLayer传递事件，GTM监听发送
  在网站代码中将自定义事件推送到dataLayer：

  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': '<你的事件名>',
    '<参数名1>': '<参数值1>',
    '<参数名2>': '<参数值2>'
  });
  

  再回到GTM后台操作：

  1. 新建触发器，类型选自定义事件，输入你推送到dataLayer的事件名
  2. 新建标签，类型选Google Analytics: GA4 Event，选择之前创建的GA4配置变量（或直接输入G-XXXXXX ID），填写事件名和参数（可直接引用dataLayer中的变量）
  3. 将触发器关联到该标签，保存发布后，当dataLayer推送事件时，GTM会自动向GA4发送对应自定义事件

• 方式二：直接在GTM中配置事件触发
  如果不需要在网站代码中做逻辑处理，也可以直接在GTM中设置触发器（比如点击特定元素、页面滚动到指定位置等），再关联GA4事件标签，无需修改网站代码

3. GTM配置是否等效于独立GA4配置？ #

基本等效，甚至功能更灵活：

• 独立GA4代码能实现的初始化、页面浏览统计、自定义事件发送，GTM都能完成
• 额外的，GTM可以实现更精细化的触发控制（比如只在特定页面、特定用户群体发送事件），还能统一管理其他第三方标签（比如广告、统计工具），不用频繁修改网站代码

内容的提问来源于stack exchange，提问作者Denny