翻自Simo 大神的 100+ Google Tag Manager Learnings

Custom HTML tags

66. Custom HTML tags 会自动压缩 JS 文件

如题,在 GTM 中 Custom HTML tags 写的 JS 文件会自动压缩。不上图了。

67. Custom HTML 的内容默认加在 body 的最后

如果想要在其他地方执行 Custom HTML 代码,需要些 JS,并且通过 DOM 方法指定好位置。

68. 可以添加任何 HTML 元素

如题,可以添加例如:meta, link, style, video, script 等等,甚至通过 JavaScript DOM 去删除页面上一些已有的内容。

69. 记住勾选 document.write

如果你写的代码中包含 ‘document.write’,记住勾选 ‘Support document.write’。

Document Write

如果不勾选,你可能就会把整个网站都覆盖掉。。。非常危险!具体参考下 Simo 的另一篇文章 Using document.write Safely In GTM Tags

70. 变量会自动重命名

你在重命名 GTM 变量时,不用担心 Custom HTML 中出现语法错误。变量的新名称会自动应用到 GTM 中的所有地方。

Built-in variables

71. 一些功能需要手动开启

内置的默认 variables 只有 Event, Page URL, Page Path, Page Hostname 和 Referrer.

其他的需要点击 Configure 手动开启:

Built-in variables

72. Click 和 Form 是相同的

在 Built-in variables 中你可以看到 6 个变量:

Click/Form Element, Click/Form ID, Click/Form URL, Click/Form Target, Click/Form Classes, Click/Form Text。

其实这里的 Click 和 Form 的作用是相同的。

Custom JavaScript variables

73. 必须是匿名函数

如题,必须是匿名函数,为什么?不匿名,谁来帮你调用啊???

1
2
3
4
5
6
7
8
9
// 别用这个:
function clickTextLowercase() {
return {{Click Text}}.toLowerCase();
}
// 用这个:
function() {
return {{Click Text}}.toLowerCase();
}

74. 必须有 return

1
2
3
4
5
6
7
8
9
10
// 不工作:
function() {
if (true) {}
}
// 工作:
function() {
if (true) {}
return;
}

75. 可以返回另一个方法

支持闭包函数:

例如定义变量 JS - ReverseString 来反转字符代码:

1
2
3
4
5
function() {
return function(str) {
return str.split('').reverse().join('');
};
}

然后将他用到其他 custom html 或者 javascript 中:

1
2
3
4
5
6
7
8
9
10
<script>
(function() {
// Create a reference to the Custom JavaScript variable we just created
var reverseString = {{JS - ReverseString}}
window.dataLayer.push({
event: 'reverseComplete',
reversedString: reverseString("Reverse me!")
});
})();
</script>

76. 避免副作用

有一些规则:

  • 不要在 window 命名空间下做修改,创建,删除操作
  • 不要创建,处理自定义HTTP请求
  • 不要去设置或者删除全局使用的 API, 比如 dataLayer, google_tag_manager, document.cookie 和 localStorage。

77. 可以使用其他变量

如题:

1
2
3
4
function() {
var hostname = {{Page Hostname}};
return hostname === 'www.domain.com' ? 'Main domain' : 'Other domain';
}

Tag sequencing

78. 选择的 Setup 和 Cleanup 都会触发

添加的 Setup 和 Cleanup tag 都会触发添加的代码,不管它原来的代码是什么。所以添加时,需要注意不要误触发其他的代码。

tag Sequence

79. onHtmlSuccess() 和 onHtmlFailure() 方法

使用 GTM Custom HTML 来监测 Setup 或者 Main tag 是否触发成功。首先,需要要开启 Container ID 和 HTML ID 功能。示例:

1
2
3
4
5
6
7
8
9
10
11
<script>
(function($) {
$.post('/test.php')
.done(function() {
google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});
})
.fail(function() {
google_tag_manager[{{Container ID}}].onHtmlFailure({{HTML ID}});
});
})(jQuery);
</script>

80. dataLayer.set() 功能

dataLayer.set() 方法可以在 GTM 变量冻结之后,还可以进行便来修改。

1
google_tag_manager[{{Container ID}}].dataLayer.set('keyName', 'value')

Tag settings

81. Tag firing options

  • Unlimited 代表触发器被触发,代码就触发。
  • Once per event 代表代码会在 trigger event 触发,意思是当代码在同一个页面满足多个触发器的触发条件时,只触发一次。
  • Once per page 代表代码只会在每页加载时触发一次。

Tag firing options

82. Tag 优先级是针对单个GTM event 的

触发事件发生时,GTM 会按优先顺序执行代码。代码优先级仅确定标签开始执行的顺序。对它们何时完成并没有什么影响。代码首先开始执行,它可能会涉及一个漫长而复杂的异步过程,只有在优先级顺序中的标签已经完成之后,它才会结束。

Workspaces

83. GTM 至少有一个工作区

如题,即使你删除了所有的工作区,GTM 还是会为你保留一个。

84. 版本与工作区的关系

一旦你创建了一个版本,就好像工作空间不存在一样。所以工作区不能作为永久的容器,当 publish 产生新的 version,工作区应该作为版本控制系统的分支来处理。

当你尝试新的功能时,创建新的工作区,直到选择创建新版本并将更改合并到最新的容器版本。

85. 更新工作区

当 GTM 产生新的版本时,你会在你的工作区看到如下提示:

update workspace

你不需要立即更新,在你准备好创建新的版本时,在点击这个提示。其实最好早点更新,因为一旦更新堆积,你就要一次性解决所有的冲突。