迁移至GA4+GTM后，如何发送程序化自定义事件？

我拥有一个包含多个SPA风格页面或小部件的网站，此前使用Universal Analytics的「ga」函数向Google Analytics动态发送事件，示例代码如下：

ga(
  'MyLinker.send',
  'event',
  'Custom SPA',
  'Button Clicked',
);

目前我已通过Google Tag Manager的GA4 Config标签迁移至Google Analytics 4，请问在此GA4+GTM配置下，如何发送程序化自定义事件？

在GA4+GTM的配置下，发送程序化自定义事件主要通过**数据层（Data Layer）**实现，这是GTM接收前端自定义事件的标准方式，适配SPA的动态场景，具体步骤如下：

1. 前端推送事件到数据层 #

替换原有的ga()调用，改用GTM数据层推送方法，把事件信息传递给GTM：

// 初始化数据层（如果未初始化）
window.dataLayer = window.dataLayer || [];
// 推送自定义事件及参数
window.dataLayer.push({
  event: 'custom_spa_button_click', // GTM识别事件的核心标识，建议用小写+下划线格式
  event_category: 'Custom SPA',      // 对应原UA的事件类别
  event_action: 'Button Clicked'     // 对应原UA的事件动作
});

• 注意：event字段是必填项，其他参数可根据业务需求自定义添加。

2. GTM中配置自定义事件触发器 #

登录GTM后台，创建触发规则：

• 触发器类型：选择「自定义事件」
• 事件名称：填写前端推送的event值（如custom_spa_button_click）
• 触发条件：根据需求设置（比如全站点触发，或限定特定SPA路由）

3. GTM中配置GA4事件标签 #

创建关联触发器的GA4事件标签：

• 标签类型：选择「Google Analytics: GA4事件」
• 配置标签：选择已设置好的GA4 Config变量
• 事件名称：可直接使用数据层的event值，或自定义GA4端的事件名（如spa_button_click）
• 事件参数：点击「添加参数」，将数据层的自定义字段映射到GA4参数：
  • 参数名称填event_category，值选择「数据层变量」并填写event_category
  • 参数名称填event_action，值选择「数据层变量」并填写event_action
• 触发条件：选择刚创建的自定义事件触发器

4. 测试与发布 #

• 开启GTM「预览」模式，触发前端交互，确认数据层事件推送、GA4标签触发正常
• 登录GA4后台，在「实时」报告中验证自定义事件是否已接收
• 确认无误后，发布GTM版本

补充：批量复用的简化写法 #

如果需要频繁推送同类事件，可以封装工具函数提高效率：

function sendGA4Event(eventName, category, action, extraParams = {}) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: eventName,
    event_category: category,
    event_action: action,
    ...extraParams // 额外自定义参数
  });
}

// 调用示例
sendGA4Event('custom_spa_button_click', 'Custom SPA', 'Button Clicked');

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