利用“Google Tag Manager V2”实现滚动追踪

吕东昊，iCDO翻译志愿者

谷歌标签管家第二版本中的滚动追踪功能可谓是另一个搜集访客行为信息的利器，什么是滚动追踪？如何设置并实现追踪？本文将为你一一解答。

滚动追踪的概念

如果你想收集更多有关访客行为的信息,可以使用“谷歌标签管家第二版”（Google Tag Manager V2）中设置的“滚动追踪”功能，滚动追踪功能是衡量受众如何浏览你所发布的内容以及阅读量的功能，它让你更进一步了解你的受众行为变得很容易。

好好利用“滚动追踪功能”吧。用户向下滚动页面时，这个功能能够搜集阅读完成度，并以百分比形式来呈现，例如0％，25％，50％，75％和100％，像素深度及阅览时间等有价值的信息。滚动追踪报告会记录你的网站页面中发生的主要行为。

在本文中，我将逐步演示如何使用谷歌标签管家第二版（Google Tag ManagerV2）来“滚动追踪”你的目标网页。也许初看时，你会很难理解如何通过Google Tag Manager实现“滚动追踪”。但是如果你遵循本文中所说的主要步骤，你会发现实现深度滚动追踪是很容易且有价值的。

让我们开始吧。

滚动追踪准备：第一步

首先，最好的做法是了解Google Tag Manager（或任何代码管理系统）的运作方式。对GTM的术语（例如代码，触发器和变量）以及GTM工作原理有个基本的认识将有助于你的滚动追踪实施。

你需要做的第二步是通过Google Analytics在网站网页中安装Google Tag Manager container（谷歌标签管理容器）。

第三步：要使用谷歌标签管家第二版（Google Tag Manager V2）实现滚动追踪，你先要有jQuery Scroll Depth。 你可以在下面找到脚本。以下这段脚本是由Rob Flaherty开发的。

（脚本较长，置于本文的最末端，建议您收藏本文后时间较为宽裕时再进行参考和设置）

滚动追踪准备：第二步

部署好上述“滚动追踪”程序代码后，使用你的谷歌ID和密码登陆https://tagmanager.google.com。 此刻，我猜你已经准备好了GTM容器代码片段，并且已在你的网站中安装了谷歌分析器（Google Analytics）。 如果是这样的话，你的准备工作就算做得很好了。

接下来，你需要在谷歌标签管家第二版（Google Tag ManagerV2）上创建一个新标签。选择“CUSTOM HTML TAG”（自定义html 代码）。此标签将保留我们的“下拉浏览深度”（Scroll Depth）代码。 因此，将代码复制并覆盖到CUSTOM HTML TAG中。在此段时间内保存此标签。等我们创建完触发器后，会回来对它进行重新配置。

注：你可以为自定义代码起任何描述性的名称。

滚动追踪实施：设置触发器

接下来，我们需要为我们的“Customer HTML Tag”创建一个触发器。首先，点击“触发器”，再点击“新建”，并给你的触发器起名。在“Choose Event（选择事件）”中，单击“Custom Event（自定义事件）”。然后继续。

我们将为这个触发器创建一个触发规则。

事件名称：滚动距离（Scroll Distance）

事件：组成、滚动距离（Scroll Distance）

保存触发器

请记住，此刻我们并没有完成在Custom HTML Tag中的设置。 这是因为我们刚刚为它创建了一个触发器，触发器此时已经可以连接到Custom HTML Tag。

所以，回去点击标签，选择你之前创建的标签。 我们将通过一些页面来触发Custom HTML Tag。接下来就简单了，选择你之前创建的触发器：

变量：页面路径。

操作：包含。

“值”就是你的网站网址，然后保存该标签。

滚动追踪实施：设置变量

在Google Tag Manager中，需要遵循一项规则：每个“标签”都需要对应“触发器”。每个触发器都需要“变量”来触发。

要设置滚动追踪的变量，你需要创建三个数据变量层。点击“新建”。 然后通过这些设置来确定选择的数据变量层：

“数据层“名称：项目类别

数据层版本：第二版

保存变量。 请参考以下图片：

创建第二个数据变量层如下：

数据层名称：eventAction

数据层版本：V2

保存变量。

创建第三个数据变量层如下：

数据层名称：eventLabel

数据层版本：V2

保存变量。

现在你完成了必要的变量设置。

谷歌事件分析追踪

在使用相应触发器创建了你的Customer HTML Tag后，现在需要创建谷歌分析事件滚动追踪任务。 因此，请选择谷歌分析作为你的产品， 选择你的标签类型， 以下图示可用来参考如何配置你的追踪标签：

追踪ID：Google Analytics

追踪类型：Event. （不是page-view）

类别：{{Page Path}}或{{eventCategory}}。 （我选择了Page Path作为类别，因为我需要确定页面的触发深度。）

操作：{{eventAction}}

标签：{{eventLabel}}

瞧，现在你差不多完成了。

滚动追踪测试

通过Google Tag Manager进行调试和检查更加简单便捷，请右键单击预览并调试。

这是在发布之前验证你的滚动追踪配置。 在新标签页中打开你的网站。 你可以访问有关你实施的内容和其它更多的非常有价值的信息。完成调试后，请不要忘记创建一个版本，然后在Google Tag Manager上启动“滚动追踪”功能。

总结

Google Tag Manager版本2与GTM 版本1相比更加简单便捷。它大大简化受众浏览深度的追踪功能。现在，你可以通过访问你的谷歌分析账户，开始享受通过GTM在你的网站上实现浏览深度滚动追踪的数据报告了。点击Real Time > Events就能查看这些类型的活动，或者在谷歌分析报告中的Behavior > Events，也能获取报告（报告生成时间大概48小时之后生成）。

你对滚动追踪功能的部署和使用有什么看法？ 你的体验如何？ 在本文留言或者公众号私信分享你的看法，评论，反馈。 如果你觉得这篇文章有用，请不吝分享！

实现滚动追踪脚本

<script>

/*!

* @preserve

*jquery.scrolldepth.js | v0.7.1

* Copyright (c) 2014Rob Flaherty (@robflaherty)

* Licensed under theMIT and GPL licenses.

*/

;(function ( $, window, document, undefined ) {

"usestrict";

var defaults = {

minHeight: 0,

elements: [],

percentage: true,

userTiming: true,

pixelDepth: true,

nonInteraction: true

};

var $window =$(window),

cache = [],

lastPixelDepth = 0,

universalGA,

classicGA,

standardEventHandler;

/*

* Plugin

*/

$.scrollDepth =function(options) {

var startTime = +newDate;

options = $.extend({},defaults, options);

// Return early ifdocument height is too small

if ($(document).height() < options.minHeight ) {

return;

}

/*

* Determine whichversion of GA is being used

* "ga","_gaq", and "dataLayer" are the possible globals

*/

if (typeof ga ==="function") {

universalGA = true;

}

if (typeof _gaq !=="undefined" && typeof _gaq.push === "function") {

classicGA = true;

}

if (typeofoptions.eventHandler === "function") {

standardEventHandler =options.eventHandler;

} else if (typeof dataLayer!== "undefined" && typeof dataLayer.push ==="function") {

standardEventHandler =dataLayer.push;

}

if(options.percentage) {

// Establish baseline(0% scroll)

sendBaseline('Percentage');

} else if(options.elements) {

sendBaseline('Elements');

}

/*

* Functions

*/

/*

* Putting this in aseparate function because the Baseline event may soon be removed entirely

*/

functionsendBaseline(action, label) {

if(standardEventHandler) {

standardEventHandler({'event':'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action,'eventLabel': 'Baseline', 'eventValue': 1, 'eventNonInteraction': true });

} else {

if (universalGA) {

ga('send', 'event','Scroll Depth', action, 'Baseline', 1, {'nonInteraction': true });

}

if (classicGA) {

_gaq.push(['_trackEvent', 'Scroll Depth',action, 'Baseline', 1, true]);

}

}

}

functionsendEvent(action, label, scrollDistance, timing) {

if(standardEventHandler) {

standardEventHandler({'event':'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action,'eventLabel': label, 'eventValue': 1, 'eventNonInteraction':options.nonInteraction});

if (options.pixelDepth&& arguments.length > 2 && scrollDistance >lastPixelDepth) {

lastPixelDepth =scrollDistance;

standardEventHandler({'event':'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': 'PixelDepth', 'eventLabel': rounded(scrollDistance), 'eventValue': 1,'eventNonInteraction': options.nonInteraction});

}

if (options.userTiming&& arguments.length > 3) {

standardEventHandler({'event': 'ScrollTiming','eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label,'eventTiming': timing});

}

} else {

if (universalGA) {

ga('send', 'event','Scroll Depth', action, label, 1, {'nonInteraction': options.nonInteraction});

if (options.pixelDepth&& arguments.length > 2 && scrollDistance >lastPixelDepth) {

lastPixelDepth =scrollDistance;

ga('send', 'event','Scroll Depth', 'Pixel Depth', rounded(scrollDistance), 1, {'nonInteraction':options.nonInteraction});

}

if (options.userTiming&& arguments.length > 3) {

ga('send', 'timing','Scroll Depth', action, timing, label);

}

}

if (classicGA) {

_gaq.push(['_trackEvent', 'Scroll Depth',action, label, 1, options.nonInteraction]);

if (options.pixelDepth&& arguments.length > 2 && scrollDistance >lastPixelDepth) {

lastPixelDepth =scrollDistance;

_gaq.push(['_trackEvent', 'Scroll Depth','Pixel Depth', rounded(scrollDistance), 1, options.nonInteraction]);

}

if (options.userTiming&& arguments.length > 3) {

_gaq.push(['_trackTiming', 'Scroll Depth',action, timing, label, 100]);

}

}

}

}

functioncalculateMarks(docHeight) {

return {

'25%' :parseInt(docHeight * 0.25, 10),

'50%' : parseInt(docHeight* 0.50, 10),

'75%' :parseInt(docHeight * 0.75, 10),

// 1px cushion totrigger 100% event in iOS

'100%': docHeight - 5

};

}

functioncheckMarks(marks, scrollDistance, timing) {

// Check each activemark

$.each(marks,function(key, val) {

if ( $.inArray(key,cache) === -1 && scrollDistance >= val ) {

sendEvent('Percentage', key, scrollDistance,timing);

cache.push(key);

}

});

}

functioncheckElements(elements, scrollDistance, timing) {

$.each(elements,function(index, elem) {

if ( $.inArray(elem,cache) === -1 && $(elem).length ) {

if ( scrollDistance>= $(elem).offset().top ) {

sendEvent('Elements',elem, scrollDistance, timing);

cache.push(elem);

}

}

});

}

functionrounded(scrollDistance) {

// Returns String

return (Math.floor(scrollDistance/250)* 250).toString();

}

/*

* Throttle functionborrowed from:

* Underscore.js 1.5.2

*http://underscorejs.org

* (c) 2009-2013 JeremyAshkenas, DocumentCloud and Investigative Reporters & Editors

* Underscore may befreely distributed under the MIT license.

*/

functionthrottle(func, wait) {

var context, args,result;

var timeout = null;

var previous = 0;

var later = function(){

previous = new Date;

timeout = null;

result = func.apply(context,args);

};

return function() {

var now = new Date;

if (!previous)previous = now;

var remaining = wait -(now - previous);

context = this;

args = arguments;

if (remaining <= 0){

clearTimeout(timeout);

timeout = null;

previous = now;

result =func.apply(context, args);

} else if (!timeout) {

timeout =setTimeout(later, remaining);

}

return result;

};

}

/*

* Scroll Event

*/

$window.on('scroll.scrollDepth',throttle(function() {

/*

* We calculatedocument and window height on each scroll event to

* account for dynamicDOM changes.

*/

var docHeight =$(document).height(),

winHeight =window.innerHeight ? window.innerHeight : $window.height(),

scrollDistance =$window.scrollTop() + winHeight,

// Recalculatepercentage marks

marks =calculateMarks(docHeight),

// Timing

timing = +new Date -startTime;

// If all marksalready hit, unbind scroll event

if (cache.length >=4 + options.elements.length) {

$window.off('scroll.scrollDepth');

return;

}

// Check specified DOMelements

if (options.elements){

checkElements(options.elements,scrollDistance, timing);

}

// Check standardmarks

if(options.percentage) {

checkMarks(marks,scrollDistance, timing);

}

}, 500));

};

})( jQuery, window, document );

jQuery.scrollDepth();

</script>

请注意，我在这段引用的jQuery Scroll Depth 代码前后分别用</ script>来标明它的起始和终止。 如果你想查询它的出处和代码原文，请访问http://scrolldepth.parsnip.io/ 或GitHub上的链接：https://github.com/robflaherty/jquery-scrolldepth/blob/master/jquery.scrolldepth.js。

提示：请确保花些时间阅读上面脚本中写的内容。它能让你了解数据收集的范围，有哪些设备和分析库可供你使用（例如GA 经典版，GA通用版）。