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

Enhanced Ecommerce

44. Ecommerce key 使用的 Version1

Ecoomerce

确保每次调用 dataLayer 都触发 Tag,不然 variable 不会再被调用。为了确保变量正确被抓取,要使用 event dataLayer variable,并且触发器选择 Custom Event Trigger。

45. 要求语法准确

原话:

“It must have all the required keys, it must be structured correctly, and it must obey certain limitations to the structure”

具体细节在文章 Enhanced Ecommerce Tips And Learnings

46. dataLayer 使用数值来传递货币

因为 dataLayer 中没有 Currency Type,所以使用 decimal character 来表示货币。

47. 产品维度和指标

Product-scoped Custom Dimensions and Metrics 必须在 “products” 数组中,维度和指标必须命名为 “dimensionX” 和 “metricX”, X 对应 GA 中设置的对应的 “dimensionX” 和 “metricX”。例子:

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
{
ecommerce: {
purchase: {
actionField: {
...
},
products: [{
id: '1',
name: 'Shirt',
dimension1: 'Red',
metric1: 132,
quantity: 1,
price: '10.99'
},{
id: '2',
name: 'Pants',
dimension1: 'Black',
dimension2: 'Adidas',
metric1: 133,
quantity: 1,
price: '13.99'
}]
}
}
}

48. 使用 Custom JavaScript variable 比 dataLayer 更好

因为 Enhanced Ecommerce 数据不仅仅是 GA 要使用,其他的数据平台也可能要求同样的数据内容,使用 dataLayer 就要求遵守严格的数据结构,这对其他平台来说是不方便的,不如使用 Custom JavaScript variable 来的灵活。例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function() {
var order = {{DLV - Order}};
return {
ecommerce: {
purchase: {
actionField: {
id: order.orderId,
revenue: order.price.totalWithTax,
tax: order.price.taxValue,
affiliation: order.store.name
},
products: [order.productsForGTM]
}
}
};
}

Custom javascript variable

Triggers 触发器

49. 在 Trigger 中使用 Variable

Variable 只能放在前面,不能用在筛选条件:

Variables in triggers

50. 使用 Custom JavaScript variable 来查询动态值

例如使用点击的 url 包不包含当前的 page hostname:

1
2
3
function() {
return {{Click URL}}.indexOf({{Page Hostname}}) > -1;
}

如果返回 true 代表包含,false 代表不包含, 不包含的话就是代表跳出:

Dynamic trigger variable

51. Custom Event trigger

在 Trigger 中使用 dataLayer variable 时需要 event key, 这之中只有 Custom Event trigger 需要声明 “event” 的值:

Custom Event

基本的触发类型:

  • DOM Ready - gtm.dom

  • Page View - gtm.js

  • Window Loaded - gtm.load

  • Click / All Elements - gtm.click

  • Click / Just Links - gtm.linkClick

  • Form submission - gtm.formSubmit

  • History Change - gtm.historyChange

  • JavaScript Error - gtm.pageError

  • Timer - gtm.timer

  • Scroll Depth - gtm.scrollDepth

  • YouTube Video - gtm.video

52. 多个 trigger conditions 是 and,多个 triggers 一起用是 or

Multiple conditions

53. 使用 Regex 和 Custom JavaScript variable 来做更高级的筛选

正则表达式:

Regex

Custom JavaScript variable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function() {
var hn = {{Page Hostname}},
ut = {{DLV - userType}};
if (hn === 'www.mydomain.com' && ut === 'visitor') {
return 'visitor';
}
if (hn === 'www.mydomain.com' && ut === 'member') {
return 'member';
}
if (hn === 'www.other-domain.com' && ut === 'loyal') {
return 'loyal';
}
return 'other';
}

Auto-event trigger

54. Just link 监听 a 标签

例如一下在吗会被 just link 监听:

1
2
3
4
5
<div id="content">
<a href="https://www.google.com/">
<span>Google</span>
</a>
</div>

55. All Elements listens to all clicks

All Elements 监听所有的点击行为,并且返回所有的点击行为。

56. Form Submission 监听 form 的 submit 事件

Form 的监听是最有难度的,因为通过 JS 实现表单提交的方法很多,只有具体问题具体分析,没有单一的规则可以套用。

57. History Change 监听与 browser history API 交互的行为

History Change trigger 监听 browser history API 事件:hashchange, pushState, replaceState 和 popstate。

58. Error trigger 监听 Javascript 异常

try…catch 方法会导致这个 trigger 失效。

Custom JavaScript variables 也会自动捕获 Javascript 异常,所以使用这个触发器来监测异常没有价值。

59. 除了 All Elements 外所有的触发器都遵循事件冒泡

事件冒泡描述的是事件触发时序问题,事件冒泡是自下而上的去触发事件。例如:

1
2
3
<div id="parent">
  <div id="child" class="child"></div>
</div>

给他绑定事件:

1
2
3
4
5
6
7
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
})
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
})

结果:

1
2
child事件被触发,child
parent事件被触发,parent

60. event.preventDefault()

Check Validation 这个功能保证你在点击链接和提交表单成功之后才触发,对于没有成功的 action 就不会触发:

Check Validation

61. Tags pauses 功能

在做表单提交时,很有可能点击 submit 按钮之后网页直接跳转,导致此处的代码没有时间触发。使用 Tags pauses 功能可以在这里停一段时间,给代码触发预留一段时间。但是跟上面说的一样,JS 实现表单提交的方法很多,最好调试没有问题之后再上线。

62. Enable this trigger when 和 This trigger fires on 的区别

Enable this trigger

Enable this trigger when…筛选需要监测的页面,This trigger fires on…筛选需要监测的活动。

63. Auto-event 触发器生成的 dataLayer 对象

当一个 Auto-event 触发器触发时,以下数据传入 dataLayer:

  • event
  • gtm.element
  • gtm.elementClasses

64. Auto-event variable

当已有的 variables 满足不了需求时,就使用 Auto-Event Variable 自己建一个。

Auto-Event Variable

65. 使用 CSS selector 选择 Click / Form 元素

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="products">
<div>
<div>
<a href="some-product.html">Product/a>
</div>
</div>
</div>
<div id="services">
<div>
<div>
<a href="some-service.html">Service</a>
</div>
</div>
</div>

那么就可以设置 Trigger 如下:

Css selector