Google Tag Manager中的数据层(Data Layer)解析

Google Tag Manager Haran 8年前 (2016-11-19) 7959次浏览 5个评论
文章目录[隐藏]

 更新时间: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.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名称可以找到:

延伸阅读:如何查看GTM数据层(dataLayer)中信息

常见应用场景


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. transactionTotal这个是GTM电子商务代码的变量,然后Google Ads 转化跟踪用到这个变量的交易额,我直接用同样的名称自定义类型是数据层变量这个变量,然后在GTM Google Ads 转化跟踪的转化价值那里填上transactionTotal,这样操作应该ok的吧
    Bruce2021-11-17 10:38 回复 Windows 7 | Chrome 95.0.4638.69
  2. 用dataLayer.push定义event的时候,是不是必须要容器代码上方先添加一个空的dataLayer?
    Oscar2020-03-20 14:36 回复 Mac OS X | Chrome 80.0.3987.132
    • 不需要
      GA小站2020-03-20 16:19 回复 Mac OS X | Chrome 80.0.3987.149
  3. 群主,多谢你的分享,很给力喔!
    Robin2019-11-20 15:07 回复 Windows 7 | Chrome 73.0.3683.103