Google Tag Manager中的数据层解析

如果你使用GTM有段时间，那么你应该明白更好的使用GTM需要有HTML、DOM和JS的基础；如果你做过通过GTM部署电子商务或通过GTM部署增强型电子商务模块，你会知道需要开发将相关的数据通过数据层传递给你；如果你使用GTM已经比较长时间，你会知道GTM的真正魅力是变量的使用，如自定义变量，这些都需要编码的基础。

GTM是一个非常强大的工具，而理解数据层是使用GTM的关键。

什么是数据层

数据层简单的数就是用于存储或发送信息给GTM的一个JavaScript数组。
接下来定义一个空数据层：

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

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

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

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

理解JavaScript数组来创建数据层

数组是一种特殊的变量，可以一次存储的相同或不同的数据类型的多个元素。变量是一个容器，用于存储数据。 变量可以在不同的时间存储不同的数据。例如，如果 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 = [{}…];

理解 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”}
]
}];

数据层可以变得更复杂，当它包含服务端脚本的时候，通过脚本组装数据层。从下面是一个通过服务端脚本生成的数据层：

这节需要记住的是:
a=[] //创建一个数组
a={} //创建一个对象
a[{}] //创建一个包含一个对象的数组
数据层在GTM就是一个包含一个对象的数组
dataLayer = [{}];

为什么我们需要数据层？

在GTM的文档中，数据层是用来收集网站数据的。GTM可以直接在页面的html中通过js遍历html dom提取数据

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

什么是数据层变量

数据层中的变量格式是：可以：“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’分别是她们的值。

如何初始化数据层

通过设置您的数据层中的变量。初始化一个变量数据层︰

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

初始化两个变量数据层︰

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

初始化三个变量数据层︰

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

如何推送数据仅数据层

如果数据层已硬编码到 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>

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

什么格式的数才能通过数据层推送

推送到数据层的数据必须是前后端统一，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/