DataLayer 是什么?

DataLayer 是一段 JS 数组:

1
2
3
4
5
6
7
8
9
10
11
<script>
dataLayer = [{
'pageCategory': 'Statistics',
'visitorType': 'high-value'
}];
</script>

在 GTM 中经常用到的是包含对象的数组:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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"}
];

使用 CSS Selector 调取参数的方法:

CSS Selector

使用 DataLayer 调取参数的方法:

DataLayer

创建 DataLayer

所以网站开发必须要负责 DataLayer 的创建:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
dataLayer = [{
'pageCategory': 'Statistics',
'visitorType': 'high-value',
’event’:’customizeCart’
}];
</script>

DataLayer 的创建必须在 GTM 默认代码之前,最好在 head 里面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<head>
.
.
.
<script>
dataLayer = [{'pageCategory': 'Statistics','visitorType': 'high-value'}];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager -->

dataLayer.push 方法

DataLayer 变量大小写敏感,Variable name 需要加引号:

1
2
3
4
5
<script>
dataLayer.push({'pageCategory': 'Statistics','visitorType': 'high-value'});
</script>

DataLayer Variable

Event dataLayer variable

1
dataLayer.push({'event': 'event_name'});

然后在对应的 action 上加上 event:

1
<a href="https://www.optimizesmart.com/download" name="pdfDownload" onclick="dataLayer.push({'event': 'pdf-download'});" >PDF download</a>

Dynamic dataLayer Variable

1
dataLayer.push({'variable_name': 'variable_value'});

Dynamic dataLayer Variable 利用全局变量,当对应变量出现,旧货传入其中:

1
2
3
4
5
<script>
dataLayer = [{'pageCategory': 'Statistics','visitorType': 'high-value'}];
</script>

查找网页的 dataLayer

Console

  • gtm.js 表示 gtm library 被加载;
  • gtm.dom 表示 dom ready;
  • gtm.load 表示网页加载完。