dataLayer是区分初级和高级GTM用户的分水岭
|

dataLayer是什么？该怎么用？GTM高级使用技巧解析

作者Hermes Ma
dataLayer是区分初级和高级GTM用户的分水岭
dataLayer是区分初级和高级GTM用户的分水岭

Google Tag Manager是一个免费的超级应用，它在Google Analytics Suite中非常重要，可以大幅简化我们收集网站数据用于分析，还可以提升用户体验并增进SEO的效果。极诣以往多次在Google Tag Manager教程中使用了dataLayer。比如《如何利用GTM记录下拉菜单选项》和《如何根据不同地区访客来触发GTM标签》。在GTM中dataLayer是一个底层核心概念，理解datalayer有助于帮助我们更好地管理各种触发条件。本文我们就聊一下dataLayer是什么，我们又该如何使用datalayer。

dataLayer是什么？

dataLayer是GTM在浏览器中增加的环境变量，它是一个全局变量。是window下的一个子对象。它是一个范围为页面生命周期的变量，而不是以会话为生命周期的变量。因此如果你的网站是SPA（single page application）要格外注意dataLayer的生命周期。

如果你的网站使用了GTM那么你可以通过下面的方法找到dataLayer。

  1. Chrome浏览器按F12，打开DevTools。选择Console。
  2. 在命令行中输入window.dataLayer或者直接dataLayer。
  3. 执行命令在返回结果中展开dataLayer。
在Chrome浏览器中查看datalayer
在Chrome浏览器中查看datalayer

我们在上图的结果中可以看到，其实dataLayer是一个数组，包含了各个对象。第一次我们运行了window.dataLayer获得了4个dataLayer对象，第二次获得了6个对象。这从length属性可以看出变化，原因是极诣的网页有计时器，触发了gtm.timer30和gtm.timer事件，GTM把这两个事件推送到了dataLayer。在GTM的调试模式下你也可以在Data Layer栏看到数组里的所有dataLayer对象。

值得一提的是gtm.js是一个JS库。它是GTM的container标签用到的。如果这个dataLayer对象不存在那么你的GTM就挂了，因为当gtm.js载入时，会触发gtm.js这个事件。

gtm.dom对应DOMContentLoaded，你可以在Console右面第二个network中的下方状态栏找到。当事件发生时，gtm.dom会被推送到dataLayer。

另外gtm.load也是container标签用到。如果这个不存在，那么表示网站内容还未被完全读取。load这个事件我们已经在以往的文章中多次介绍。当网页完全载入后gtm.load事件将被触发，被推送到dataLayer。

如何使用dataLayer？

你可以在HTML中添加<script>标签放入dataLayer的值，格式为json。

<script>
    dataLayer = [{
        'author' : 'Hermes Ma'
    }];
</script>

上面这个例子中我们定义了dataLayer，它包含了一个对象，对象里有一个值。

[notification type=”alert-warning” close=”false” ]这里有一个新手常犯的错误，就是将这段代码放到GTM的安装代码之后。这样的话GTM的container建立起的dataLayer队列就会被覆盖导致GTM完全失效。[/notification]

由于设计和部署的非常有可能不是同一人，为了避免这种情况。建议始终用dataLayer的push方法进行赋值。示例如下：

<script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'author' : 'Hermes Ma'
    });
</script>

首先我们会检查一下是否dataLayer已经存在了，如果已存在那么就自己等于自己，否则就新建一个空数组。然后把要赋的值推入队列。

这里我们要理解GTM的dataLayer机制，它是一个队列，而且永远返回最新的那个对象的值。要谨记的是不推荐通过JS去更改已经被推入dataLayer的对象的值，用push。

只需要将新的值push进去就行了
只需要将新的值push进去就行了

在上面的例子中如果我们使用Data Layer Variable来获取author和gender的值的话GTM会分别从最后一个对象开始找是否有author的值和gender的值，最终会得到Herme Ma和female。

在GTM中使用dataLayer

dataLayer为我们提供了理想的存取数据的容器。在揭开了dataLayer的神秘面纱后我们再说说如何在GTM中使用dataLayer。

建立Data Layer Variable
建立Data Layer Variable

首先是从dataLayer中获取所存储的值。你可以通过Data Layer Variable来实现。接着之前的例子，上图中填入Data Layer Variable Name，假设是author，那么你便可以获得值Hermes Ma。

其次是将值推入dataLayer。就如我们之前强调的，除了初始的赋值你可以在HTML文档中hardcode，我们推荐用push方法。我们可以在Custom HTML Tag中用JS来完成这一过程。

我们甚至可以通过将event推入dataLayer来自定义事件。如dataLayer.push({‘event’ : ‘read more’});。

触发器：read more事件
触发器：read more事件

你可以新建一个Custom Event的Trigger来标志push了event后的各种骚操作。

至此，我们介绍了dataLayer和如何在GTM中使用dataLayer，它可以让你的数据和事件管理更加灵活。欢迎通过极诣的微信公众号参加讨论。

类似文章