方法一：gtag方法
gtag是直接在网页中嵌入GA4的自定义事件跟踪代码。它适用于没有使用GTM，而是直接安装GA4的情况。通过gtag，我们可以自定义事件并发送到 GA4，如下所示：
gtag('event', 'click', {
'event_parameter1': 'book retailer',
'event_parameter2': 'Barnes&Noble',
'event_parameter3': 5
});
它有个前提：此方法适用于直接安装GA4的网站。如果使用GTM安装 GA4，则不能使用gtag，因为没有加载gtag函数。
假设我们需要在一个按钮点击时跟踪事件：
步骤如下：
Step 1 ：添加gtag事件跟踪代码
GA4的硬编码写法是：
gtag('event', 'click', {
'event_parameter1': 'book retailer',
'event_parameter2': 'Barnes&Noble',
'event_parameter3': 5
});
我们定义一个自定义事件：
gtag('event', 'hard_code_event', {
'parameter1': 'GA4硬编码事件跟踪'
});
跟踪位置的代码就是：
<a href="links">GA4硬编码事件跟踪</a>
添加事件跟踪代码后（这一步需要开发在源码里添加）：
<a href="links" onclick="gtag('event', 'hard_code_event ', { 'parameter1': 'GA4硬编码事件跟踪' });">GA4硬编码事件跟踪</a>
添加后的效果：
Step 2 ：预览调试
由于没有使用 GTM，无法通过 GTM 进行预览。我们可以使用 Google Analytics Debugger 插件调试。启用插件后，点击链接并检查 GA4 中的 DebugView，查看是否成功触发了事件。
开启Google Analytics Debugger进入调试状态后，点击「GA4硬编码事件跟踪」，然后返回到GA4里，点击「配置」——「DebugView」：
在秒流里可以看到事件hard_code_event，表示事件成功触发。
需要注意：硬编码做事件跟踪，在Tag Assistant里是看不到触发代码，所以需要在DebugView里调试。
Step 3 ：注册事件参数
接下拉就是注册事件参数，事件hard_code_event只要一个事件参数c，是文本型的，所以注册为自定义事件级别自定义维度。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 4 ：验证数据和报告查看
由于GA4的数据延时，数据需要24小时候才会出现在报告中。
在GA4中点击「报告」——「生命周期」——「互动度」——「事件」，可以在事件报告中找到事件“hard_code_event”：
- 优点：不依赖任何第三方工具，灵活且直接。
- 缺点：不易于管理和更新，如果你的网站需要修改多个页面的GA4配置，手动修改代码会很麻烦。
- 使用场景：直接安装GA4的方式适用
方法二：GTM触发器定位（属性定位）
GTM 触发器定位是通过页面元素的属性（如 class、id、text 等）来定位目标元素并触发事件。常用于页面上特定位置的点击或交互。
- 一定要选择一些唯一的属性，如某个位置的class的值是唯一，那么就用该class去定位就可以。
- 如果没有，那么同时使用多个属性，确保它是唯一，不然其他位置的点击也触发，会导致事件跟踪不准确。如某个位置的class的值是不唯一，有两个位置都要这个class，那么再加另一个属性，如text，同时使用class和text属性就可以定位到跟踪的位置。
假设，我想跟踪“关于作者”的点击，跟踪的位置如下所示：
接下来看如何做事件跟踪。
Step 1：设置触发器
右键点击目标元素并查看其HTML属性：
在这个示例中，可以选用href（https://www.ichdata.com/about-me.html）和text（关于作者）输定去定位。
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」，触发器类型选择“所有元素”，命名为“关于作者”，然后做如下设置：
Click Text对应的就是text 关于作者，Click URL对应的就是href https://www.ichdata.com/about-me.html。
然后保存。
Step 2：设置代码
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」，代码类型选择“GA4-Event Tracking-关于作者”，命名为“GA4-Event Tracking-关于作者”，然后做如下设置：
将事件命名为 点击关于作者，并设置参数（如 page_url、value）来传递点击位置的数据。
这样就设置好，设置好后要测试看看设置的正不正确。
Step 3：预览调试
使用 GTM 的 预览模式，模拟点击「关于作者」链接，并检查 Tag Assistant 是否成功触发了事件。
可以看到“GA4-Event Tracking-关于作者”，表示事件跟踪测试成功！！！
Step 4：发布
在GTM中点击右上角的「提交」，将配置发布出去。
Step 5：注册事件参数
在 GA4 中注册自定义事件维度（如 page_url）和自定义事件指标（如 value）。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下设置：
这样就设置完成了。
一般设置后是隔天才有数据，有时候可能两天才有
Step 6：验证数据和报告查看
由于GA4的数据延时，数据需要24小时候才会出现在报告中。
在GA4中点击「报告」——「生命周期」——「互动度」——「事件」，可以在事件报告中找到事件“点击关于作者”：
- 优点：不需要开发添加源码，直接在GTM就可以实现跟踪
- 缺点：触发器是基于页面属性定位，如果源码中的属性有变动，如没删除，可能会导致事件跟踪失效
- 使用场景：最通用，一般做事件跟踪就是使用这种方法
方法三：自定义HTML监听
自定义 HTML 监听方法使用 JavaScript 监听页面上的特定行为（如复制文本、滚动、点击等），并通过 dataLayer.push() 将事件发送到 GTM，再将其传递给 GA4。
假设我现在要跟踪页面上的复制行为。
Step 1：自定义HTML注入javascript
在GTM中创建一个自定义 HTML 标签，监听文本复制事件，并将事件数据推送到 dataLayer，具体操作如下：
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，命名为“复制文本”，将代码黏贴进入，源码在：跟踪用户复制代码，触发器选择“All Pages”，设置后的效果如下：
如果想只跟踪复制邮件或电话号码，可以对做些限制，加个判断，复制的文本等于特定的值，才发送事件。
Step 2：设置触发器
在GTM中创建一个自定义事件触发器，监听 textCopied 事件
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为“textCopied”，然后做如下设置：
Step 3：设置数据层变量
创建数据层变量，以便获取复制的文本数据。
在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为“DL – Clipboard Text”，然后做如下设置：
同理设置DL – Clipboard Length。
Step 4：设置代码
将复制的文本和文本长度作为参数传递给GA4事件标签。
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-复制事件演示”，然后做如下设置：
事件名称命名为TextCopy
同时定义了两个事件参数TextCopy_text和TextCopy_length去传递复制的内容和内容长度。
Step 5：预览调试
接下就是预览调试。
事件正常触发，可以点击打开看里面的value是否准确：
数据准确，可以发布到线上。
Step 6：注册事件参数
前面我们设置了事件参数TextCopy_text和TextCopy_length，接下来需要在GA4中注册事件参数，由于TextCopy_text是文本型，所以注册为自定义事件级别自定义维度，TextCopy_length是数值型，所以注册为自定义事件级别自定义指标。
注册自定义维度TextCopy_text
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
注册自定义指标TextCopy_length
在GA4中点击「配置」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下设置：
这样就设置完成了。
Step 7：报告查看
一般是24小时后，可以在GA4中看到数据，如：
- 优点：不需要开发添加源码，直接在GTM就可以实现跟踪
- 缺点：需要一定的 JavaScript 技术，不如其他方法简单易用。
- 使用场景：稍微复杂一些的跟踪，需要JS实现
方法四：jQuery方法
通过 jQuery 绑定页面元素的 class 属性来监听用户点击事件，并通过 dataLayer.push() 将事件发送到 GTM。
假设现在跟踪这个位置的点击：
Step 1 ：查看页面源码
将鼠标移动需要跟踪位置，点击鼠标右键中的“检测”，然后查看页面元素：
可以看到有class g-mono，这个将用于触发器的设置。
Step 2 ：设置自定义THML
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「自定义HTML」，命名为“HTML-Listen Icon Click”，做如下设置：
代码里的g-mono替换为你实际需要跟踪位置的class即可。
这个配置的作用是创建一个自定义 HTML 标签，使用 jQuery 监听点击事件，并将数据推送到 dataLayer。
Step 3 ：设置触发器
在GTM中点击「触发器」—「触发器」—「选择一个触发器类型以开始设置」——「自定义事件」，命名为“home_icon”，做如下设置：
这里的事件名称就是dataLayer.push里的event的值。
Step 4 ：设置代码
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-click home”，做如下设置：
注意：如需要区分，请自行设置事件参数。
Step 5 ：预览调试
最后就是测试，页面打开看到文章，然后返回到Tag Assistant，可以看到准确触发：
- 优点：不需要开发添加源码，直接在GTM就可以实现跟踪
- 缺点：依赖 jQuery，可能对某些现代网站的兼容性不佳。
- 使用场景：稍微复杂一些的跟踪，需要JS实现
方法五：dataLayer.push方法
dataLayer.push() 是开发者主动向数据层推送事件，并通过 GTM 触发器处理。适用于各种场景，包括简单和复杂的事件跟踪。
假设对这个位置做dataLayer.push跟踪：
Step 1 ： 前端添加dataLayer.push
前端要添加dataLayer.push为：
dataLayer.push = ({
'event': 'test',
'pageType': 'product'
});
将其添加到需要跟位置为止后的效果为：
Step 2 ： 设置变量
GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」，命名为“Page Type”，做如下设置
Step 3 ： 设置触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「自定义事件」，然后做如下设置：
dataLayer.push里的event的值是什么，事件名称就填写什么。
Step 4 ： 设置代码
接下来就是设置代码，在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics：GA4 事件」，然后做如下设置：
Step 5 ： 预览测试
事件配置好后需要测试，Google Tag Manager直接点击右上角的「预览」去测试：
可以看到设置的代码是触发成功，点击查看事件参数page_type：
事件参数的值准确，可以发布。
Step 6 ： 自定义设置
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 7 ： 数据验证
一般是24小时后，可以在Google Analytics 4（GA4）中看到数据，可以在事件报告中找到“dataLayer demo”事件：
- 优点：最精确的事件跟踪方式，适用范围广
- 缺点：需要开发人员手动修改页面代码
- 使用场景：适用任何场景，简单的，复杂的都可以
方法六：ga-data方法
通过在 HTML 元素上添加 ga-data 属性，并使用 JavaScript 获取该属性值，再通过 GTM 配置事件跟踪。
接下来看看具体的实现过程：
Step 1 : 添加ga-data属性
在 HTML 元素上添加 ga-data 属性，定义不同的值来标识事件，添加后的效果如下所示：
Step 2 : GTM中获取ga-data属性
在Google Tag Manager（GTM）中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「自定义JavaScript」，做如下设置：
需要注意：上面的代码中还引用了element这个变量，所以你在变量中还需要开启element变量，element是自动事件变量，做如下设置：
Step 3 ：设置对照表
在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「对照表」，做如下设置：
将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为，一般数值范围选用顺序构造，方便后面设置Trigger的时候确定促发条件
Step 4 ：设置Trigger
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「点击-所有元素」，做如下设置：
Step 5 ：设置代码
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，做如下设置：
Step 6 ：测试发布
然后就是测试，参考：Google Tag Manager中做预览调试（用Tag Assistant）
在Debug测试无异常后即可发布。用这种方法可以简化页面代码的部署，维护方便，后面只需在需要跟踪的位置添加ga-data就可以。
Step 7 ：注册事件参数
在GA4中注册事件参数，就可以在GA4报告中使用该维度。
Step 8 ：数据验证
一般是24小时后，可以在GA4中看到数据，可以在事件报告中找到“ga-data”事件：
- 优点：GTM只需配置一个Tag就可以实现批量事件跟踪；源码变动不会导致事件跟踪失效
- 缺点：需要开发在源码添加ga-data标签
- 使用场景：有大量相似的事件跟踪
总结
gtag方法：适用于未使用 GTM 的 GA4 安装，直接修改页面源码。
如果有使用GTM，请使用以下方法：
- GTM触发器定位：最常用的事件跟踪方法，推荐优先使用。
- 自定义HTML监听和JQuery方法都是需要JS实现，适用于稍微复杂一些的跟踪，实际用使用比较少
- dataLayerpush方法：适用于任何场景，最精确的事件跟踪。
- ga-data方法：适用于批量事件跟踪，减少代码重复。
在实际的使用中，推荐，优先使用GTM触发器定位的方法，其次是dataLayerpush方法。
