Google Tag Manager 如何设置和管理网站追踪代码

你可能没有听过 Google 跟踪代码管理器(Google Tag Manager,简称 GTM)。但是你一定听说过 Google Analytics ,如果这个也没听过,那么你更有必要深入研读本文。

我们建设网站的目的,是获得有效流量实现商业目标,但是要怎样才能对每个访问网站的用户进行跟踪和分析呢?这就要用到网站分析工具了。对国内的用户来说,可能使用百度统计、CNZZ之类的统计工具比较多,但是在世界上用户量最大,功能最强大的确是 Google Analytics。

通过 Google Analytics ,你可以跟踪访客在网站上的所有统计数据,还能对用户的特定行为事件进行跟踪。获得了这些数据之后,我们就可以针对性的分析,以促进我们商业目标的实现。

而今天我们要讲的 Google Tag Manager 是一款专业的分析代码管理工具,只要一次性安装了 GTM 代码,就可以通过 GTM 来管理所有第三方的跟踪代码,而不用多次重复在网站中添加不同的代码了。通过 GTM 还可以对网站上的特定事件进行跟踪,能够帮助我们更加深入的进行网站数据的分析和管理。

GTM 中的代码(Tag)是什么?

如果你使用过网站统计分析工具,一定知道要先在网站上安装 Javascript 代码,这些代码可以将网站访问数据回传处理并形成统计报告。

当我们通过各种渠道开展网络营销活动时,借助于这些统计代码,我们可以针对性的跟踪用户在营销活动中的行为。例如,访客是通过什么渠道进入网站,哪个广告的点击率最高、哪个广告的转化效果最好等等。

为什么要使用 Google Tag Manager?

简化代码管理

每个公司都会开展多种网络营销活动,为了追踪每种渠道的营销效果,我们需要在网站上添加不同的跟踪代码。比如,我们通过 Google Ads 进行网络营销,为了分析效果我们需要在网站上安装 Google Analytics 和Google Ads 的跟踪代码。然而有了Google Tag Manager便可以简化这一流程, 只要在Google Tag Manager中为对应代码添加一个代码标签(Tag)即可,而不必每次都要将代码添加到网站上。

Google Tag Manager 如何设置和管理网站追踪代码

增加网站稳定性与加载速度

如果在网站上添加过多的跟踪代码,会降低网站页面的加载速度。网站加载速度变慢,就会给用户造成不好的访问体验,甚至会导致客户的流失。倘若使用 Google Tag Manager ,就可以让这种情况发生的概率大大降低。

Google Tag Manager 由哪些部分组成?

1. 账户 Account

账户是Google Tag Manager账户结构中的最高层级。一个账户可以用来管理一个或多个网站,对于大多数人来说一个账户便可管理所有网站了。如果我们要管理多个公司的多个网站,也可以创建多个账户。

Google Tag Manager 如何设置和管理网站追踪代码

2. 容器 Container

容器是账户的下一层级,是专门放置代码标签的地方。一个账户里面至少会有一个容器,用来保存代码标签(Tag)和触发器(Trigger)。举例来说,一个容器里面可能包含一个代码用来记录用户点击提交表单的行为,并且包含一个触发条件,当提示提交成功的时候,该代码会记录此提交行为。

一般来说一个容器会对应一个网站或应用,而一个容器中可以存放多个代码标签和触发条件,因此就不需要在每一个网页中都添加追踪代码。

3. 代码标签 Tag

跟踪代码是数据分析、营销或支持提供商提供的代码片段,可帮我们将其产品整合到网站或移动应用中。借助 Google 跟踪代码管理器,我们不再需要直接向网站等项目中添加这些代码,而只需在跟踪代码管理器界面中配置和发布代码,以及设置代码触发方式。

跟踪代码管理器以原生方式支持多种 Google 代码配置和第三方代码配置。自定义代码可用于实现跟踪代码管理器的原生模板尚不支持的跟踪代码。

4. 触发器 Trigger

触发器在响应事件时触发代码。在 Google 跟踪代码管理器中,触发器会监听网页或移动应用中发生的特定类型的事件,如表单提交、按钮点击或网页浏览。当检测到指定事件时,触发器就会触发相关代码。每个代码必须至少有一个触发器才能触发。

在配置触发条件时,可能涉及到变量(Variables)、运算符号(Operators)与值(Values)等部分。

变量 Variable

  • 变量帮助定义代码该在何时回传讯息,而变量又可以细分为内置变量(Built-in Variables)与用户自定义变量(User-defines Variables)两种。内置变量是谷歌提供的一些默认变量,例如网页路径{{page path}}或点击{{click ID}},你只要选中该变量即可启用;而用户自定义变量是用户根据自身需求自己定义的变量,例如完成购买行为{{purchaseComplete}},就是当交易完成后才回传数据。

运算符号 Operator

  • 定义变量与值之间的关系,系统会在运行时判断触发条件为 true 或 false,而两者之间一定要对应的上才能确保触发条件顺利运行,最常见的运算符号如等于(equals)、包含(contains)、或未包含(doesn’t contains)。

值 Value

  • 明确定义变量可以是某些特定的字符或是网址,以触发代码记录行为信息。
Google Tag Manager 如何设置和管理网站追踪代码

例如,如果只想要当用户完成购买行为时才让代码记录该事件数据的话,可以像下面这样设置:

变量:{{url}}  运算符号:等于  值:完成购买页面”checkout.html”

另外,也可以同时设置多个触发条件来搜集数据。

Google Tag Manager 如何设置和管理网站追踪代码

如何使用谷歌跟踪代码管理器

在对Google Tag Manager有了大致的了解后,接下来我们将介绍如何逐步的设置。

1.账户设置

访问Google Tag Manager,并使用您的google 账户登录。登录后新建一个账户,账户名称可以根据情况进行设置,需要具有描述性且容易辨识。

Google Tag Manager 如何设置和管理网站追踪代码

2. 容器设置

在创建容器的时候要为容器命名,并选择目标项目类型,例如,网站、IOS应用、Android 应用等等。

3. 确认Google Tag Manager的协议条款

Google Tag Manager 如何设置和管理网站追踪代码

4. 设置追踪网站

确认Google Tag Manager的协议条款后,系统会提供两段 Javascript代码。您需要根据提示,分别将两段代码添加到网站的 <head> 部分和 <body> 部分。

Google Tag Manager 如何设置和管理网站追踪代码

在完成以上步骤后,就已经基本上完成了 Google Tag Manager的基础工作。接下来就要创建代码标签以追踪用户行为,而最受欢迎的分析工具就是Google Analytics,下面介绍相关配置方法。

5. 新建代码

首先,返回Google Tag Manager页面,在左上方的菜单中点击“工作区”,然点击“新建代码”。

Google Tag Manager 如何设置和管理网站追踪代码

6. 代码设置

为了方便记忆和管理,先给代码起一个描述性的名字,例如:网站浏览。接下来在“代码配置”区域单击,并从代码类型中选择“Google Analytics(分析):Universal Analytics”。

Google Tag Manager 如何设置和管理网站追踪代码

7.  输入追踪ID

在选择代码类型后,接下来在Google Analytics(分析)设置部分,选择新建变量并输入 Google Analytics 的追踪 ID。

Google Tag Manager 如何设置和管理网站追踪代码

要找到你的Google Analytics追踪 ID,需要前往Google Analytics的账号下,然后选择“管理”,再从“账户”菜单中选择追踪账号,并在“资源”字段中点击“跟踪信息”,接着便可以找到“追踪 ID”,将其复制到 Google Tag Manager中。

扩展阅读:

8. 选择跟踪类型

如要在网站上跟踪用户的常规访问行为请选择“网页浏览”。如果想跟踪特定的互动行为,例如促销活动中某个按钮的点击,或用户提交表单的行为,请选择“事件”。

Google Tag Manager 如何设置和管理网站追踪代码

9. 设置触发条件

接下来点击触发条件区域,并从弹出的菜单中选择“All Pages”触发类型,这样便可以追踪网站的基本流量数据。此外,也可以通过触发条件设置,让特定事件发生时才启动代码标签,例如点击链接、点击文字、点击按钮和提交表单等等。

Google Tag Manager 如何设置和管理网站追踪代码

10. 启用代码标签

在设置都完成后,返回Google Tag Manager页面,按下右上角的“提交”按钮,这样该跟踪代码才会生效。

Google Tag Manager 如何设置和管理网站追踪代码

在代码标签发布前,也可以按下提交按钮右方的预览按钮,以检查配置的代码是否正常运行。

另外,也可以通过 GA Checker来检查Google 跟踪代码是否正常,而GA Checker 可以检测的项目包括:

  • Google Analytics (ga.js)
  • Google Analytics Remarketing (dc.js)
  • Google Universal Analytics (analytics.js)
  • Google Analytics Experiments (ga_exp.js)
  • Google Tag Manager (gtm.js)
  • Google AdWords Conversion (conversion.js)
  • Google AdWords Phone Conversion (loader.js)
  • Google AdWords Remarketing (conversion.js)
  • Google AdWords Dynamic Remarketing (conversion.js)
  • Google DoubleClick

若使用上述的Google营销工具,却不确定网页是否有成功启用追踪代码标签的话,只需要开启 GA Checker 后输入检测网址,其便可以自动抓取网站内所有页面,更同时列出每一个页面网址被找到的代码类型。

Google Tag Manager 如何设置和管理网站追踪代码

若发现错误,可以进入Google Tag Manager,到相对应的标签代码或触发条件中进行修改。

最后,推荐一个非常好用的 Chrome 扩展工具,那就是 Google Tag Assistant

在尚未使用Google Tag Assistant前,要查追踪码的安装状态,除了使用浏览工具外,你的另一个选择便是按下右键,选取「检视原始码」,在透过Ctrl+F搜寻_gaq.push或ga.js,不过,现在透过Google Tag Assistant扩充工具,便可以根据颜色与数字,立即看出网页的标签设置有没有问题。点击扩充工具图标,即可显示该网页中含有多少标签、有多少错误以及建议修正讯息。

安装了 Google Tag Assistant 后,只需在 Chrome 浏览器新标签中打开目标网址,然后在当前页面点击该扩展图标,并点击启用扩展,再次刷新当前页面,就可以看到最终的验证结果了。

Google Tag Manager 如何设置和管理网站追踪代码

如果你还没开始使用 Google Tag Manager,那就从现在开始用起来吧,相信它一定会成为你在网站经营中的好帮手。

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/webmaster/how-to-use-google-tag-manager-in-website/

(0)
上一篇 2022年3月31日 下午5:09
下一篇 2022年4月2日 上午8:40

相关推荐

发表评论

登录后才能评论