使用Tag Manager事件监听功能追踪页面链接属性

嗨~ 朋友。如果你喜欢我的博客,那么现在就订阅它吧!

Google Tag Manager是Google提供的第三方代码管理工具。他最主要的功能是对网站页面中纷繁复杂的营销代码和追踪代码进行统一管理。在代码部署,修改和更新过程中减少对页面代码的修改。避免发生错误,同时减少工作量。而对于分析师来说,最实际的意义就是用了Tag Manager,你就可以不用再去烦技术改代码了!也不用担心技术同学哪天心情不好漏加了你的代码。

除去上面介绍的Google Tag Manager最基本的功能之外。他还有一个非常实用的功能叫做“事件监听”。本篇文章就将介绍如何使用Google Tag Manager的事件监听功能来追踪网站页面中的链接属性。下面我们将按照7个步骤,从最开始的创建容器,一直到最终的报告数据检查。一步一步详细介绍整个的设置和实施过程,以及过程中需要注意的问题。

 

1,创建容器

第一步是在Tag Manager中创建新的容器。容器听起来不太好理解,你可以把它简单的想象成一个被单独封装的JS文件。差别在于容器更加高级它可以包含有多个不同的代码,以及代码触发的规则。创建容器非常简单,在新创建的账户下选择新建容器,会进入到创建新容器界面。

创建新的代码容器


这里需要你输入容器的名称,使用位置和归属的域,以及时区。容器名称建议尽量使用网站名称,或者可以表面容器所使用范围的名称。当你有多个容器时容易查找和辨别。Google Tag Manager有网页版和移动应用的版本,这里我们使用在网站中,因此选择网页。域的部分输入你将要添加容器的域名即可。如果有多个域名同时使用一个容器,选择添加域并输入域名即可。最后设置容器的时区,选择网站主要用户群所在的时区即可。点击保存,现在我们的容器创建好了。但是,这个容器还什么都做不了。需要我们在其中添加代码。

获取并添加容器代码


在完成创建新容器的过程后,Google Tag Manager会将你带到容器代码页面。这个页面中提供了刚刚创建的容器代码。这里我们需要进行两个操作:

第一个操作是复制页面中的容器代码,并将容器代码添加到网站中所有需要追踪的页面源代码中。Google Tag Manager建议将容器代码放在<body>标记之后。这是为了保证后续的事件监听代码能顺利执行并记录。当然,你也可以选择把容器代码放在其他的位置。每一个容器代码会有一个唯一的ID。在上面的截图中就是我在代码中用灰色挡住的部分。不过你依然可以在顶部容器名称旁边找到我的容器的ID。一串以数字和大写字母组成的字符串。

第二个操作是在容器中添加不同类型的追踪代码。新建的容器是空的,即使把容器代码加到页面中,也无法获取任何信息。我们需要在容器中添加需要执行的代码。这一步骤在Google Tag Manager端设置即可。即使是以后代码的更改或删除,都不需要再对网站页面进行修改,直接在这里操作就可以。

向容器添加代码的方法有两种,第一种是直接选择下面给出的代码类型,Tag Manager将转到此类代码的设置界面。只需设置简单的ID和必要的参数就可以完成代码设置。Tag manager中默认包含了Google自家产品的监测代码,点击相应的代码图标并按引导进行设置就可以了,如需添加非Google的监测代码,需要选择自定义HTML代码,并粘贴对应的代码。界面中有详细的说明。操作起来并不复杂。

第二种方法是点击“稍后添加代码”,Tag Manager将转到容器概览页面,在这里依然可以通过点击“此处”添加监测代码。下面我们从这里开始逐一添加所需的页面追踪代码和事件监听代码。这里请注意,Tag Manager只是一个追踪代码管理工具,而不是代码的创建工具,因此,在添加代码前你需要在对应的工具中首先创建账户,并获取该工具提供的追踪代码。然后将代码或必要的参数或ID输入到Tag Manager中。

2,添加全站页面浏览代码

第二步是在容器中添加全站页面浏览代码。按照前面介绍的步骤,点击此处转到创建代码页面。这里我们要添加的是Universal Analytics版的浏览量代码。因此我们选择跟踪代码类型为Universal Analytics,然后需要在你的Universal Analytics管理界面中找到所需的跟踪ID并粘贴到这里。最后选择跟踪类型为浏览量。

添加好代码后,还有一个必须的工作,就是为代码设置触发规则。这是Google Tag Manager的一个强制规定,每一个代码都必须有一条触发规则,即使你的代码是在网站所有页面触发的,也必须再单独添加一条所有页面触发的规则,这个步骤不能省。没有设置触发规则的代码将无法发布。也无法正常追踪和收集数据。

在添加代码界面的右上角有触发规则和阻止规则。触发规则是指此代码在满足哪些条件时可以被触发执行。点击“添加”,在添加规则界面提供了两种选择,可以使用GoogleTag Manager提供的默认规则,或是以前添加过的规则。也可以选择创建新规则。这里我们从现有规则中选择Google提供的所有页面规则。这也是Google Tag Manager提供的唯一一个规则,其他的规则都需要我们自己来单独创建。

与触发规则相反,阻止规则是指此代码在满足哪些条件时不被触发。这里我们选择添加阻止规则,并选择创建新规则。在新规则中,我不希望追踪代码在页面预览时被触发,因此输入阻止条件为当URL中包含?preview参数时追踪代码不被触发。并点击保存。

现在整理一下前面做的工作,我们给Google Tag Manager容器添加了一个Universal Analytics浏览量类别的追踪代码,并给这个代码设置了两个规则,分别是触发规则和阻止规则。规定这个代码在网站中的所有(添加了容器的)页面中触发,但当页面处于预览状态时不被触发。下面开始我们继续创建和添加事件监听部分的代码。

 

3,创建链接事件监听代码

第三步是创建链接事件监听代码,这一步中有两个步骤,第一个步骤是创建链接点击监听器。第二个步骤是创建Universal Analytics的事件追踪代码,并设置代码动态获取页面链接中的属性值。下面我们分别来说明这两个步骤。

第一个步骤是创建链接点击监听器,选择新建代码,然后再跟踪代码类型中选择链接点击监听器。如果你的页面容器代码没有放在<body>后面。而是放在了页面尾部</body>的位置,那么这里就需要设置一个等待时间。

和所有新添加的代码一样,链接点击监听器也需要设置一个触发规则才可以正常工作。如果你希望监听网站中所有页面的点击事件,那么选择添加所有页面规则即可。如果只监听某一个页面或一类页面中的点击事件,那么选择创建新规则,给出要监听页面的URL规则即可。

第二个步骤是创建Universal Analytics的事件追踪代码。请注意,因为前面创建浏览量类追踪代码时选择的是Universal Analytics,所以这里也必须保持一致。否则事件代码可能不会正常工作。再次点击新建代码,选择跟踪代码类型为Universal Analytics,并输入与之前设置的浏览量类跟踪代码相同的跟踪ID。

然后在跟踪类型部分选择为事件。这时下面会出现事件跟踪参数的四个字段。我们需要对这四个参数中所要抓取的内容进行设置。这里有两种设置的方法。第一种是将参数的值写死。比如在类别参数中,我直接输入了Click。这样无论哪个链接被点击,返回的事件类别参数的值都将是Click。第二种是让事件追踪中的参数按照用户所点击的链接来动态的获取参数值。例如当用户点击全局导航中的一个链接时,类别字段的值就记录为Nav,当用户点击一个促销商品链接时,类别字段的值就记录为promo。这时你就需要选择参数字段后面的灰色部分。在下拉框中进行选择。Google Tag Manager默认可以记录链接中的两类属性,分别是id和classes。因此如果你希望事件追踪中的“操作”参数记录链接中的id属性值,那么在“操作”参数中选择{{element id}}即可。

这里有一点需要说明的是,你需要预先对网站中的链接进行命名和属性标记,并将这些属性和标记名称写在链接的id或classes属性中,然后Google Tag Manager的链接事件监听功能才能获取到这些值。这种方法现在已经使用的非常普遍,以下是亚马逊和苹果的两个实例:

<a href='/ref=gno_logo' id='nav-logo' class='nav_a nav-sprite' alt='Amazon'>

<a href="/cn/iphone-5c/videos/#video-greetings" class="black hover-white tv">观看电视广告</a>
<a href="/cn/iphone-5c/videos/#video-product" class="black hover-white video last">观看视频</a>

这里有朋友可能会问,Google Tag Manager默认只记录id和class两个属性,如何我有更多的属性值需要记录,或者是记录其他属性中的内容该怎么办呢?方法很简单,就是使用宏。这个我们会在第四步中说明并给出具体的方法。

最后为事件追踪代码设置触发条件,将{{event}} = gtm.linkClick 条件设置到触发规则中即可。除了直接从代码界面添加规则以外,你也可以选择从容器下的规则目录来创建新规则,然后再到代码界面来添加刚刚创建的规则。所有规则都可以在不同代码间进行复用。因此建议在为规则命名时尽量使用详细的功能描述。方便后续的规则查找和使用。

 

4,创建自定义宏

第四步是创建自定义宏,这并不是一个必须的步骤,在本篇文章的例子中,只有当你需要使用事件追踪功能动态获取更多属性值时,才需要使用到自定义宏。对于前面提到的那个问题。如果需要自动获取更多属性的值,就可以通过创建宏来完成。,

在容器概览页面中点击新建,选择宏。会出现以下界面。输入要创建的宏的名称,最好和现有宏的命名方式保持一致。例如我们要建一个获取name属性值的宏,那么名字就叫element name。然后在宏类型中选择自定义Java Script。然后将下面的一段JS粘贴到自定义Java Script部分即可。

代码很简单,如果你想获取其他名称的属性值,直接替换代码第三行的name就可以。

function() {
var e = {{element}};
return e.name.toLowerCase();
}

新建的宏会和Google Tag Manager中已有的宏一样,出现在宏列表中。此时我们再返回到之前创建的事件追踪代码的设置界面。在事件跟踪参数的类别字段点击后面的灰色部分,会发现列表中已经有我们刚刚设置的element name宏了。选择这个宏。然后保存对事件追踪代码的修改。

现在在Google Tag Manager中的所有设置都已经完成了。我们来回顾下之前做的工作。首先是创建一个容器,并在网站中的所有页面添加容器代码。容器代码添加好后,我们后面所有的设置就都在这个容器中进行了。随后,我们分别在容器中添加了三个代码,分别是Universal Analytics的浏览量追踪代码,链接点击监听器代码和Universal Analytics的事件追踪代码。并分别为这三个代码设置了触发规范和阻止规则。下面,我们来验证下之前所做的设置是否能正常工作。

 

5,创建版本和调试代码是否正常工作

第五步是创建版本和调试代码。返回到容器概览界面中,点击右侧的创建版本按钮。此时系统提示我们为容器创建了一个新的版本。这个版本会以版本号的形式出现在左侧容器下的版本菜单中。

创建完版本后,我们就可以开始测试容器代码的工作状态了。在版本概览菜单中,点击预览和调试会进入到版本调试模式。在调试模式下,我们可以看到之前所设置的代码在页面中的触发情况。以下是我们之前设置的代码在页面中的测试结果。

在Google Tag Manager的测试界面中,显示了三部分内容。第一部分是目前正在预览和测试的版本号。如右上角显示的,目前在测试的版本号是27。第二部分是此页面所包含的追踪代码名称,例如追踪网站页面浏览代码,监听所有链接点击事件代码等等。第三部分是此代码的状态,代码是否触发,何时触发,以及触发的次数。例如页面浏览类代码是在Tag Manager加载时触发的,事件追踪代码由于没有发生链接点击行为,还没有被触发,而点击事件代码被触发了3次。

这里有一个问题需要注意,前面的预览和测试只能检查代码是否正常触发,而代码中抓取的内容是否正确需要在返回数据和报告中进行检查。

 

6,重要步骤,发布!

第六步是整个过程中最关键的一步,对容器进行发布。只有发布后容器和代码才会正常工作并收集数据。,

以下是代码版本界面,界面中显示了我们在当前版本对容器进行的所有设置,添加的代码,设定的规则,以及使用的宏。在这里你可以对之前的设置做最后的检查。一切无误后就可以点击右上角的发布按钮了。

7,检查追踪数据是否正常

第七步也是最后一步,是检查追踪代码抓取到的值是否正确,以及最终Universal Analytics报告中的值和数据是否正确。首先我们通过Httpwatch来检查当用户点击一个链接时,Google Tag Manager的事件监听功能是否可以获取链接中不同属性的值。为此,我们单独做了一个测试链接。并以属性名称作为属性的值,便于与事件参数的设置进行对比。,

在下面的链接中,我们单独设置了三个属性,class,id和name,按照之前Tag Manager中对事件代码的设置,类别=name属性,操作=id属性,标签=class属性。

<a href="http://bluewhale.cc/tag_manager.html"class="class"id="id"name="name">class&id&name</a>

通过Universal Analytics的返回数据可以看到:

  • ea参数为event action的缩写,Vlaue等于id
  • ec参数为event category的缩写,Value等于name,
  • el参数为event label的缩写,Vlaue等于class

最后的一个检查是对Universal Analytics的事件报告。保证整个从代码设置到收集数据以及最终的数据返回过程没有错误。在下面的事件报告截图中我们看到,和之前预想的一样,链接中指定的属性值出现在了事件报告的特定字段中。

本篇文章很详细的介绍了Google Tag Manager的基本功能和事件监听功能。主要是因为这个功能还比较新,一些细节的错误可能会导致整个代码无法正常工作。设置流程中有些步骤还可以进一步简化。这个我们会在后续的Tag Manager文章中单独介绍。

—【所有文章及图片版权归 蓝鲸(王彦平)所有。欢迎转载,但请注明转自“蓝鲸网站分析博客”。】—

 

 

 

相关文章:

  1. 使用Tag Manager管理Google动态再营销

Comments

  1. roy says:

    你好,请问电子商务交易的追踪怎么设置代码?怎么放到这个标签的前面需要哪些交易变量参数?

    [回复]

  2. Tommy says:

    之前想搞这个功能,搜了很久才找到一篇英文博客,不过本篇解释还是非常详细的

    [回复]

  3. Jellzone says:

    正在考虑用tag manager 替换网站目前所有的代码,目前就是网站还是不是很正常,adwords的电子商务跟踪数据GA老是跟踪不到,不知道是哪里出了问题

    [回复]

  4. UCD汤米 says:

    我想咨询一下,如果是监听站外链接,利用GA事件跟踪是否可以实现呢?

    [回复]

Speak Your Mind

*

Website Feedback
Feedback Analytics