更新时间：2025年1月19号
这一篇介绍Google Tag Manager（GTM）里的数据层（Data Layer）。
什么是数据层（Data Layer）
dataLayer 是一个JavaScript对象，主要作用是作为网站和GTM（Google Tag Manager）之间的数据传递桥梁。
通过dataLayer，你可以将网站上的页面信息、用户行为、业务属性等数据统一存放，然后由GTM读取并分发给不同的第三方平台（如 GA4、Google Ads、Floodlight 等），从而实现 前端与分析工具解耦。
数据层的优势
- 统一的数据收集：数据层确保无论标签如何变动，数据的收集方式始终一致，减少了代码冗余。
- 动态数据传递：允许在页面加载后动态插入或修改数据，而不需要重新加载页面。
- 增强分析和营销：通过结构化的数据，营销和分析工具可以更精确地跟踪用户行为，进行更复杂的分析。
- 改进用户体验：通过控制数据的收集和传输，可以减少页面加载时间，提升用户体验。
初始化数据层（dataLayer）
在页面加载时，通常需要先对 dataLayer 进行初始化：
window.dataLayer = window.dataLayer || [];这段代码的作用是确保 dataLayer 数组在全局对象window中存在。如果 dataLayer 还不存在，它会创建一个空数组；如果已经存在，它就不会做任何改变。
如在电商跟踪里就会经常看到它，延伸阅读：详解Google Tag Manager布署电商跟踪指南（GA4）
向dataLayer推送数据（dataLayer.push）
当页面加载或用户触发某个行为时，可以通过 dataLayer.push() 将数据发送到数据层中，例如：
dataLayer.push = ({
'event': 'test',
'pageType': 'product'
});其中：
| 数据层变量 | dataLayer.push代码示例 |
|---|---|
| 一个数据层变量 |
dataLayer.push = ({
'event': 'test',
'pageType': 'product'
});
|
| 多个数据层变量 |
dataLayer.push = ({
'event': 'test',
'pageType': 'product',
'pageTitle': 'GA小站'
});
|
| 数据层变量嵌套 |
dataLayer.push = ({
'event': 'test',
'pageType': 'product',
'pageInfo':{
pageURl:"https://www.ichaa.com"
}
});
|
如果是连续发送dataLayer.push，一定要加上window.dataLayer = window.dataLayer || [];，它还起到清空之前一次发送的数据层变量的作用，避免上一次push的数据层变量错误出现在这次push里，完整代码如：
window.dataLayer = window.dataLayer || [];
dataLayer.push = ({
'event': 'test',
'pageType': 'product'
});dataLayer和dataLayer.push的区别：
dataLayer：初始化数据层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小时后，可以在GA4中看到数据，可以在事件报告中找到“dataLayer demo”事件：
延伸阅读：Google Analytics 4 事件跟踪系列⑩—— 自定义事件（dataLayer.push方法）
验证数据层
在用到数据层的时候，测试的需要看组装的数据格式是否正确，传递的数据是否是对的，特别是在电商测试的时候需要用到，或是在数据层的相关信息是否已经推送出去，这里介绍两种查看数据层信息的方法，帮大家更好的使用GTM。
Tag Assistant
在GTM中可以进入预览模式，可以看「数据层」里：
或API调用：
都可以找到数据层信息。
你还可以使用其他插件去验证，如：ADSWERVE、Data Layer checker、datalayers、Simple Data Layer Viewer
更多关于Tag Assistant的内容，请看：Google Tag Manager中新的预览调试方式——Tag Assistant
浏览器控制台（Console）
在浏览器控制台输入dataLayer,会看到一个数组，包含所有推送到数据层的信息，根据event名称可以找到：
常见应用场景
- 电子商务跟踪：记录购物车操作、订单确认、产品展示等，延伸阅读：Google Analytics 4 ：Google Tag Manager电商配置指南
- 高阶自订事件跟踪：比较复杂的事件跟踪，延伸阅读：Google Analytics 4 事件跟踪系列⑩—— 自定义事件（dataLayer方法）
-
用户数据：比如用户登录后，可以推送用户的ID、名字等信息。
