1.2.1 Google Analytics布署的几种方法

这一节主要介绍如何部署GA跟踪代码和如何对跟踪代码做个性化的定制，提高数据准确度以及检验代码是否部署正确。

1.部署方法1——直接部署方法

直接部署就是将跟踪代码直接部署到到站点的所有页面，根据最新的官方部署方式，现在是推荐跟踪代码部署在页面代码的header里面，也可以将跟踪代码以js的文件引入，但位置一定要在header里面，主要是为了更快加载到跟踪代码,确保数据准确度，以往的加载在footer，存在页面还在加载用户就离开了，跟踪代码没加载到的情况。

（1）获取跟踪代码

在GA里选择“管理”→“跟踪信息”→“跟踪代码”，可以看到如图1-13的页面，方框标记的就是GA的跟踪代码，就是需要复制的代码。

图1-13 跟踪代码的获取

注意：Google分析在2017年9月发布了全局版跟踪代码的测试版，本书仍是以讲解统一版为主，下面是统一版的跟踪代码，只需将其中的UA-XXXXX-Y替换成自己的跟踪ID即可。

代码清单1-1

（2）然后找到站点中header位置，将代码添加上去

对于网站的页面来说，通常都是有模板生成的，也即是页面会引入特定的组件，如果站点的页面只有一个模板，那只需要将代码添加在该模板的header里面就可以，如果网站比较大型，二级目录存在不同的模板，那就需要加同一个跟踪代码添加到不同的模板的header里面，确保所有的页面都要加载到。

下面是一个例子，通过查看页可以知道站点只有一个模板，那么就找到模板页面的header，如图1-14所示。

图1-14 代码部署

代码就添加到该位置，这样就部署完成了。

注意

如果您自己没有代码或服务器权限，需要开发帮助您添加跟踪代码，不要讲跟踪代码通过QQ直接发送给开发，这样会导致跟踪代码的编码格式改变，跟踪代码失效，可以通过将跟踪代码保存成TXT的形式再发送给开发。

2.部署方法2——GTM自定义HTML

这一节讲解如何通过GTM来部署GA跟踪代代码，这里默认大家已经都有一定的GTM基础了，主要是为了讲解GA的部署，不懂的读者可以看后面的第3章，GTM不是这一节的重点。

通过GTM有两种部署GA跟踪代码的方式，本节主要是讲解通过自定义html的形式，原理的话就是将跟踪代码添加到GTM的自定义HTML代码里面，然后触发页面是“All Pages”，这样就实现了将跟踪代码部署到所有的页面上了。

（1）获取跟踪代码

在GA里选择“管理”→“跟踪信息”→“跟踪代码”，可以看到如图1-12的页面，方框标记的就是GA的跟踪代码，就是需要复制的代码。

（2）GTM新建自定义HTML

在GTM选择“代码”→“新建”→“选择一个代码类型以开始设置…”→“自定义HTML”，命名为“GA默认跟踪代码”，然后将跟踪代码复制进入，如图1-15所示。

图1-15 新建自定义HTML

然后触发器选“All Pages”，最终的配置如图1-16所示。

图1-16 最终配置

配置好以后，如果要生效，还需要将这个配置发布到线上去，发布的方式是单击右上角的“提交”即可，这样GA跟踪代码才正式生效。

3.部署方法3——GTM内置模块

这一节主要介绍如何通过GTM里面的内置模板去部署GA跟踪代码，这个也是我最推荐的一种部署方式，与前两种方式不同的是：这一种部署方式不需要复制GA跟踪代码，是需要知道跟踪ID。原理的话是通过GTM里面的内置模板做些配置就可以了。

（1）获取跟踪 ID

在GA里选择“管理”→“跟踪信息”→“跟踪代码”，如图1-17所示，在跟踪代码页面里面找到跟踪ID，就是标记框里面：

图1-17 获取跟踪ID

（2）GTM中新建Universal Analytics

在GTM中选择“管理”→“跟踪信息”→“跟踪代码”→“Universal Analytics”，命名为“GA默认跟踪代码”，跟踪类型选择“页面浏览”，勾选“在此代码中启用替代设置”，然后将跟踪 ID填入标记框中，如图1-18所示。

图1-18 填入跟踪ID

这里的触发器也是“All Pages”，最终的配置如图1-19所示。

图1-19 完整配置

这里之所以推荐用这种方法做默认跟踪代码的部署，是因为通过模板来部署，做个性化的配置很简单的，可以看图1-18所示，里面有“更多设置”和“高级设置”，这些就是做个性化配置、优化、跨站、跨域跟踪设置的地方了，具体的设置下一节再详细介绍。

注意

为了不让竞争对手知道您对跟踪代码做了哪些深度定制，可以将跟踪代码保存为js文件后，在header中引入，这样做在页面不会出现相关跟踪代码源码，或可以通过GTM托管，但第三方插件还是可以检测出来的，如Ghosty和WASP.inspector，第6章将会讲解如何通过这些工具来分析竞争对手的一些信息。