5 gtm 工作原理_一文看懂如何部署GTM的服务端标记

如何使用服务器端的GTM容器发送网站跟踪数据？

文丨洪晓丹

触脉咨询数据工程师

2020年8月12日，Google发布了GTM的公开测试版，引入了新的容器类型(“Server”)，与传统的web端容器不同，新的容器类型需要运行在Google Cloud环境中。

一、服务器端标记是什么？

我们知道，传统的web端容器的工作原理是：网站开发人员先将web端容器的容器代码添加到网站的源代码中。在页面加载的时候，容器代码也会被加载，相应的代码也会根据实际的配置情况在合适的时机触发。

而服务器端标记可以理解为，在浏览器和app发送的数据与实际上报到GA中的数据之间加了一层代理。服务器端容器做为http API端点运行，网站部署的gtag.js或者web端容器的Universal Tag将http请求发送到服务器，服务器端容器会侦听这些传入的请求，并将其解析为我们所熟悉的事件格式再转发到GA。

二、如何开始部署？

1.创建GTM服务器端容器

Step1.登录GTM账号，转到“管理员”板块，点击新建容器

Step2.为容器命名，并选择目标平台为服务器。

Step3.需要新建Google Cloud Platform项目，这里可以选择自动创建服务器或者手动配置。

在这里演示比较简单的第一种方法。

创建服务器首先需要指定一个结算账户，如果没有的话根据指示创建结算账户。

等待一两分钟，GCP项目及对应的服务器就会自动配置完成，然后会看到以下窗口，可以查看服务器的相关信息。

2.设置将事件发送到服务器(gtag.js/gtm)

(1)通过gtag.js配置

对于直接部署gtag.js的情况，需要在config设置中，通过transport_url字段，指定http请求发送到服务器：

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y', {  //填写实际的tracking_id

    transport_url: 'https://gtm-555j48n-ndeyz.uc.r.appspot.com' //url需填写创建的服务器的网址

  });

(2)通过web端GTM容器配置

对于通过web容器部署的情况，需要在GA设置变量、设置http请求目标路径

(更多设置>>高级配置>>传输网址)

3.客户端配置

对于服务器端的容器，需要配置客户端以监听网站或者app发送的http请求，并将其解析为事件格式的数据。支持的客户端类型包括Universal Analytics、App+Web和Measurement Protocol。

当然，新建服务器端容器的时候会自动创建两个客户端，分别名为Universal Analytics和App+Web，可根据需要选用或者创建更多客户端。

4.创建触发器、标签、变量等

此步骤和传统web容器配置很类似，当客户端将监听到的http请求解析为事件以后，服务器端容器还需要配置触发器及代码，以在合适的时机将数据发送到GA，也可能会需要设置变量。

如下图所示，这里展示的例子将接受Universal Analytics的所有数据(包括浏览、事件等)并全部发送：

和传统web端的容器代码不同的是，正常情况下只需要一个tag就可以转发来自网站的所有http请求，当然在实际需要的时候可以配置多个tag。

5.预览模式

服务器端容器点击预览，开启预览模式，浏览器会自动打开一个新的标签页，当与网站进行互动时，与传统web端容器预览模式类似，可以查看标签的触发情况，如下图所示：

点击request选项卡，可以查看传入的http请求和服务器响应的相关信息，也包括此次请求的客户端信息。

在标签抛出异常的时候，点击errors选项卡，可以查看详细错误信息。

打开浏览器控制台，可以观察到，网页互动时发送的collect请求的域名是第三方域名xxxx.appspot.com，并非google-analytics.com。

三、设置自定义域

在默认情况下，服务器端代码部署托管在GCP的App Engine网域上，发送到服务器的请求仍会被视为第三方追踪，在某些情况下可能收到限制。因此，可以选择配置自定义网域，将请求发送到自己网站的子域

(配置位置：访问GCP项目>>App Engine >>设置>>自定义网域)

Step1.选择网域

选择需要将请求发送到的自己网站的子域，比如analytics.example.com，若未验证过该网域，需要选择验证新网域，根据指引验证通过后返回自定义网域设置界面，点击刷新网域才可使用此网域。

Step2.保存映射，将指定的自定义网域指向GTM服务器

Step3.按照指示更新DNS记录

Step4.修改服务器端容器配置中的服务器网址

Step5.更新gtag.js的config代码中transport_url字段，或者web端容器GA设置变量对应字段，字段值应为已更新的当前服务器指向域名：

(1)gtag.js

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y', {  //填写实际的tracking_id

    transport_url: 'https://gtm-555j48n-ndeyz.uc.r.appspot.com' //url需填写创建的服务器的网址

  });

(2)web容器GA设置变量

Step6.测试自定义网域

开启服务器端容器的预览模式，同时使web端容器更改生效，浏览网站，查看http请求指向的域名，可以观察到发送的collect请求的域名是更新后的自定义网域。

以上就是对于服务器端标记配置的一些简单介绍，当然，目前这个功能还处于beta阶段，本文内容仅适用于现阶段，后续更新请以谷歌官方发布为准，希望能对各位读者起到帮助。

(添加客服，可加入交流群)

备注：昵称-地区-公司-职位

GA使用、数据学习、行业交流、干货分享……