更新时间:2025年1月19号
这一篇介绍GTM里的数据层。
什么是数据层
GTM数据层(Data Layer)是一个JavaScript对象,它存储在网页上,用于捕捉和存储有关用户行为、页面内容和其他相关数据的信息。它充当GTM标签和网站基础代码之间的中介,提供了一种结构化、统一的方式来传递数据。
数据层的优势
- 统一的数据收集:数据层确保无论标签如何变动,数据的收集方式始终一致,减少了代码冗余。
- 动态数据传递:允许在页面加载后动态插入或修改数据,而不需要重新加载页面。
- 增强分析和营销:通过结构化的数据,营销和分析工具可以更精确地跟踪用户行为,进行更复杂的分析。
- 改进用户体验:通过控制数据的收集和传输,可以减少页面加载时间,提升用户体验。
初始化数据层(dataLayer)
初始化数据层:
window.dataLayer = window.dataLayer || [];
这段代码的作用是确保 dataLayer 数组在全局对象 window 中存在。如果 dataLayer 还不存在,它会创建一个空数组;如果已经存在,它就不会做任何改变。
推送数据到数据层(dataLayer.push)
dataLayer.push = ({
'event': 'test',
'pageType': 'product'
});
上面的代码向 dataLayer 数组推送一个对象,该对象可以包含任何你想传递的数据:
- event 是一个常用的键,用于触发特定的事件或操作
- pageType是数据层变量,就是你要传递的数据,可以有多个数据层变量,也可以嵌套
数据层变量 | dataLayer.pushda代码示例 |
---|---|
一个数据层变量 |
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。
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、名字等信息。