将Google tag manager添加到wordpress网站

对于网站的用户行为和网站流量转化等数据，通常需要添加多个代码来实现跟踪与转化。

Google的代码管理器google tag manager横空出世，给所有网站所有者提供的极大便利，借助goole tag manager，您可以从一个控制面板轻松添加和管理所有跟踪代码。Google tag manager可以实现非常多的功能，比如跟踪用户从哪个页面离开并跳转哪个页面，在网站的某个页面停留多长时间，在你的网站中查看哪些产品，点击什么按钮，添加购物车.. 上一张我的某一个容器图看下，还有很多设置的动作未出现在图片中，你就可以知道这个工具有多厉害。更让人欣慰的是，这么牛逼的工具，Google依然是免费开放给所有用户。

主要内容：

容器、标签、触发器、变量的区别
将google tag manager添加到网站
如何验证google tag manager是否安装成功

一、容器、标签、触发器、变量的区别

在一个Google账号中可以创建多个google tag manager账号，在一个google tag manager账号中可以创建多个容易，一般一个容器对应一个网站或者网站的一个版本（比如你在2021.1为A网站创建了一个容器B，后来你对于容器当中标签的设置杂乱感到不满意，你在2021.3为A网站再创建了一个容器C，这个容器B和C就是都可以追踪网站A的数据，但是在各自的容器有不同的呈现）。

容器最大的好处就是可以减少你的重复工作。当你为A网站建立了一个容器并且将容器设置地让自己感到非常满意，你现在又有一个新网站B，新网站B和网站A非常类似，你不想重新设置一遍，想要直接套用A网站设置好的跟踪代码，这时，你就可以进入A网站的所在容器的工作台-admin-export container将容器导出，然后回到B网站所在的容器，依然是在容器的工作台-admin-import container将A网站的容器中内容复制导入到B网站，然后，你的B网站就不需要重新设置跟踪代码了。（导入的过程中要在某个位置改变一个参数，过后在专门文章中演示这个步骤）

标签、触发器、变量都放在同一个容器中。接下来这几段非常内容比较生硬，一定要撑着每个字认真看完。对于google tag manager来说，这几个东西的概念和区别没整明白，后面将会过得很艰难。

标签tags

标签是由一段现成代码或者自定义html代码工具组成，它可以在你的网站产生作用并发送数据给google analytics，你可以把很多东西放在标签里。例如，你可以在标签中添加谷歌分析Google analysis（现成代码工具）或者自定义html跟踪代码（自定义），也可以添加第三方比如Twitter、Pinterest的代码，这个标签可以让谷歌分析追踪你的网站。换句话说: 标签包含了你想要添加到页面的信息或者说是你准备让这个标签为你做什么。以下是一个 网站页面停留超过15秒 的标签的全貌，使用的是google analytics代码

触发器Triggers

只有当触发器被触发时，标签才能正常工作。就是说你设置了tags，还是无法正常工作的，下面必须再添加个触发器才能工作。以上文 网站页面停留超过15秒 的标签为例，图中下方的timer就是触发器（GA-all page 15S Trigger这是我为了区别的自定义命名，因为timer停留时长这个触发器可以自定义设置，可以设置超过15秒，30秒，60秒…的触发）

变量Variables

触发器需要变量来判断是否要运行。假设标签在页面上运行，如果变量的值满足你设置的条件，这个时候触发器就会启动，触发器启动之后使得标签可以工作，所以标签、触发器、变量是相互依存的关系。。以上文 网站页面停留超过15秒 的标签为例，点击timer进入下一个页面，图中 Enable this trigger when all of these conditions are true-Page URL matches RegEx.* 才是变量，这是明确了什么条件下触发器启动的，而interval 15000（15秒）并不是变量，而是赋予一个变化值。

二、将google tag manager添加到网站

登录你的google tag manager账户，并点击create account

为新账户命名，并选择国家

下一步，为你的容器命名，一般一个容器对应一个你所要跟踪的网站

在你保存之后，下一步将自动到达以下页面

把以上的<head>和<body>复制后插入wordpress网站的管理后台。关于如何将追踪代码添加至网站后台，我的另一篇文章

如何在WordPress网站后台插入代码？ https://www.liuxiashu.com/how-to-insert-code-into-a-wordpress-website/

专门把这操作说了一遍，所以我就不赘述了。

三、如何验证google tag manager是否安装成功

进入你刚才创建好的容器contain，然后点击预览preview

进入下一步，输入你完整的网址，http，https, www都不能少，点击连接connect

这个时候会主动跳转到你的网站，并出现如下提示，代表连接成功

在刚才的预览页面也同时出现一个连接成功的提示，点击继续

现在，你回到你的网站，任意下拉页面并随意点击一个链接，你会发现因为你的动作，载入了两个不同的页面，同时，新的动作总是出现在summary的上方，这就代表google tag manager已经成功添加到你的网站。在这个例子中，我还未设置更多新的追踪动作，所以看起来比较单调。过后，我将通过文章专门讲述设置页面跳转，出站点击，加载时长等各种不同的可用于网站数据分析的跟踪动作。