通过GTM部署Tidio后，如何配置GA追踪聊天按钮点击事件

嘿，我之前也碰到过一模一样的情况——用GTM追踪第三方聊天按钮的点击确实有点绕，但Tidio其实自带了JS事件可以利用，一步步来就能搞定：

1. 用Tidio内置事件捕获点击动作 #

Tidio的JS SDK提供了事件监听机制，能直接捕获聊天按钮点击或聊天窗口打开的动作。你可以在GTM里新建一个自定义HTML标签，粘贴以下代码：

// 等待Tidio API加载完成
function waitForTidio() {
  if (window.tidioChatApi) {
    // 监听聊天窗口打开事件（对应用户点击聊天按钮）
    window.tidioChatApi.on('chat.opened', function() {
      // 把事件推送到GTM的dataLayer
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'tidio_chat_clicked',
        'eventCategory': '客户支持',
        'eventAction': '聊天按钮点击',
        'eventLabel': 'Tidio在线客服'
      });
    });
  } else {
    // 每隔500ms检查一次，直到Tidio加载完成
    setTimeout(waitForTidio, 500);
  }
}
waitForTidio();

这段代码会等Tidio的API加载好后，监听聊天窗口打开事件（这基本等同于用户点击了聊天按钮），然后把事件数据推送到GTM的dataLayer中。

2. 在GTM中创建GA事件标签 #

接下来要把捕获到的事件发送到GA，新建一个Google Analytics事件标签：

• 如果是UA（Universal Analytics）：
  • 标签类型选「Google Analytics: Universal Analytics」
  • 填写你的GA跟踪ID
  • 事件类别、操作、标签直接引用dataLayer里的变量：{{eventCategory}}、{{eventAction}}、{{eventLabel}}
• 如果是GA4：
  • 标签类型选「Google Analytics: GA4 Event」
  • 事件名称设为tidio_chat_clicked，并添加对应参数（比如category、action）

3. 设置GTM触发条件 #

• 给刚才的自定义HTML标签设置触发条件：选「页面视图」下的「DOM Ready」或「Window Loaded」，确保Tidio脚本已经加载完毕；也可以自定义一个JS变量检查window.tidioChatApi是否存在，用这个变量作为触发条件的一部分，更精准。
• 给GA事件标签设置触发条件：选「自定义事件」，事件名称填tidio_chat_clicked，这样只有当dataLayer推送这个事件时，才会向GA发送数据。

4. 关联GA销售数据 #

要把聊天点击和销售数据关联起来，可以这么做：

• 在GA中创建一个自定义维度（比如「Tidio聊天互动」），设置为会话级或用户级；
• 当捕获到聊天点击事件时，除了发送事件，同时把这个自定义维度的值设为「是」；
• 用户后续完成购买时，GA的交易数据会自动关联这个会话/用户的自定义维度，你就能在GA电商报告里筛选出有过聊天互动的用户的销售数据，对比转化率、客单价等指标；
• 如果你用GA4，也可以用用户属性标记有聊天互动的用户，然后在探索报告中关联电商事件。

测试小技巧 #

用GTM预览模式打开网站，点击聊天按钮，查看dataLayer是否出现tidio_chat_clicked事件，再去GA实时报告里确认事件是否收到，确保整个链路没问题。

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