什么是GTM (Google Tag Manager)

5,916 阅读3分钟

什么是GTM(Google Tag Manager)

gtm是谷歌开发的跟踪代码管理器, 可以在平台上添加和更新自己的代码,用于转化跟踪、网站分析、再营销等用途。

优点

  • 灵活性, 无需修改项目源代码就可以部署更新
  • 网站统计分析的代码可以统一管理
  • 功能强大, 可以添加js,html,图片等模板, 与第三方工具高度集成
  • 方便调试

如何使用

gtm有免费的版本, 可以上 marketingplatform.google.com/about/ 注册并开通账号, 之后gtm会给你一个js代码块, 需要你放到每个html页面的<head>标签里面, 代码类似于下面这样, 里面会有个GTM-XXXXX 便是你的gtm container的ID, 需要替换成你自己container 的id

<!-- 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-XXXXX');</script>
<!-- End Google Tag Manager -->

Tag (代码片段)

gtm最重要的部分, 可以在tag里面部署 google数据分析相关服务, 或者第三方服务, 如果某些服务商没有集成在gtm里面, 还可以通过嵌入自定义代码的方式来部署. 可以看到tag里面有相当多的方式来部署你的代码.

image-20190404121405992

Trigger (触发器)

每个tag必须关联trigger用来触发tag的执行. 举个例子, 你希望某段统计代码只有在访问特定url的时候才会执行上报, 这时候就需要添加trigger来指定条件.

Trigger 有相当多的触发方式, 你可以选择页面加载完成后触发, 某些dom元素可见时触发, 用户点击某个按钮触发等等.

image-20190404114656052

Variable (变量)

大部分情况下数据统计都需要上传一定的信息, 比如电商网站需要统计用户购买了何种商品, 数量及价格等等, 或者用户点击了哪些按钮, 这些都需要通过变量的形式来定义, 变量设置后tag和trigger都可以引用, trigger可以引用变量来定义一些触发条件, 比如用户在某种语言下才触发. tag可以获取variable的值并上传到相关的服务商.

variable也有很多类型, 可以是当前页面的url, 或者是自定义js计算得到的值.

最普遍使用的则是 Data Layer Variable

image-20190404115630443

Datalayer(数据层)

gtm脚本运行时会创建一个dataLayer的全局对象, dataLayer实际是是一个数组, 你可以通过dataLayer.push()来添加相关的数据, 可以很方便的在gtm variable里面获取到.

比如你添加了一个描述当前页面类型的属性dataLayer.push({pageType:'home'}), 就可以通过这样定义Variable来取值

image-20190404120837582

这里要注意的是取值的时机, 比如你在用户购买某个商品之后将相关的数据添加到dataLayer, 那么如果某个Trigger在这个按钮点击之前就被触发(如 PageView类型的trigger), 那么这时候是获取不到这个商品的信息的. 所以理清trigger的触发条件, variable 被添加的时间是非常重要的, 如果顺序乱了就会得到undefined的结果, 影响到数据统计的准确性.