• GTM课程
  • 博客
  • 服务
  • 资源资源
    • YouTube频道
    • 电子书和指南
    • GTM食谱
    • 查看所有资源
    • GTM社区
  • 关于
    • 关于
    • 联系
  • GTM课程
  • 博客
  • 服务
  • 资源资源
    • YouTube频道
    • 电子书和指南
    • GTM食谱
    • 查看所有资源
    • GTM社区
  • 关于
    • 关于
    • 联系

2019年4月30日

Complete 谷歌跟踪代码管理器 Data Layer Tutorial

更新时间:2020年4月30日。 数据层是Google跟踪代码管理器的主要概念之一,可确保最大的灵活性,可移植性和易于实施性。没有它,GTM中就不会有变量或触发器,因此不会触发任何代码。这是使标签管理正常运行的原因。这是解锁Google跟踪代码管理器的关键’s potential.

在这个博客中,我’ve已经发表了与该主题相关的几篇文章,但它们分散很多。那’这就是为什么我决定收集所有重要的资源,技巧和知识(’累积至今)并将其放在一个位置。这是扩展的Google跟踪代码管理器数据层教程,其中介绍了什么是数据层,为什么有用,如何使用,什么是最佳做法等。

 

目录

此Google跟踪代码管理器数据层教程分为以下几章:

+显示目录+

  1. 什么是数据层?
  2. 在数据层中存储数据(dataLayer.push)
  3. 从数据层读取数据
    1. 数据层变量
    2. 数据层版本
    3. 那么其他数据结构呢?
    4. 从子键中提取数据
    5. 数组
  4. 将数据从数据层发送到其他工具
  5. 使用数据层数据作为触发器
  6. 使用数据层事件作为触发器
  7. 谷歌跟踪代码管理器 Data Layer Tutorial: Final words

 

 

#0。学习数据层的两个附加选项

由于该主题在Google跟踪代码管理器中的重要性是不可思议的,因此我向我解释了我的两门高级GTM课程:

  1. 谷歌跟踪代码管理器 Masterclass for Beginners
  2. 在termediate 谷歌跟踪代码管理器 course

在初学者中’当然,我们对总体上什么是数据层,为什么重要这一点以及如何使用它进行了全面的概述。

在中级课程中,我们将深入探讨本博文中没有解释的主题。了解数据层的全部潜力(和技术性)是成功跟踪实施的关键。

 

#1什么是数据层?

从技术上讲,数据层是存储某些信息的JavaScript数组。如果那不响,请在这里’更为简单的解释。

It’s网站的不可见/虚拟层,您,开发人员或各种工具可以在其中存储数据(关于用户,页面内容等)。 谷歌跟踪代码管理器从那里读取该信息,在标记/触发器/变量中使用该信息,或进一步发送给其他工具(您命名为Google Analytics(分析),Google Ads,Facebook Pixel)。

谷歌跟踪代码管理器 Data Layer Tutorial Scheme

将Google跟踪代码管理器容器的JavaScript代码段放入您的 网站的源代码,即会自动创建数据层。 您无需再添加任何内容(除非您想用其他数据填充它)。

谷歌跟踪代码管理器数据层可以包含各种信息,可以通过放置其他数据层代码段来完成 以上 谷歌跟踪代码管理器 snippet or by using dataLayer.push 方法。

继续阅读此Google跟踪代码管理器数据层教程,以了解原因 dataLayer.push 应该是将数据添加到数据层的唯一选择。

 

#2。在数据层中存储数据(dataLayer.push)

有两种方法可以将数据推送到数据层。实际上,只有您应该使用一个,但是为了知识我’ll mention both:

  1. 通过添加数据层代码段 以上 GTM容器代码段(此方法称为 数据层声明)。
  2. 或通过推送数据 dataLayer.push 方法。你问有什么区别?

的 第一种方法 如果您想在页面加载时立即推送任何自定义数据,此功能很有用。示例:加载产品页面时的产品数据。您可能希望将产品数据(从数据层)发送到Facebook Pixel(通过 查看内容 事件)。

在这种情况下,您的开发人员应添加一个数据层代码段 以上 Google跟踪代码管理器跟踪容器,其中包含产品ID,产品标题等参数。此处’s an example:

<script>
 dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
 }];
</script>


<!-- 谷歌跟踪代码管理器 --> 
... 
<!-- End 谷歌跟踪代码管理器 -->

后来,借助 数据层变量,您将能够阅读该信息并将其传输到FB Pixel(继续阅读此Google跟踪代码管理器数据层教程,然后’ll解释如何读取该信息)。

第二种方法(推荐) (dataLayer.push)可让您在网站上发生某些事件时推送其他数据。这里有一些例子:

  1. 您有新闻稿注册表单(无法使用默认的GTM表单侦听器轻松跟踪)。一旦新订阅者在您的网站上输入了他/她的电子邮件,您应该要求您的网站开发人员触发数据层事件:
    窗口。dataLayer.push({'event': 'new_subscriber'});
    

    如果您愿意,可以向开发人员询问其他信息(例如 表格位置 (因为您可能在同一页面上使用多个表单)。

    窗口。dataLayer = 窗口。dataLayer || [];
    window.dataLayer.push({
     'formLocation': 'footer',
     'event': 'new_subscriber'
     });
  2. 访客将产品添加到他/她的购物车时,数据层事件(包含产品’的信息)可能会被解雇。

重要: 我在2016年撰写有关数据层的第一篇博客文章(后来,我对其进行了多次更新)之后,我一直在关注Google’的文件提示我必须放置 dataLayer = [{}] above the 谷歌跟踪代码管理器 snippet 和 dataLayer.push 每当发生重要事件时。

但是后来我注意到多位GTM专家建议这不是最佳实践。相反,您应该始终:

  1. 采用 dataLayer.push (忘记 dataLayer = [{}];)
  2. 并通过添加对其进行升级 窗口。

此博客文章中的所有示例都遵循此规则,就像这个规则一样:

窗口。dataLayer = 窗口。dataLayer || [];
window.dataLayer.push({
 'event': new_subscriber
 });

如果您想了解更多有关 dataLayer.push, 阅读本指南.

到目前为止,喜欢这个Google跟踪代码管理器数据层教程吗?考虑订阅!只要在下面的表格中输入您的电子邮件地址,您就可以’还有更多很棒的GTM内容。

 

 

#3。从数据层读取数据

想象一下,此博客中有几位作者:

  • 我
  • 约翰·杜
  • 杰克·托伦斯
  • 等等

我想找出哪些作者撰写的内容最吸引人,然后在Google Analytics(分析)中细分会话。我正在使用DurecellTomi WordPress插件,该插件将帖子作者姓名存储在数据层中。如果你不这样做 ’如果没有WP,请开发人员将其他数据点添加到数据层。该代码段如下所示:

<head>
   <script>
     窗口。dataLayer = 窗口。dataLayer || [];
     窗口。dataLayer.push [{
       pagePostAuthor: 'Julius Fedorovicius'
     }];
   </script>
   <!-- 谷歌跟踪代码管理器 -->
   ...
   <!-- End 谷歌跟踪代码管理器 -->
</head>

放置数据层代码段非常重要 以上 Google Tag Manager’网站代码中的容器代码  如果您想通过“页面查看”事件访问该信息.

 

#3.1。数据层变量

默认情况下,Google跟踪代码管理器无法识别数据层中的自定义数据,因此您不能将其用作变量。除非你 使用数据层变量。为了创建变量,您需要指定要检索其值的数据层键。解析完变量后,它将返回最近推送到键中的所有内容。那样简单!

将数据层变量转换为GTM变量

如果我想拿 pagePostAuthor 值,我只需要设置 pagePostAuthor 输入变量的设置。

假设您要在有人发表评论时发送Google Analytics(分析)事件。对于每个事件,您还想推送文章的全名’的作者。这样,您将看到哪些作者吸引了最高的读者参与度。

在此示例中,我将不详细介绍如何创建标签,因为我仅演示如何从数据层提取数据并将其转换为变量(在Google跟踪代码管理器中)。

在GTM帐户中,您应该转到 变数 并使用以下设置创建一个新的(dlv stands for 数据层变量):

作者后数据层变量

那’s it! Save this variable, refresh 预习 和 Debug (P&D)模式,然后刷新您正在工作的网站。然后,您应该在 变数 tab of 预习 & Debug console.

预览和调试控制台中的数据层变量

 

#3.2。数据层版本

数据层变量中的另一个可用设置是 版。选择版本时,即指示Google跟踪代码管理器处理这些值 在数据模型中 以两种不同的方式。

 

#3.2.1。版本1

It’s非常有限,并且不允许您访问嵌套值。如果创建DL变量并尝试访问 pagePostAuthor (在下面的示例中),您’d fail because it’不在对象的根中(相反,’s a direct child of 属性 key).

<script>
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
    "属性": {
       'pagePostAuthor': 'Julius Fedorovicius' 
    }
 });
</script>

因此,如果您想获取帖子作者’的名称,数据层中的对象应如下所示:

<script>
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
    'pagePostAuthor': 'Julius Fedorovicius' 
 });
</script>

看到?那里’s no 属性 key 和 pagePostAuthor 在根本上。

那’不是版本1的唯一限制。’也没有合并可用。每次将数据推送到数据层时,它将覆盖整个对象。让我举例说明。想象一下,我们有两个具有不同数据的数据层推送。第一次推送仅包含 pagePostAuthor,另一个包括另外两个键, pageCategory and pagePostType.

<script>
 //The 1st Push
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
 'pagePostAuthor': 'Julius Fedorovicius' 
 });
 
 //The 2nd Push
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
 'pageCategory': 'google-tag-manager-tips',
 'pagePostType': 'post'
 });
</script>

最后,你’d在数据层中只有两个值: pageCategory 和 pagePostType 因为它已经完全覆盖了第一次推送的数据。

所以呢’第一版的重点是什么?听起来没什么用, you might say. 那’并非完全正确。一世’ve注意到有时(例如在增强型电子商务中)’拥有一个“clean”数据层没有以前的值,这意味着每次 窗口。dataLayer.push 发生时,它将完全清除旧数据并存储新数据。

 

#3.2.2。版本2

第二版更加灵活。它允许您访问嵌套值,数组,合并数据。

让’返回带有两个后续数据层推送的上一个示例。第一次推送仅包含 pagePostAuthor,另一个包括另外两个键, pageCategory and pagePostType.

<script>
 //The 1st Push
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
 'pagePostAuthor': 'Julius Fedorovicius' 
 });
 
 //The 2nd Push
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
 'pageCategory': 'google-tag-manager-tips',
 'pagePostType': 'post'
 });
</script>

与版本1相反,在版本2中,这三个值都将保留在数据层中,因为它们没有冲突。

{ 
 'pagePostAuthor': 'Julius Fedorovicius',
 'pageCategory': 'google-tag-manager-tips',
 'pagePostType': 'post'
}

如果第二数据层推送也有 pagePostAuthor 因此,数据层中的最终数据将看起来像这样:

{ 
 'pagePostAuthor': 'John Doe',
 'pageCategory': 'google-tag-manager-tips',
 'pagePostType': 'post'
}

这是因为 pagePostAuthor 从第二次推入改写 pagePostAuthor 从第一个开始Simo Ahava发布了有关以下内容的详细指南 数据层版本。一世f you still have some questions, go check it out.

 

#3.2.3。默认值

数据层变量中的最后一个设置是 默认值。一世f you’重新尝试访问数据层中特定键的值,并且该键不存在,“未定义”将被退回。有时您可能需要获取其他默认值,例如 (没有设置), 空的或其他任何内容。在这种情况下,请单击复选框并设置默认值。

数据层变量默认值

 

#3.3。但是其他数据结构呢?

请记住,可以使用不同的结构将数据存储在数据层中。这里’一个例子,其中的关键 pagePostAuthor 在根级别:

<script>
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({
    'pagePostAuthor': 'Julius Fedorovicius'
 });
</script>

或这个(pagePostAuthor key 现在是 属性 key):

<script>
 窗口。dataLayer = 窗口。dataLayer || [];
 窗口。dataLayer.push({ 
    'attributes': {
       'pagePostAuthor': 'Julius Fedorovicius' 
    }
 });
</script>

甚至像这样(有两个数组是 transactionProducts key):

<script>
window.dataLayer = 窗口。dataLayer || [];
dataLayer.push({
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   '类别':'服装',
   '价格':11.99, 
   “数量”:1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   '类别':'服装',
   '价格':9.99,
   '数量':2
 }]
});
</script>

在最后两个示例中,输入密钥’s 名称 (pagePostAuthor)还不够,你不能’才能获得其价值。那里’还有其他你需要知道的东西。

 

#3.4。从子键中提取数据

让’s尝试将其尽可能地简化为非技术性的:当键是其他键的后代时,它们称为子键(老实说,’在这个词上找到了各种术语,但是 子键 对于非开发人员来说,这似乎是最容易理解的。在下面的示例中,您可以看到 属性 在第一级, pagePostAuthor is on the 2nd.

{
 属性: {
   pagePostAuthor: 'Julius Fedorovicius'
 }
}

为了获取其值,您应该稍微更改变量中的一项设置(在Google跟踪代码管理器中)。代替 pagePostAuthor,你 should enter attribute.pagePostAuthor 作为数据层变量名称。

attribute.pagePostAuthor

如果 pagePostAuthor 也有一把儿童钥匙?你会怎么做?

{
 属性: {
    pagePostAuthor: {
       autorName: 'Julius Fedorovicius',
       authorTag: 'Google Tag Manager'
    }
 }
}

盗梦空间我们需要更深入

那’是的。您应该定义该特定键的完整路径: attribute.pagePostAuthor.authorName, 等等… 等等…每个级别应以一个点分隔。

在数据层中访问子键很常见。当有人问我一个例子时,我总是告诉他们有关AJAX侦听器的信息,该侦听器有助于跟踪AJAX表单的提交。

在我的博客文章中 谷歌跟踪代码管理器 AJAX form tracking, 一世’ve解释了如何使用AJAX侦听器,该侦听器侦听所有AJAX请求并将有价值的信息推送到数据层。这里’s an example:

ajaxComplete-完整回复

有很多嵌套键。为了从数据层提取数据,您需要’我需要在数据层变量中使用点符号’s settings, e.g. attribute.response。

dlv-attribute.response

 

#3.5。从数组成员中提取数据

我正在与开发人员合作实施 谷歌 Analytics(分析)电子商务追踪 (标准,未增强)。以下 谷歌’s guidelines, 一世 asked a developer to push successful order’的数据到数据层。然后,我可以通过Google跟踪代码管理器中的“交易”代码来获取该事件。

It’开发人员必须遵循准则并使用Google指示的结构来推送数据,这一点非常重要。这里’是他们知识库中的官方示例:

<script>
window.dataLayer = 窗口。dataLayer || [];
dataLayer.push({
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26,
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   '类别':'服装',
   '价格':11.99, 
   “数量”:1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   '类别':'服装',
   '价格':9.99,
   '数量':2
 }]
});
</script>

“You know what?”, I asked myself, “这是非常有用的信息”. I’d也想将此订单数据推送到其他营销工具’m using at Omnisend (例如,Facebook Pixel)。我最感兴趣的是 价钱, 名称和 数量。

我尽了最大的努力,不幸的是失败了。我用了 transactionProducts.price, transactionProducts.name,等等,但是我新创建的数据层变量总是返回 未定义。 所以呢’s wrong?

失败-未定义的数据层变量

注意到任何可疑的东西吗?在我的标准电子商务示例(摘自Google知识库)中, transactionProducts has 2 名称 keys, 2 价格键等。那么,Google跟踪代码管理器如何知道我感兴趣的值?第一个还是第二个?如果用户购买了5种产品会怎样?

我们在这里处理的称为 数组. transactionProducts 有一个包含两个具有相同键集合的产品的数组: sku,名称,类别,价格,数量。

在Javascript中,如果要提取第一个产品的值’s 价钱,你’d need to use transactionProducts [0]。价格 (索引从0开始),但是Google跟踪代码管理器在这种情况下不支持方括号,因此您’d需要使用点符号,如下所示: transactionProducts.0.price。

在数据层访问数组成员

在Google跟踪代码管理器中,您的数据层变量应如下所示:

transactionProducts.0.price

如果阵列中有5个产品,并且您想访问第5个产品的价格,则数据层变量名称应为 transactionProducts.4。价格。 请记住,这里的索引从零开始,因此第一个乘积实际上不是第一个乘积,而是第0个乘积。

累?如果是,请随时在此Google跟踪代码管理器数据层教程中添加书签,稍后再返回。

 

 

#4。将数据从数据层发送到其他工具

A quick checkpoint in our 谷歌跟踪代码管理器 Data Layer Tutorial. 让’s看看我们到目前为止所取得的成就:

  • 自定义数据存储在数据层中(由于您的编码技巧,开发人员’的编码技巧或一些第三方插件)。
  • 谷歌跟踪代码管理器开始识别该自定义数据(由于数据层变量)。
  • 现在,我们需要将此数据发送到其他工具,例如Google Analytics(分析)。

 

#4.1. Enable 预习 和 Debug Mode in 谷歌跟踪代码管理器

创建数据层变量后,检查Google跟踪代码管理器是否正确捕获了它。

  • 在 your 谷歌跟踪代码管理器 panel, enter 预览和调试模式 (通过点击 预习 按钮)
    GTM预览按钮
  • 启用调试模式后,您将看到橙色的通知栏:
    预览和调试模式
  • 转到您当前正在工作的网站并刷新它。
  • GTM调试控制台应出现在屏幕底部。
    在预览和调试模式下发布作者
  • 请点击 变数 and look for pagePostAuthor, 检查其值。如果 pagePostAuthoer 是 未定义,请仔细检查您是否在Google跟踪代码管理器的管理面板中输入了正确的数据层变量名称(请注意,’区分大小写)。就我而言 pagePostAuthor 变量定义正确,因为我得到了值 朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius).

 

#4.2。在Google Analytics(分析)中创建自定义维度

pagePostAuthor 是由您(或您的开发人员)定义的自定义参数,因此Google Analytics(分析)默认不会捕获它。您需要创建一个名为 pagePostAuthor (实际上,您可以随意命名),以便让Google Analytics(分析)知道此新参数。

  • 登录到您的Google Analytics(分析)帐户。
  • 打开您的网站帐户,然后点击“管理员”。您应该会看到以下内容:
    谷歌 Analytics(分析)管理员
  • 向下滚动并向内滚动 物业部分 单击自定义定义> Customer dimensions
    分析自定义维度
  • 请点击 创建自定义维度
  • 输入名字 pagePostAuthor (或其他), 选择用户作为范围,然后单击创建。的 用户 范围会将此自定义维度应用于该特定用户的所有其他事件。
    在Google Analytics(分析)中创建维度
  • 创建自定义维度后,您会看到一个简短的代码段。
    谷歌分析自定义维度代码
    仔细看看第二行代码’s a 维度3。数字3是 pagePostAuthor 自定义维度。请记住这一点。

 

#4.3。推 pagePostAuthor 谷歌 Analytics(分析)的资料层变数

  • Go back to your 谷歌跟踪代码管理器 account.
  • 打开通用Analytics(分析)浏览量标记。如果您没有,请创建一个。
  • 转到标签,然后单击新建。
  • 输入代码的名称-GA浏览量(实际上,您可以根据需要命名)
  • 点击 标签配置 box.
    标签配置框
    选择标签类型-Universal Analytics
    标签类型通用分析
  • 现在该配置标签了。输入Google跟踪ID(UA-xxxxxxx)。实际上,如果您将变量与 谷歌 Analytics(分析)设置,而不是。
  • 轨道类型 – 页面预览
  • 请点击 更多设置 > 自定义尺寸
  • 输入3 索引栏 (这是您在第3步中获得的索引)
  • 在[{dlv – pagePostAuthor}}中输入数据层变量 尺寸值 领域。在Google跟踪代码管理器中,变量用双大括号{{}}括起来。
    自定义尺寸 in 谷歌跟踪代码管理器
  • 在里面 触发方式 部分选择 所有页面。
  • 这样一来,您在每次浏览时都会发送一个 pagePostAuthor 变量作为自定义尺寸3。

那’s how you can transfer additional data from 谷歌跟踪代码管理器 Data Layer to 谷歌 Analytics. But don’将自己限制为自定义尺寸。您可以在Google Analytics(分析)事件代码中使用数据层变量, Facebook像素等

要了解如何使用自定义维度, 在Moz博客上阅读本指南.

 

#5。使用数据层数据作为触发器

数据层还可以用于更高级的标记触发规则。例如,仅当用户使用免费套餐时,您才能触发Google Ads再营销标签。让我们仔细看一下这个例子。

  • Open the 谷歌跟踪代码管理器 admin panel.
  • 去 标签 and click New.
  • 输入名称,即 谷歌 Ads再营销标签
  • 选择代码类型-Google Ads再营销
  • 输入转化ID和转化标签
  • 将所有其他设置保留为默认设置,然后单击继续
  • 在里面 触发方式 section, 请点击 加 icon 在触发器列表中创建标签在右上角输入名称-我建议“网页浏览量–拥有免费计划的用户”。选择 页面预览 作为触发类型。
  • 您不希望在每个页面上触发此代码。在 此触发器触发 部分,单击 一些页面浏览量 并输入以下规则: dlv – PricingPlan equals 自由。这意味着Google Ads再营销代码仅在 标价计划 数据层变量完全是Free。高级用户将不会触发规则。
    触发配置

 

#6。使用数据层事件作为触发器

基于数据层触发器的另一个常见示例是使用事件。除了自定义数据,您还可以使用以下方法将事件推送到数据层: 窗口。dataLayer.push。

窗口。dataLayer = 窗口。dataLayer || [];
window.dataLayer.push({
 'formLocation': 'footer',
 'event': 'new_subscriber'
 });

参数 事件 表示这是一个数据层事件。所有事件都可以在预览和调试模式下看到’s stream.

新订户事件

现在,让我们将此事件设置为Google Analytics(分析)事件代码的触发器。

  • 转到触发器,然后单击新建
  • 输入名字。我建议叫它 自定义–新的电子邮件订阅者
  • 选择类型-自定义事件(所有数据层事件在GTM中均被视为自定义事件)。
  • 开火– new_subscriber。您需要输入在“预览和调试”控制台中看到的事件的确切标题。

自定义触发器

让’s get back to our 窗口。dataLayer.push 事件示例。这是代码:

窗口。dataLayer = 窗口。dataLayer || [];
window.dataLayer.push({
 'formLocation': ‘footer’,
 'event': new_subscriber
 });

如果我们也通过了 formLocation 数据发送到Google Analytics(分析)? 谷歌跟踪代码管理器默认情况下不会捕获此参数,因此我们需要创建另一个变量。转到变量>用户定义的变量,然后单击“新建”。

  • 我建议命名 dlv – formPosition.
  • 选择类型-数据层变量。变量名称 - formPosition (这正是上一个代码示例中调用该参数的方式。保留所有其他设置不变,然后单击“创建变量”。
    表单位置-数据层变量

最后,让新订户提交他/她的电子邮件地址时,创建一个Google Analytics(分析)事件代码。

  • 转到标签并单击新建
  • 选择产品– 谷歌 Analytics(分析)
  • 选择代码类型-通用或经典分析(取决于您当前安装的GA版本)。
  • 设置跟踪ID参数或选择Google Analytics(分析)设置变量。
  • 曲目类型–事件
  • 类别–表单提交(这意味着所有事件(与此触发器相关)将具有相同的 类别
  • 动作–新订阅者
  • Label – {{dlv – formPosition}}. 那’s the variable that we have just created. 的 value of this parameter will change depending on the position of your form. If you have 3 different forms on the same page, 和 they all fire the same new_subscriber 数据层事件,但有所不同 formPosition 值,Google跟踪代码管理器将传递正确的值作为GA事件的标签。如果您想了解哪种表格效果更好,这将非常有用。
  • 点击继续
  • 开火–单击 更多 然后选择一个基于数据层的触发器’ve created before 自定义–新的电子邮件订阅者.
  • 做完了,你’re good to go!

GA事件代码-新的电子邮件订阅者

以下(也是最后一个)步骤是:

  • 在Google跟踪代码管理器预览和调试控制台中检查所有新标记(是否正确触发)
  • 检查Google Analytics(分析)帐户中的实时报告(是否 new_subscriber 事件运作正常)。如果实时报告不起作用, 阅读本故障排除指南.
  • 安装 谷歌 Tag Assistant (在Chrome浏览器中),以确保再营销代码能否正确触发(这里’有关如何使用它的教程 )

更新: 顺便说一句,您可以了解有关自定义事件触发器的更多信息 在此博客文章中。

 

谷歌跟踪代码管理器 Data Layer: Conclusion

如果您阅读了整个Google跟踪代码管理器数据层教程,那么做得很好(谢谢)!如果您在不阅读全部内容的情况下跳到摘要,我建议将此页面加为书签,以便稍后使用。

在本Google跟踪代码管理器数据层教程中,我’ve解释了什么是数据层的关键概念,为什么要打扰进一步了解它,为什么它很重要等。’阅读本指南并向下滚动至结论,然后 扰流板警报,’s SUPER IMPORTANT.

简而言之,这里’数据层是什么以及它如何工作:

  • 数据层是网站的中心位置(虚拟层),您,开发人员可以使用各种工具来存储数据(关于用户,其行为等)。 谷歌跟踪代码管理器从那里读取该信息,并将其进一步发送给其他工具,例如Google Analytics(分析),Google Ads,Facebook等。
  • 数据层并不是保存数据的服务器上的神奇地方。它’s是一个临时数据存储区,它是在GTM加载后创建的,并且每当刷新页面或关闭页面时都会被完全擦除。
  • 在页面上加载Google跟踪代码管理器代码后,会自动创建数据层。
  • 如果要在数据层中包含一些自定义数据,则必须使用 窗口。dataLayer.push 推送数据的方法。如果你不这样做’不知道如何编码,请开发人员执行此操作,或寻找可以做到这一点的第三方插件/工具。
  • 默认情况下,Google跟踪代码管理器无法识别DL中的自定义数据存储,因此您需要在GTM中创建数据层变量。对于数据层事件,还必须创建 自订活动 触发器。
  • 最后,您可以在Google跟踪代码管理器中随意在代码中插入数据层变量,例如Google Analytics(分析)事件代码,自定义HTML代码等。变量必须用大括号{{}}括起来。

Is there anything I missed in this 谷歌跟踪代码管理器 Data Layer tutorial? 让 me know in the comments section below.

 

 

朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
在 谷歌跟踪代码管理器 Tips
35条评论
凯文·汤姆森
  • 2017年12月5日
  • 回复

朱利叶斯的细节!我要添加的最高提示-小心用逗号分隔的dataLayer值,它们会破坏跟踪。例如,在电子商务数据层中包含逗号的产品类别将导致Google Analytics(分析)中不会记录任何交易数据。

    朱利叶斯·美联储
    • 2017年12月6日
    • 回复

    谢谢你的提示!

索拉·帕里克(Saurabh Parikh)
  • 2018年7月27日
  • 回复

我的一位客户希望在Google Analytics(分析)中将部门添加为自定义维度,因此我在产品和购物车页面上添加了数据层脚本。部门数据层以数组形式获取值,但在Google Analytics(分析)报告中以字符串形式显示值时。

“ DL-部门数据层变量数组['枕头','羽绒被','枕头','床垫']”

所以您能建议我如何在购物车页面中再次获取每个部门的产品页面时如何为数组创建和定义数据层。

    朱利叶斯
    • 2018年7月27日
    • 回复

    嗨,Google Analytics(分析)自定义维度只能是字符串,不支持数组。

      索拉·帕里克(Saurabh Parikh)
      • 2018年7月31日
      • 回复

      你好朱利叶斯,

      感谢您的回复。

      我们还有其他方法可以将购物车页面中具有多个部门价值的个人添加到Google Analytics(分析)中吗?

        朱利叶斯
        • 2018年7月31日
        • 回复

        并不是真的:(您可以发送包含该数据的字符串,但是很可能不会很有用。

          索拉·帕里克(Saurabh Parikh)
          • 2018年7月31日

          的确,我们得到了数据,但是当我们为产品性能创建自定义报告时,我们发现了多个部门。因此,我们无法分析我们正在考虑的实际报告。

西莫·阿哈瓦(Simo Ahava)
  • 2018年9月29日
  • 回复

你好朱利叶斯,

You've slightly misunderstood how 数据层变量 versions work (see: //www.simoahava.com/gtm-tips/data-layer-variable-versions-explained/).

当您使用版本1时,此语句不正确:

“每次将数据推送到数据层时,它将覆盖整个对象。”

当对任何给定的数据层密钥使用版本1时,这仅表示该密钥的值不会在后续的推送中合并(与版本1不同)。

所以如果你这样做

窗口。dataLayer.push({
pagePost:{
作者:'Julius'
},
pageTitle:“某些标题”
});

再过一会儿

窗口。dataLayer.push({
pagePost:{
字数:1000
}
});

如果“ pagePost”是版本1的数据层变量,则在第一次推送时它将返回{author:'Julius'},在第二次推送时将返回{wordCount:1000}。如果是版本2,则第二次推送将返回{author:'Julius',wordCount:1000},因为密钥是递归合并的。

如果“ pageTitle”是版本1的数据层变量,则在第一次推送后返回“ Some Title”,在第二次推送后还返回“ Some Title”。因此,第二次推送不会*覆盖*整个对象。在版本1中,修改了单个键的处理方式,而不是将整个对象推入dataLayer。

希望这可以解决。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2018年9月29日
    • 回复

    嘿Simo,

    是的,我后来才意识到版本1影响键,而不是整个对象。但是,错过了更新帖子的机会。我现在就做。再次感谢您的支持。

    干杯

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2018年9月29日
    • 回复

    我敢打赌,博客上将会有更多的地方过时了(相对于我现在知道的信息)。我希望这一天能完成,这是一项艰巨的任务。

维巴夫
  • 2018年11月2日
  • 回复

我有一个关于dataLayer变量的问题。当将数据提交给GTM并进行分析时(当我们在GTM中查看提交的数据时),它使我们能够访问提交的变量值。除了使用标准变量的自定义变量外,我们还可以获取PageURL信息。
If I would like to restrict submission of complete URL with query string to GTM (e.g. if page access URL 是 //yordomain.com/a.aspx?id=12345678 then I would like to submit only URL as //yourdomain.com/a.aspx) then what changes are needed, Is it possible or not?

请提出建议。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2018年11月2日
    • 回复

    如果您要处理网址的特定部分,则应使用 GTM中的网址变量.

j
  • 2018年12月10日
  • 回复

你好,

感谢您撰写此博客。我现在面临数据层的问题。我希望有人可以帮我解决这个问题:我的问题是这样的:在我的WordPress网站上,当用户创建评论时,单击“提交”按钮,当单击时,通过代码我按下了事件“添加评论”到数据层。但是,当单击按钮提交时,页面也会重新加载,并且在我的头文件file.php中,该页面随每个页面一起加载,并在GTM代码之前在此处重新创建数据层。因此,基本上我的事件“添加评论”不会触发Google Analytics(分析)平台。那么如何在重新加载页面时阻止数据层刷新呢?或者,如何确保每个会话只有一个数据层,并且在用户导航到另一个页面时不重新加载它?

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2018年12月10日
    • 回复

    dataLayer不会刷新您的页面。注释提交确实可以(所以,解决方案之一,我想可能是注释提交和页面刷新之间的超时(应该在您的php代码中处理。我不是编码人员,所以在这里我不能为您提供帮助)。

    的 other solution could be to use transport: beacon setting in your GA tags. This 是 not supported on all browsers but in general, the support 是 pretty decent. Check this guide for more info //www.simoahava.com/analytics/leverage-usebeacon-beforeunload-google-analytics/ (it mentions useBeacon but also directs to the most recent solution, transport: beacon).

    在实际关闭浏览器标签/窗口之前,将为GA标签提供适当的触发时间

桑尼
  • 2018年12月21日
  • 回复

感谢您的详细介绍!我有一个问题。

自定义事件值'new_subscriber'

触发– new_subscriber。您需要输入在“预览和调试”控制台中看到的事件的确切标题。

如果将事件值设置为嵌套数据层,例如,如何设置确切的标题

“事件”:[{
'名称':'pageView',
'类别':'服装',
'价格':11.99,
“数量”:1
},{
'名称':'formView',
'类别':'服装',
'价格':9.99,
'数量':2
}]

如果数据层中只有一个事件,则在跟踪代码管理器中,自定义事件似乎会在事件的标题中放置一个。如果数据层中有多个事件怎么办?任何想法?

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2019年2月1日
    • 回复

    只有在字符串中,“事件”才在GTM中起作用。如果您的“事件”是数组,则触发器将不起作用。

海尔德
  • 一月31 2019
  • 回复

你好

对于营销人员来说,这仍然是一种非常复杂的语言。我读到的有关Ecommerce GTM的所有文章都是写给开发人员或了解该语言的人的,所以这是。我真的需要更基本的东西。它就像,一个市场商人,我对代码或gtm一无所知。我该如何逐步在GTM上设置我的GA电子商务跟踪?我现在不想成为专家,我只想获取此设置。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 一月31 2019
    • 回复

    嘿,电子商务跟踪不是在公园散步。如果您认为对数据层的这种解释很复杂(在本文中),那么我有一个坏消息:如果您计划仅自己实施电子商务跟踪,事情将会变得更加复杂。

    GTM是一种简单的工具,可用于执行基本操作,例如单击轨迹,滚动,视频交互(在大多数情况下)等。但是有些事情比较复杂,甚至可能需要一些编码基础。

    GTM并不是完全替代开发人员的魔术工具。在某些情况下,您将需要与开发人员并肩工作。 dataLayer实现(包括电子商务跟踪)是非常需要开发人员输入的情况之一。

    Here's a guide on how to implement standard ecommerce in GA - //www.toddblog.net/post/ecommerce-tracking-with-google-tag-manager/

    它比使用GTN的增强型电子商务跟踪要简单100倍。

    而且,如果您不想花时间学习或成为专家,而只是想把事情做好,也许您应该聘请专业人员。同时,您可以专注于其他与您的业务有关的事情。

海尔德
  • 2019年2月1日
  • 回复

我确实想了解一点。我已经开始了一些基本活动,并准备与开发人员团队一起设置电子商务跟踪。但是,当然,他们不知道我要测量什么,我必须给他们一些指令,例如我要跟踪的内容中包含什么数据层等等。它一定不是火箭科学的生面团,我将设法解决这个问题,但是我很高兴找到一些信息,这些信息确实可以帮助merketeer完成这项任务,并且不会使其变得更加复杂。感谢本文,但我认为标准跟踪不会做到这一点。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2019年2月1日
    • 回复

    知道了请记住,增强型电子商务是要实施的最困难的Google Analytics(分析)功能,因此对于刚刚起步的营销人员来说,这并不是步行之遥。最终,您将不得不更深入地研究并理解什么是数据层,它如何工作以及如何指示开发人员在哪里实现它。

库珀
  • 2019年12月26日
  • 回复

Set up 和 tested, however, datalayer data 是 not making it into GA. I've got a question in the GTM community with details //support.google.com/tagmanager/thread/23223689?hl=en

不知道为什么它不起作用,似乎没有其他人能够提供帮助。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2019年12月27日
    • 回复

    在该线程中,您实际上没有回答Simo提出的问题。您的Google Analytics(分析)综合浏览量标记的确切触发条件是什么?是所有页面吗?如果是,那么您的数据层变量将不起作用。为什么?因为您是在该数据层数据可用之前发送Pageview的。

    您的选择:
    1.在DOM就绪触发器而不是Pageview上触发您的GA pageview标记。
    2.在dataLayer.push中包含“事件”键(例如,“事件”:“ pageData”),然后创建一个使用pageData自定义事件的自定义事件触发器。使用它作为浏览量标记的触发条件。

    想象一下-您的自定义数据层信息仅在其中显示“消息”(以及所有事件开始)。您在“页面视图”上触发页面视图标签。这发生在预览模式下的“消息”之前。您基本上是在告诉GA浏览量代码获取当时尚不存在的数据层信息。
    (这是基于您的浏览量标记在“所有页面”触发器上触发的猜测)。

亚当·奥唐奈
  • 2020年1月31日
  • 回复

嘿,在dataLayer中可以有多少个值?有一个旅行站点,其中包含大量的过滤器和数据点,这些数据点最容易在dataLayer中进行跟踪,但是不确定我是否应该牢记硬(或实用)限制。

再次感谢。很棒的帖子。我已经阅读并重新阅读了两年了。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2020年1月31日
    • 回复

    我知道在预览和调试模式下没有最后300个dalaLayer.pushes的限制(没有严重的意义)。关于DL中的数据点数量,我不知道限制(但这并不意味着没有限制)。我只是从未遇到过。

      亚当·奥唐奈
      • 2020年2月1日
      • 回复

      谢谢。我认为我们不会超过100-150,所以希望我们会好起来。

马吉德
  • 2020年2月25日
  • 回复

您好,您是Google跟踪代码管理器和Google Analytics(分析)的最佳代表。我在这个网站上学到了很多东西,我是一名初级的Web开发人员,并且遇到了一个问题,我想在机票和酒店预订网站上实施Google跟踪代码管理器和Google Analytics(分析),要求是我想跟踪用户搜索了什么在搜索框中,例如在预订机票的情况下,我想跟踪出发地和目的地,日期和时间以及想要乘坐该航班的乘客人数。提交搜索表单后,提交搜索表单后会向用户显示哪个航班,以及哪个用户从列表(搜索结果)中进行选择。之后,用户转到添加乘客详细信息页面并支付金额并转到确认页面。
我不知道的第一件事是可以跟踪用户的搜索查询以及向用户显示的航班。我也可以在这种情况下实施电子商务或增强电子商务,或者可以有一些其他好的选择。
您的回应对我会非常有帮助
谢谢

    亚当·奥唐奈
    • 2020年2月25日
    • 回复

    绝对不是一两个步骤的解决方案。为了跟踪搜索框,您可能需要将这些值存储在数据层中。然后,您可以使用Google跟踪代码管理器中的变量将它们传递到GA。对于用户选择的航班,您可以设置事件,以在用户单击“选择”或任何其他内容时捕获值。但是我可能也会在这里利用数据层。您还提到了下一步,基本上就是销售渠道。您可以设定目标来跟踪用途是否符合1> 2 >3,等步骤过程完成购买。如果您的渠道不太复杂,这将很容易。否则,除了跟踪URL外,您还可以使用事件。

      马吉德
      • 2020年2月26日
      • 回复

      非常感谢Adam O'Donnell,作为一名初级Web开发人员,我了解数据层的概念,我知道如何在数据层中设置值以及如何在Google跟踪代码管理器中获取单个数据层变量的值。但是问题是我将如何在Google Analytics(分析)中看到数据层的所有值。下面的数据层是飞行搜索表单的圆顶数据层。
      dataLayer.push({
      'form_type':'flight_search_form',
      'origin':'英国伦敦((LON)-所有机场),
      “目的地”:“阿拉伯联合酋长国迪拜(DXB)-迪拜国际机场”,
      '出发':'03 / 17/2020',
      'return':'03 / 19/2020',
      'trip_type':'往返',
      'travellers':'2',
      'class':'business',
      '货币:美元',

      })
      现在我知道如何一一获取数据层中所有变量的值。但我不知道是否可以在Google跟踪代码管理器的一个变量中添加完整的数据层?我可以将变量附加到“搜索表单提交”事件,但是有没有完整的图表或表格可以显示我哪些查询用户搜索了哪些航班,哪些航班显示给该用户,以及他是否去了确认预订。我的主要问题是如何查看Google Analytics(分析)中搜索表单提交事件中数据层中推送的所有数据。
      希望你能理解这个问题。

马吉德
  • 2020年2月26日
  • 回复

非常感谢Adam O'Donnell,作为一名初级Web开发人员,我了解数据层的概念,我知道如何在数据层中设置值以及如何在Google跟踪代码管理器中获取单个数据层变量的值。但是问题是我将如何在Google Analytics(分析)中看到数据层的所有值。下面的数据层是飞行搜索表单的圆顶数据层。
dataLayer.push({
'form_type':'flight_search_form',
'origin':'英国伦敦((LON)-所有机场),
“目的地”:“阿拉伯联合酋长国迪拜(DXB)-迪拜国际机场”,
'出发':'03 / 17/2020',
'return':'03 / 19/2020',
'trip_type':'往返',
'travellers':'2',
'class':'business',
'货币:美元',

})
现在我知道如何一一获取数据层中所有变量的值。但我不知道是否可以在Google跟踪代码管理器的一个变量中添加完整的数据层?我可以将变量附加到“搜索表单提交”事件,但是有没有完整的图表或表格可以显示我哪些查询用户搜索了哪些航班,哪些航班显示给该用户,以及他是否去了确认预订。我的主要问题是如何查看Google Analytics(分析)中搜索表单提交事件中数据层中推送的所有数据。
希望你能理解这个问题。

亚当·奥唐奈
  • 2020年2月26日
  • 回复

好吧,朱利叶斯(Julius)或其他人可能有更好的主意,但是我的工作与此非常相似,我只是为它们创建变量,然后如您所说将它们一一提取。您可以同时触发多个事件(或对它们进行排序,以使它们按您想要的顺序进行)。也许一个捕获了航班信息,例如去往,从和日期,然后另一个捕获了航班信息,因此您可以跟踪多少个商务舱与教练或其他事情。您也可以将它们堆叠在一起-即在类别中放置“飞行搜索”,然后动作将位置变量(例如“ {{Flight-Origin}}转换为{{Flight-Destination}}”),然后对您的日期进行相同的操作标签。

但是在您开始进行所有操作之前,我建议您停止思考,考虑一下您需要跟踪什么以及为什么。并不是说您不想跟踪任何事物,而是需要跟踪他们在搜索过程中是否选择了美元?也许我不知道您的需求,但似乎当他们实际购买时我会担心。如果我对您的理解正确,那么您正在跟踪搜索表单,然后将使用电子商务捕获购买的实际详细信息。因此,我要做的是跟踪他们搜索的内容与实际购买的内容。这就是为什么我将目的地与特定类别一起放在eventAction中的原因。对于大多数事件,我在eventLabel中使用时间戳记,因此可以根据需要将会话步骤串在一起。然后,我将进行另一个捕获日期的事件,因为我很感兴趣跟踪人们在寻找旅行选择的距离。但这是不同的报告,因此是不同的事件。

再次,只是我的看法。其他人可能有其他想法。我只想说您的ecomm将捕获所有购买细节。对于搜索数据,您需要考虑实际需要什么以及如何使用它。

马吉德
  • 2020年2月26日
  • 回复

谢谢。我正在尝试添加自定义维度,并将所有数据层变量添加到该自定义维度,我希望这可以给我一些帮助。如果您可以提供比自定义尺寸更好的建议,那么我也可以实施。

    亚当·奥唐奈
    • 2020年2月26日
    • 回复

    您也可以将它们作为自定义尺寸传递。通常通过您的主页视图标记,但是还有其他方法。我只提醒您,您只有20个自定义维度,并且您可能想将其中一些用于客户ID等高优先级的事情。您可以在多个视图中发挥创意,但可能会发粘,因此请小心需要多少个数据层值作为自定义维度。

帕特里克
  • 2020年6月12日
  • 回复

你好

但是开发人员需要修改HTML才能使按钮单击进行推送,对吗?
按钮1

谢谢,
帕特里克

Laurynas
  • 2020年6月23日
  • 回复

感谢您的文章。

我的问题是关于数据的动态性。我从未实现过数据层。除非我看错了,否则所有示例似乎都具有开发人员设置的键值(因为它在''中)。看我要成像的代码,键值应该是一个返回值的变量。我现在不正确吗?

dataLayer.push({
'commentAuthor':'Laurynas'
})

如何知道此评论的作者是“ Laurynas”?

我猜应该是:

//一些获取数据的变量
var commentAuthor =;

dataLayer.push({
'commentAuthor':commentAuthor
})

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
    • 2020年6月25日
    • 回复

    是的,你是对的。在代码中,会有一些变量输出所需的值,例如评论作者的名字。但是在不同的网站上,这些变量的名称将有所不同,因此,我无法为您提供一个非常具体的通用代码示例。

发表评论 取消回复

您的电子邮件地址不会被公开。 必需的地方已做标记 *

 

嗨,我是Julius Fedorovicius 并且在这里可以帮助您学习Google跟踪代码管理器和Google Analytics(分析)(但主要是GTM)。在这个激动人心的旅程中,与其他100 000多个每月访问量和14000多个新闻通讯订阅者一起加入。 阅读更多
基本资源


热门文章
  • -GTM表格追踪:7种有效方法
  • -dataLayer.push:指南
  • -GTM与Google Analytics(分析)
  • -GTM可以做的99件事
  • -常见的GTM错误
  • -数据层:终极指南
  • -适用于GTM的60多种自定义JavaScript
分析狂热
  • 谷歌跟踪代码管理器 Courses
  • 谷歌跟踪代码管理器 Recipes
  • 谷歌跟踪代码管理器 资源资源
  • 谷歌跟踪代码管理器 Community
  • 登录课程
关注Analytics Mania
  • 订阅新闻通讯
  • RSS订阅
最近的帖子
  • 谷歌 Analytics(分析)4中的增强测量:指南
  • Track 联系 Form 7 with 谷歌跟踪代码管理器
  • 在GTM中缺少DOM准备就绪和窗口加载事件?
分析狂热- 谷歌跟踪代码管理器 和 谷歌 Analytics 博客 | 隐私政策
管理Cookie设置



      <time id="a5YhRos"><dfn id="Di9TKzX"><article class="NUvOpnn"><section class="PTpwIGb"></section></article></dfn></time>




              <video class="zv6DkqB"></video>