关于GTM - Google Tag Manager

发表于 | 更新于 | | 阅读次数 |

参考文章

GTM包含三部分

  • tag: 添加到页面中的代码段
  • trigger: 定义tags会执行的地点、时间
  • variable: 用于接收和存储tag和trigger用到的信息

GTM出现的缘由

GTM出现之前，页面上的js代码是硬编码的。团队开发中，如果有一些很小的改动，可能你就被迫需要跟着改动。如果添加事件来实现，可能不适于紧急需求，并且需要定期维护。而且如果你在负责更新某一网页，追踪这些改动可能会带来麻烦。

GTM提供了一种更为友好的交互，会带领你一步一步创建tag，减少与js进行大范围的改动。首先需要将定制生成的追踪代码（也成为container tag）加入页面中。

这样，GTM就能允许任何有着合适的用户权限的人去添加、修改、调试你页面里的tag代码段。

更重要的是，你可以控制你的tag，并以你设计的任意方式快速便捷地实现追踪，而不需要受其他开发者的变动影响。

GTM和GA的关系

两者是完全不同的独立的工具，但是也可以配合使用。

GTM和GA搭配使用

有很多常见的方式可以让二者一起使用，比如：使用GTM发送数据的不同片段给GA,例如pageview和event（如果使用GTM，就不需要额外添加js到你的页面上）

示例：如何使用GTM发送数据给GA，统计网页上的资源（PDF,docx,xls等）下载量。需要关注两件事：

（1）有多少人下载了该资源

（2）当资源被下载时用户停留在哪个页面

GTM是你能便捷地设置一个click trigger和GA tag来帮你获取什么资源在哪里被下载的信息，而不需要给你的页面额外添加代码。

还可以使用GTM来设置这个数据什么时候需要被发送给GA。例如，你可能想在用户点击资源下载链接的时候发送一个虚拟pageview，可以使用GTM的trigger来定制这些条件。

GTM特别之处

免费；

由你控制：只需要插入一次代码段，就可以在任何你需要的时候作出修改。通过可用的debug工具和预览模式，你能清晰地在上线前知悉你做了什么；

不受限制：可自己定制符合需求的代码段，可以插入到移动端；

和GA一同带来炫酷的特性：GTM使得一些复杂的GA特性的实现变得简单，例如uer id的追踪（测量真实用户而不是设备的数据），以及一些通用特性例如定制维度、跨域追踪、增强的电子商务；

便捷地追踪更多的东西，例如网页上的youtube视频、打印追踪和AJAX表格提交；

无需担心安全问题；

debug中心化：通过debug选项、内建的错误检查和版本控制，你使用GTM所做的一切在上线前都会被测试和调试。

应该什么时候迁移至GTM

任何时候都可以，尤其是当你还没有升级至GA的最新版本时。

LunaMetrics

LunaMetrics是GTM的搭档，可以帮助你更好实现GTM和GA。

virtual pageview

参考文章

当客户端从经典的GA升级到GTM实现的通用的分析工具时，我们可能会疑惑这些virtual pageview是如何从内联代码转变为通过GTM实现的。这里提供几种方式帮助迁移到GTM实现的分析工具。

什么是virtual pageview

向GA发送页面访问记录而不重新加载页面，这就是virtual pageview.

当GA在一个页面上加载时，会触发一个标准的页面访问记录。有时候我们想触发一次页面访问记录，但是不想重新加载页面或者真的跳转到另一页面。如以下场景，可以使用virtual pageview来帮助解决：

  • 一个联系人表格，动态提交到它本身，而不需要重新加载页面；
  • 追踪资源文件的下载；
  • 图片的模态框弹出窗口，或信息抓取的表格；
  • 多步骤的动态购物车页面。

以前触发virtual pageview的方式

1
2
3
4
//经典的GA
_gaq.push(['_trackPageview', '/downloads/pdfs/corporateBrief.pdf']);
//Universal Analytics
ga('send', 'pageview', 'page path');

这些代码靠手工加入内联HTML代码中，会耗费开发人力资源，如果这样的代码很多的话，纯靠手工容易出错。

用使用GTM触发virtual pageview的方式

首先需要安装GTM；

使用以下代码来替代上述代码段：

1
2
3
4
5
dataLayer.push({
'event':'VirtualPageview',
'virtualPageURL':'/order/step1',
'virtualPageTitle' : 'Order Step 1 – Contact Information'
});

dataLayer是供GTM在页面上读取的对象，它允许我们发送指令给GTM。

这段代码可以根据你要发送给GA的virtual url和virtual title的不同进行修改，可以内联放置，也可以放在页面任何位置的javascript函数中。当它执行时，会将命令插入dataLayer中，GTM会获取并执行。

创建必要的tag, rule和macro

只有在GTM设置好必要的2个macro（分别对应上述的virtualPageURL和virtualPageTitle）, 1条rule（对应于上述event）, 1个tag之后，在不同的地方插入的上述代码才能执行。文中有一些配置示例截图。

设置好了之后，当上述代码被触发时，无论dataLayer.push传入了什么信息，都会触发一个virtual pageview。上百个内联代码或脚本实现也都是触发那2个macro, 1条rule和1个tag。

PDF下载以及表格提交的追踪配置

还以前面的资源下载链接为例，页面中有几千个PDF文件下载链接，你想以同一个virtual pageview来追踪它，而不改变其中任一链接。

在GTM创建一个单击链接和的监听器, rule, tag，将其放入要追踪PDF下载情况的页面里。

文中有一些配置示例截图。

总结

参考文章

根据我对这些资料的理解，GTM的出现是为了让开发者从纷繁的第三方追踪tag中解放出来，节省开发人员在追踪页面某些功能上耗费的精力。

GTM主要包括container, tag和trigger。一个container包括这个网站需要的所有tag,每个tag都用于追踪某一事件，trigger用于触发相应的tag.

分享
0%