Google Tag Manager中的数据层解析

Google Tag Manager Haran 7年前 (2016-11-19) 7052次浏览 5个评论

如果你使用GTM有段时间,那么你应该明白更好的使用GTM需要有HTML、DOM和JS的基础;如果你做过通过GTM部署电子商务或通过GTM部署增强型电子商务模块,你会知道需要开发将相关的数据通过数据层传递给你;如果你使用GTM已经比较长时间,你会知道GTM的真正魅力是变量的使用,如自定义变量,这些都需要编码的基础。
GTM是一个非常强大的工具,而理解数据层是使用GTM的关键。
1、什么是数据层?
数据层简单的数就是用于存储或发送信息给GTM的一个js数组。
定义一个空数据层:

<script>
dataLayer = [];
</script>

定义一个包含变量的数据层:

<script>
dataLayer = [{
‘pageCategory’: ‘Statistics’,
‘visitorType’: ‘high-value’
}];
</script>

如果要更好的理解数据层这概念,你需要明白js的数据和对象。
数据层也常常被称为数据序列,数据对象和数据采集层。

2、理解Js数组来创建数据层
数组是一种特殊的变量,可以一次存储的相同或不同的数据类型的多个元素。变量是一个容器,用于存储数据。 变量可以在不同的时间存储不同的数据。例如,如果 a 是变量的名称,’a’ 可以存储一个值,像 10 和 20 ︰

a = 10
a =20

然而一个变量在一段时间只能存储一个值。如果你想要一个变量来存储多个值在一段时间,然后你需要使用一个特殊的变量,称为数组。数组有一个或多个元素组成。这些元素可以是字符串 (如‘hello’)、 数字值 (例如 10),未定义值、 布尔值 (如True,FALSE)、 其他数组或对象。创建一个数组可以通过使用 array 函数或数组文本符号 []。例如,下面是如何通过数组函数创建的空数组将看起来像︰

var a=new Array();

在这里 ‘a’ 是的数组的名称和 var 命令用于在 JavaScript 中创建数组。你可以给数组任何的命名。例如︰

var myArray = new Array();

你也可以通过数组符合[]来创建新的数组变量,如:

var a= [];
Or
a= [];

所以,你要创建新的数据层数组,会是这样:

dataLayer=[];

因为这个是一个js语句,需要包含在<script>和</scripts>之间,才能插入html文件中。最后的写法会是这样:

<script>
dataLayer=[];
</script>

现在我们继续创建一个新的数组变量,包含三个元素:

a=[“hi”,”bye”,”good bye”];

上面是一个数据变量名为a,包含三个元素,分别是“hi”,“bye”和“good bye”,三个元素都用字符型格式存储,我们称之为字符串数组。同理,你可以创建一个新的数组变量,包含三个数值:

a=[10,24,56];

三个元素都是数字值,我们称之为数值型数组。你也可以创建一个包含不同类型元素的数组,如:

a1=[“hi”,”bye”,”good bye”, 10, 20, 56];

上面是一个包含6个元素的数组,元素中包含字符串和数字。下面定义另一个数组

a2=[“hi”,10,”bye”,20, 56,”good bye”];

a1和a2拥有相同的元素,但是顺序不同,两者数组是不一样的。
其他数组例子

a=[,,,] // 未定义值的数组,中间用逗号隔开
a=[true,false] //布尔型数组
a=[[“Clasicos”,57],[“Zapatos”,456]] //嵌套数组

下面是一个包含一个对象的数组:

a=[{“id”:”20″,”name”:”Zapatos”}];

下面是一个包含两个对象的数组:

a=[{“id”:”20″,”name”:”Zapatos”},{“id”:”53″,”name”:”Masculino”}];

为了提高可读性,我们一般写成:

a=[
{“id”:”20″,”name”:”Zapatos”},
{“id”:”53″,”name”:”Masculino”},
];

下面是包含多对象的数组:

a=[
{“id”:”20″,”name”:”Zapatos”},
{“id”:”53″,”name”:”Masculino”},
{“id”:”57″,”name”:”Clasicos”},
{“id”:”138″,”name”:”Deportes”},
{“id”:”139″,”name”:”Masculino”}
{“id”:”201″,”name”:”Zapatos”},
{“id”:”1244″,”name”:”Mocasines”},
{“id”:”1340″,”name”:”Apaches”}
];

你也可以再一个数组中存放所有的数据类型:

a=[“size”, 10, true,,[“Clasicos”,57],{“id”:”20″,”name”:”Zapatos”}];

size是字符串
10是数值
true是布尔型
[“Clasicos”,57]是数组
{“id”:”20″,”name”:”Zapatos”}是对象
为了提高可读性,写成:

a=[
“size”,
10,
true,
[“Clasicos”,57],
{“id”:”20″,”name”:”Zapatos”}
];

因为数据层是js数组,所以我们可以这样创建数据层:

dataLayer=[
“size”,
10,
true,
[“Clasicos”,57],
{“id”:”20″,”name”:”Zapatos”}
];

数据层用于 GTM 通常是单个对象的数组︰ dataLayer = [{}…];

3、理解 Javascript 对象创建数据层
Javascript 对象是一个包含属性和方法变量。下面是创建js对象的语法:

<object-name>={“property1”:value1, “property2″:value2, …..”propertyN”:valueN};

这里的属性可以任何字符串或标识符,标识符是保留字段,代表特殊的意思,不能用于变量名命名。如event就是一个标识符
属性的值可以是:

string
numeric value
undefined value
boolean value
array
multi dimensional array
object
array of objects.

下面是创建一个空对象,没有属性:

a={};

这里的js对象名为a,你可以给它任何命名。下面是一个包含四个属性的对象:

user={“firstName”:”John”, “lastName”:”Marshall”, “age”:85, “eyeColor”:”blue”};

为了提高可读性,写成:

user={
“firstName”:”John”,
“lastName”:”Marshall”,
“age”:45,
“eyeColor”:”blue”
};

其他js对象例子:

a = {“color”:”Caf\u00e9″};

这里的color是对象a的属性,Caf\u00e9是的对象a的值,是个字符串

a = {“price”:164900.00};

price是对象a的属性,164900.00是对象a的值,是个数值型

a = {“color”:”Caf\u00e9″, “price”:164900.00};

这个对象包含两个属性,分别是color和price,同理,我们可以定义个多属性对象:

a = {
“color”:”Caf\u00e9″, // the value is of type ‘string’
“price”:164900.00, // the value is of type ‘numeric’
“sizeList”:””, // the value is of type ‘undefined’
“visitorsHasOrders”:true, // the value is of type ‘boolean’
“data”:[45,67,89,20], // the value is of type ‘array’
“shoppingCart”:[[“Clasicos”,57],[“Zapatos”,456]], // the value is of type ‘multi dimensional array’
“pageAttributes”:{“page”:”product”}, // the value is of type ‘object’
“pageCategory”:[ // the value is of type ‘array of objects’
{“id”:”20″,”name”:”Zapatos”},
{“id”:”53″,”name”:”Masculino”},
{“id”:”57″,”name”:”Clasicos”},
{“id”:”138″,”name”:”Deportes”},
{“id”:”139″,”name”:”Masculino”}
{“id”:”201″,”name”:”Zapatos”},
{“id”:”1244″,”name”:”Mocasines”},
{“id”:”1340″,”name”:”Apaches”}
]

};

在数据层中就是:

dataLayer=[ {
“color”:”Caf\u00e9″,
“price”:164900.00,
“sizeList”:””,
“visitorsHasOrders”:true,
“data”:[45,67,89,20],
“shoppingCart”:[[“Clasicos”,57],[“Zapatos”,456]],
“pageAttributes”:{“page”:”product”},
“pageCategory”:[
{“id”:”20″,”name”:”Zapatos”},
{“id”:”53″,”name”:”Masculino”},
{“id”:”57″,”name”:”Clasicos”},
{“id”:”138″,”name”:”Deportes”},
{“id”:”139″,”name”:”Masculino”}
{“id”:”201″,”name”:”Zapatos”},
{“id”:”1244″,”name”:”Mocasines”},
{“id”:”1340″,”name”:”Apaches”}
]
}];

数据层可以变得更复杂,当它包含服务端脚本的时候,通过脚本组装数据层。从下面是一个通过服务端脚本生成的数据层:
Google Tag Manager中的数据层解析
这节需要记住的是:
a=[] //创建一个数组
a={} //创建一个对象
a[{}] //创建一个包含一个对象的数组
数据层在GTM就是一个包含一个对象的数组
dataLayer = [{}];

4、为什么我们需要数据层?
在GTM的文档中,数据层是用来收集网站数据的。GTM可以直接在页面的html中通过js遍历html dom提取数据
Google Tag Manager中的数据层解析
默认情况下,GTM是通过页面的html提取数据,再把它推送带营销或分析的标签中,现在这种方法的问题是:HTML(HTML DOM)可能在你不知情的情况下在任何时间改变,网站也可以在任何时间更新,标签页可以在没有事前通知的情况下停止工作。
若要解决这个问题,我们创建和使用数据层,存储我们想要收集关于 web 页面的所有信息。一旦您设置了一个数据层,容器标签从其 HTML 页面的数据层提取数据
所以无论HTML DOM发生什么事,数据层将保持不变,您的标签将继续工作 (除非当然有人破坏数据层本身)。

5、Data Layer vs DOM Scraping

6、什么是数据层变量?
数据层中的变量格式是:可以:“key:value”,以下是示例数据层包含没有变量︰

<script>
dataLayer = [{}];
</script>

以下是示例数据层,其中包含一个变量︰

<script>
dataLayer = [{‘pageCategory’: ‘Statistics’}];
</script>

以下是示例数据层,其中包含两个变量︰

<script>
dataLayer = [{‘pageCategory’: ‘Statistics’, ‘visitorType’: ‘high-value’}];
</script>

也可以写成:

<script>
dataLayer = [{
‘pageCategory’: ‘Statistics’,
‘visitorType’: ‘high-value’
}];
</script>

以下是示例数据层,其中包含三个变量︰

<script>
dataLayer = [{
‘pageCategory’: ‘Statistics’,
‘visitorType’: ‘high-value’,
’event’:’customizeCart’
}];
</script>

上面的PageCategory, visitorType和 event 就是数据层变量,Statisitcs’, ‘High Value’和 ‘customizeCart’分别是她们的值。
7、如何初始化数据层?
通过设置您的数据层中的变量。初始化一个变量数据层︰

<script>
dataLayer = [{‘pageCategory’: ‘Statistics’}];
</script>

初始化两个变量数据层︰

<script>
dataLayer = [{
‘pageCategory’: ‘Statistics’,
‘visitorType’: ‘high-value’
}];
</script>

初始化三个变量数据层︰

<script>
dataLayer = [{
‘pageCategory’: ‘Statistics’,
‘visitorType’: ‘high-value’,
’event’:’customizeCart’
}];
</script>

增加或复制消息到数据层序列就是给数据层增加变量
更新数据层就是增加/更新/删除数据层变量
推送消息到数据层就是增加数据层变量到数据层
上面的消息就是数据

8、如何推送数据仅数据层?
如果数据层已硬编码到 web 页上,那么某条信息在数据层是可用的了。其他的可以通过数据层对象的push方法动态推送数据。一次可以推送对个数据变量,下面是push的使用语法:

dataLayer.push({‘variable_name’: ‘variable_value’});

例如,让我们假设以下数据层是硬编码的 web 页上︰

<script>
dataLayer = [{‘pageCategory’: ‘Statistics’}];
</script>

现在整个数据层包含一个变变量,如果用以下push方法:

<script>
dataLayer.push({‘visitorType’: ‘high-value’});
</script>

硬编码将会是:

<script>
dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];
</script>

如果用动态推送,每次增加一个变量,形式如:

<script>
dataLayer.push({‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’});
</script>

形式上看上去是两个一次,但实际上是每次推送一个,逐个推送。

9、什么格式的数才能通过数据层推送?
推送到数据层的数据必须是前后端统一,GTM能够解析的。如果你在电子商务模块推送的数据不能被GTM解析,GTM将没法正常使用:

<script>
dataLayer = [{
‘Transaction Id‘: ‘1234’,
.
.
.
}]
}];
</script>

GTM将如法识别Transaction Id,正确的语法是:

<script>
dataLayer = [{
‘transactionId’: ‘1234’
.
.
.
}]
}];
</script>

‘transactionId’ 就是标识符 (保留字)。所以它有着特殊的意义,它不可以用作常规的变量名称。
原文:https://www.optimizesmart.com/google-tag-manager-data-layer-explained-like-never/


如有疑问,可以在文章底部留言或邮件(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