感谢工作让我在年关还如此积极的学习 GTM!😂 翻自 Simo 大神的 100+ Google Tag Manager Learnings 希望对正在学习 GTM 的同学也有所帮助。

GTM 默认代码 javascript 部分

1
2
3
4
5
6
7
<!-- 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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MBXRJCT');</script>
<!-- End Google Tag Manager -->

1. 添加 Data Layer

默认部署的 GTM 代码里面已经创建好 Datalayer 了,即使你没有通过 Developer 文档里面手动去部署,也可以使用 dataLayer.push() 方法。

2. 加载 GTM library

默认部署的 GTM 代码会自动加载 GTM library:

1
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-MBXRJCT"></script>

3. GTM 可以放在 <head> 里或其他任何地方

放在最前面是为了统计数据更加准备,其实放在其他地方也无所谓,总之就是越早加载越好啦~

4. 初始化 event: ‘gtm.js’

默认部署的 GTM 代码初始化了 event: ‘gtm.js’ 到 Datalayer 中,他会被所有的页面和触发器使用。所有这些你想要抓取的变量都必须在默认 GTM 代码执行之前加到 Datalayer 中。

5. 可以部署多个 GTM Container 到同一个页面中

官方支持: Multiple Containers on a Page

需要注意的是,他们必须使用同一个 Datalayer 名称。

GTM 默认代码 noscript 部分

1
2
3
4
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MBXRJCT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

6. <noscript> 必须在 <body> 开头

<noscript> 必须直接在 <body> 下面,因为这样才能使 Search Console Verification 功能生效。如果你没有这个需求,就可以不用管。如果你连 noscript 的网页都不想监测的话,甚至可以不用部署。不要把他添加到 <head> 就好,因为可能会导致 HTML validation 验证错误。

7. <noscript> 只会在 Browser 关闭了 Javascript 功能才会执行

这个 Tip 如标题。

8. 在 iframe 中加载 Html 页面

<noscript> 里面的 iframe 代码其实是加载了一个 html 页面,里面包含了 GTM 中 non-js 设置的部分功能。

9. 只有 Pageview 触发器可以使用

因为 <noscript> 部分不能运行 JS 方法,所以只有 Pageview Trigger 可以使用。

10. 在触发器中使用 Custom JavaScript variable

在 <iframe> 执行时触发自定义变量:

1
2
3
function() {
return true;
}

这个可以用来检测浏览器有没有执行 Javascript,比如:

判断 JS 代码是否执行

11. 只有 Image 代码可以被执行

在 <noscript> 中,只有 Image 代码可以被执行,比如 GA 的一部分功能还是可以用的,因为 GA 的 Tracking 代码就是一段 image pixel.

12. 可以在 Query Parameter 中使用 Datalayer

此处没看懂,先略过。。。参考 Track Non-JavaScript Visits In Google Analytics

dataLayer

13. 全局 JS 数组

dataLayer 是全局 JS 数组,所以命名的时候可以加上 window. 来防止命名冲突。

14. 你可以使用其他命名来代替 dataLayer

如题。

15. 在 GTM 中只监听 .push() 命令

虽然有.splice(), .slice(), .shift() 和 .pop()这么多方法,但是在 GTM 中只有 .push() 方法可以使用。

16. GTM 只使用纯文本对象

向 GTM 提供数据的最常见方式是使用纯文本对象。每个对象都包含一个或多个键值对。然后将这些键值对解析成 Data Layer variables,就可以在 GTM 中创建这些变量来从 DataLayer 获取值。

1
2
3
4
5
var plainObject = {
someKey: 'someValue',
someOtherKey: 'someOtherValue'
};
window.dataLayer.push(plainObject);

17. 可以将 JS 代码作为键值对的值

1
2
3
4
5
6
7
8
window.dataLayer.push({
type_number: 5,
type_string: 'hello',
type_object: { someKey: 'someValue' },
type_array: [1,2,3,4],
type_function: function() { return 'hello'!; },
type_boolean: true
});

18. 只有 ‘event’ 键值对可以用作触发器

event: ‘someValue’ 这种键值对可以在触发器中使用,其他的仅仅用来传递值而已。

19. .push() 命令可以传递数组

这个 tip 如题。

20. 永远不要覆盖 dataLayer, 使用 .push()

永远不要使用以下语法:

1
var dataLayer = [{...}];

正确使用方法是:

1
2
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({...});

21. dataLayer 数组不超过 300

如题,dataLayer 队列不能超过 300,不然最初始的值会被清除。