方法一：gtag()方法（硬编码方式）
如果网站没有使GTM，而是直接在网页中部署gtag.js，则可以通过gtag() 方法发送事件。
这种方式也被称为硬编码事件跟踪。
下面通过一个完整示例介绍如何实现。
Step 1：添加 gtag() 事件跟踪代码
GA4 使用 gtag('event') 方法发送事件，基本语法如下：
gtag('event', 'click', {
event_parameter1: 'book retailer',
event_parameter2: 'Barnes & Noble',
event_parameter3: 5
});
其中：
- 第一个参数表示调用事件接口（
event） - 第二个参数为事件名称
- 第三个参数为事件参数
一个事件最多可以携带 25 个自定义事件参数（系统自动收集参数不计入该限制）。
下面定义一个事件：
- 事件名称：hard_code_event
- 事件参数：GA4硬编码事件跟踪
完整代码如下：
gtag('event', 'hard_code_event', {
parameter1: 'GA4硬编码事件跟踪'
});
将鼠标移动到需要跟踪的位置，点击鼠标右键——检查：
假设网页中需要跟踪的链接如下：
<span style="font-size: 12pt;"><a href="links">GA4硬编码事件跟踪</a></span>
开发人员可以在 HTML 中增加 onclick 事件：
<a href="links" onclick="gtag('event', 'hard_code_event ', { 'parameter1': 'GA4硬编码事件跟踪' });">GA4硬编码事件跟踪</a>
添加完成后，当用户点击该链接时，GA4 就会发送一个 hard_code_event 事件。
Step 2：预览与调试
由于网站没有安装 GTM，因此 Tag Assistant 无法用于调试硬编码事件。
可以使用Google Analytics Debugger浏览器插件，或者通过浏览器开发者工具开启 Debug Mode，然后点击「GA4硬编码事件跟踪」，然后返回到GA4里，点击「配置」——「DebugView」：
如果配置正确，就可以在 DebugView 中看到hard_code_event事件，说明事件已经成功发送。
Step 3 ：注册事件参数
发送事件后，如果希望在 GA4 报告中使用 parameter1，还需要将其注册为自定义维度。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 4 ：验证数据和报告查看
正式报告通常需要等待一段时间才会出现数据，一般在 24～48 小时 内可见
在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 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：
可以看到“GA4-Event Tracking-关于作者”，表示事件跟踪测试成功！！！
Step 4：发布GTM
在GTM中点击右上角的「提交」，将配置发布出去。
Step 5：注册GA4事件参数
GA4不会自动显示自定义事件参数，需要GA4里的自定义设置里注册：
- page_url是文本型，注册为自定义事件级别自定义维度
- value是数值型，注册为自定义事件级别自定义指标。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下设置：
这样就设置完成了。
Step 6：验证数据和报告查看
由于GA4的数据延时，数据需要24小时候才会出现在报告中。
在GA4中点击「报告」——「生命周期」——「互动度」——「事件」，可以在事件报告中找到事件“点击关于作者”：
- 优点：不需要开发添加源码，直接在GTM就可以实现跟踪
- 缺点：触发器是基于页面属性定位，如果源码中的属性有变动，如没删除，可能会导致事件跟踪失效
- 使用场景：最通用，一般做事件跟踪就是使用这种方法
方法三：自定义JavaScript监听
自定义JavaScript监听用户的特定键盘操作行为，如ctrl+p，监听到就主动dataLayer.push发送事件，然后用自定义事件触发器接收，再将数据发送给GA4。
假设我现在要跟踪页面上的复制行为。
Step 1：添加自定义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事件
将复制的文本和文本长度作为参数传递给GA4事件标签。
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-复制事件演示”，然后做如下设置：
事件名称命名为TextCopy
同时定义了两个事件参数TextCopy_text和TextCopy_length去传递复制的内容和内容长度。
Step 5：预览调试
配置好后，还需要在 GTM 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：
事件正常触发，可以点击打开看里面的value是否准确：
数据准确，可以发布到线上。
Step 6：注册事件参数
GA4不会自动显示自定义事件参数，需要GA4里的自定义设置里注册：
- TextCopy_text是文本型，注册为自定义事件级别自定义维度
- TextCopy_length是数值型，注册为自定义事件级别自定义指标
注册自定义维度TextCopy_text
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
注册自定义指标TextCopy_length
在GA4中点击「配置」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下设置：
这样就设置完成了。
Step 7：报告查看
一般是24小时后，可以在GA4中看到数据，如：
- 优点：不需要开发添加源码，直接在GTM就可以实现跟踪
- 缺点：需要一定的 JavaScript 技术，不如其他方法简单易用。
- 使用场景：稍微复杂一些的跟踪，需要JS实现
方法四：jQuery方法
jQuery方法是为需要跟踪的元素绑定一个唯一的 class，然后使用 jQuery 监听该 class 的点击事件。当用户点击该元素时，通过 dataLayer.push() 向数据层推送一个自定义事件。
假设现在跟踪这个位置的点击：
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 ：设置GA4事件
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-click home”，做如下设置：
注意：如需要区分，请自行设置事件参数。
Step 5 ：预览调试
完成配置后，点击预览进入GTM调试模式，页面打开看到文章，然后返回到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 ： 设置GA4 事件
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics：GA4 事件」，然后做如下设置：
Step 5 ： 预览测试
完成配置后，点击 GTM 右上角的 预览，就可以在 Tag Assissant 里测试：：
可以看到设置的代码是触发成功，点击查看事件参数page_type：
事件参数的值准确，可以发布。
Step 6 ： 在GA4注册事件参数
如果希望在 GA4 报表中查看page_type参数，需要注册对应的自定义维度。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 7 ： 数据验证
一般是24小时后，可以在GA4中看到数据，可以在事件报告中找到“dataLayer demo”事件：
- 优点：最精确的事件跟踪方式，适用范围广
- 缺点：需要开发人员手动修改页面代码
- 使用场景：适用任何场景，简单的，复杂的都可以
方法六：ga-data方法
ga-data方法是在需要跟踪的元素上添加统一的ga-data属性值，然后利用自定义 JavaScript 动态获取该属性值，并通过映射关系将属性值转换为具体的业务行为。随后，在 GTM Trigger 中基于属性值设置触发条件，创建一个通用 Tag 即可覆盖多个元素和多个事件的跟踪需求，从而减少 Tag 数量，提升事件管理效率和维护性。
接下来看看具体的实现过程：
Step 1 : 添加ga-data属性
首先在需要跟踪的位置添加 ga-data 属性，不同的位置添加不同的数值，添加后的效果如下所示：
Step 2 : GTM中获取ga-data属性
在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「自定义JavaScript」，做如下设置：
需要注意：上面的代码中还引用了element这个变量，所以你在变量中还需要开启element变量，element是自动事件变量，做如下设置：
Step 3 ：设置对照表
在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「对照表」，做如下设置：
将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为，一般数值范围选用顺序构造，方便后面设置触发器的时候确定促发条件
Step 4 ：设置触发器
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「点击-所有元素」，做如下设置：
Step 5 ：设置GA4事件
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，做如下设置：
Step 6 ：测试发布
配置好后，还需要在 GTM 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：
可以看到GA4事件出发成功。
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方法。
