<直接部署追踪代码> 与< 使用Google Tag Manager 部署追踪代

　　 与< 使用Google Tag Manager 部署追踪代

　　本文涉及的4项基础概念：

　　为了方便大家对文章主体内容的理解，我们先要在介绍几个重要的概念，已经懂的小伙伴请一目十行。

　　页面标签技术是一种从访客浏览器端收集数据的技术，通常是通过放置在网站中每个页面的javascript代码进行收集的。大家可以想象城网站的每个页面都放了一个监视器（JS代码），其作用是监视用户在网站内的行为表现。常见的网站分析工具，如Google Analytics 是通过此原理进行数据的收集。

　　GTM （Google Tag Manager）是一款功能强大的代码管理工具，操作者可以将所有需要修改或者更新的代码上传至GTM，直接通过GTM完成对代码的修改和更新，而不用再去修改网站的源代码。

　　HTML DOM（Document Object Model, 文档对象模型）是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。例如Javascript就可以利用HTML DOM动态的修改网页。

　　Data layer本质上是包含了页面的属性信息的对象，也被称为JavaScript数组。有一点一定要明确，它早于GTM产生，并非由谷歌发明。

　　接下来，我们围绕直接部署和使用GTM部署的部署方式进行阐述。本文不涉及代码部署的技术细节，仅做部码方式的介绍和特点比较，请有代码恐惧症的小伙伴保持手指向下滑动姿势，不要离开！

　　一．直接部署

　　直接部署的方法顾名思义，就是将代码直接部署到网站的服务器上。当用户通过浏览器向网站服务器进行请求时，JS代码加载，从而将收集的数据发送到网站分析工具（如Google Analytics）的服务器。工作原理如下图1：

　　以GA基础代码的直接部署为例，GA能收集到的页面访问次数，流量来源，跳出率，会话平均停留时间等数据全部依赖于基础代码。其部署要求是将如下图2基础代码部署到网站的所有页面，保证加载时触发。原始的部署方法是一个一个页面进行复制粘贴。如果网站本身是基于模板形成，直接将代码放置在模板中，这样每个页面都会继承模板中的代码。

　　以GA事件代码的直接部署为例，GA能收集到的一些按钮、图片的点击数据依赖于事件代码，如下图3。其部署要求是当用户点击指定按钮时，代码触发。原始的部署方法是指定按钮的onClick动作触发事件代码。（按钮的触发条件不仅仅限于最常见的点击，鼠标悬停，滑动等也可作为事件代码的触发条件）。

　　比较有经验的网站开发人员在拿到代码部署文档规范后，通常会将所有的监测代码写成一个规范且统一的JS文件，上传并保存在网站服务器上，按需调取代码。

　　二．使用GTM进行代码部署

　　原理和部署过程： 采用GTM进行代码部署的第一步是要在网站的每个页面上部署一套GTM代码，如下图4。这套代码可以理解成是握手代码，通过该代码，使您的网站与GTM建立了联系，这之后的代码部署工作可以在GTM中完成。P.S.那些不知道从哪里听说“使用GTM就不需要在网站上部署任何代码”的小伙伴请自动上缴5毛钱科普费。

　　虽然我们不讲具体的代码部署细节，但是使用GTM进行代码部署到底是怎么一回事，还是要说明的。听“把大象装冰箱”的故事长大的小伙伴们一定和我一样有良好的三步走思路。没错，使用GTM进行代码部署一共分三步，第1步，代码配置；第2步，触发器设置；第3步，代码发布。

　　第1步，代码配置部分，就是配置将要推送到网页上的代码，其代码可以是Universal Analytics, DoubleClick Floodlight Counter 或其它一些第三方内置代码，如果自己有代码基础，还可以使用自定义HTML。

　　第2步，触发器设置部分，简而言之就是设定代码触发的条件，触发器可以理解成只有“True”和“False”两个值，因此触发器需要和变量或Data Layer里*敏*感*词*体的值结合起来使用。最后设置完整的触发条件类似于： “是在所有页面触发”，“是在某些特定页面触发”，“是当鼠标点击按钮X触发”这种。

　　第3步，点击发布按钮，一键发布所有的代码到网页上，代码真正生效。

　　当当当，接下来重点来了……

　　GTM + HTML DOM：这种方法属于常规的GTM部署，其方法是将GTM这套握手代码部署到网站上，具体的代码内容和触发条件挪到了GTM里面进行配置。当用户通过浏览器向服务器发送请求时先请求GTM中的代码，代码执行后数据发送至网站分析服务器/GA中。原理如下图5

　　这种方法实际上并不会明显减轻总体的工作量，只是将原本网站开发人员的工作量转移到了GTM管理人员的手中。可以简单这样理解，原本开发人员采用直接部署的方式写代码，写触发条件，现在改成了GTM管理人员设置代码，设置触发条件。工作量是差不多的，但是确实实现了代码集中管理的效果。

　　HTML DOM通常在第2步设置触发条件中使用，我们以最常见的唯一值为例。鼠标右键-检查元素，如下图6，查找定位的代码部署是否有id=”XXX”，如果有，就可以在GTM中以id的值作为触发条件，进行代码触发的设置。

　　GTM + Data Layer：使用GTM和Data Layer从长远的角度来看是比较推荐的方法。我们前面讲Data layer的本质上是包含了页面属性信息的对象，即在网站上创建了一个稳定的数据层来接收对于监测有用的任何信息，比如产品页面的产品价格、颜色、规格等。整个数据采集过程也就增加了Data Layer推送页面属性等信息数据到GTM容器的过程。工作原理如下图8

　　通常说使用GTM可以减轻网站改版重新部署代码工作的前提就是，一定要使用GTM + Data Layer的这种方法进行代码部署。其原理就是Data Layer是独立于HTML DOM内容的，不受改版的影响，而从Data Layer及之后的各部分也都不收影响，不需全部重新部署和配置，因此工作量减轻。试想如果是通过GTM + HTML DOM的方法进行的代码部署，所有的工作必然还是要重复一遍。

　　要注意的是，Data Layer并非由谷歌因为配合GTM这款工具的高效使用而发明，它早于GTM很久产生。但是，两者配合使用的效果就类似于油条配豆浆，美式咖啡配甜点，或者下雨天配巧克力……

　　当使用Data Layer时，代码的结构是将Data Layer代码放在GTM代码前面，如下图9。部署要求是保证每个页面上有其相应的Data Layer代码和统一的GTM代码。

　　举几个常见的Data Layer例子，说明应该在Data Layer中存放哪些有用的信息。P.S.开始写代码了，因为很重要啊，还是请有代码恐惧症的小伙伴保持手指向下滑动姿势，不要离开！

　　1. 如点击“立即购买”按钮时应该将产品的名称、ID、价格、分类、颜色、尺寸，数量等信息全部推送到Data Layer中；

　　dataLayer.push({

　　'name': 'Special T-Shirt',

　　'id': '67890',

　　'price': '33.75',

　　'brand': 'TrueMetrics',

　　'category': 'Apparel',

　　'variant': 'Black',

　　'quantity': 1

　　}]

　　2. 如点击普通的“下载”按钮，需要将事件代码的Category，Action, Label数据推送到Data Layer中；

　　3. 如页面加载/翻页等，需要将页面的路径，Title等信息推送到Data Layer中。

　　最后大多数小伙伴肯定会有一个疑问：到底哪种部署方式好，直接部署，GTM+HTML DOM，HTML+Datalayer或者是GTM+ ……？（省略号是给技术大神的留的空间，通过写JS脚本，或自定义HTML方式实现）。

　　当我们思考这个问题的时候，需要考虑实际商业环境情况，比如部署任务预留时间？GTM管理者和网站开发是同一公司还是隶属不同的公司？技术人员的水平？是否已经明确了监测需求？网站上线后临时部署需求增加的频率？网站页面的在线周期？改版周期？需要部署代码的复杂程度？最后也是最重要的：Budget是多少，预计怎么分配给各个团队？遇到实际问题的时候需要把所有的因素一一列举，最后综合实际情况选择最合适的部署方式。抛砖引玉，给大家一个简单的总结。如下表1：

　　最后，不善于总结的分析师一定不是好的项目经理！结尾处我们总结一下文章涉及的几个问题：

　　基本概念：页面标签技术，GTM，HTML DOM, Data Layer 都是什么？

　　直接部署代码的原理？以GA基础代码和事件代码为例，直接部署的实现过程？

　　GTM + HTML DOM的原理和实现过程？（一共分3步）

　　会鼠标右键，检查页面元素了么？

　　GTM + HTML DOM真的减轻工作量了么？

　　GTM + DataLayer的原理？

　　使用Data Layer时，要放在GTM的前面or后面？

　　Data Layer中应该存放哪些有用的信息？

　　怎么结合商业场景选择最合适的代码部署方式？