IT博客汇 | 4.2网站代码部署

4.2网站代码部署

Tony Song发表于 2017-04-02 05:59:31

不同的网站分析系统有不同的代码规则和语法要求。通常索要实现的功能越强大，代码部署工作越复杂。大多数免费的网站分析系统由于功能简单，只需要部署一段页面通用脚本即可实现。如下是一段百度统计的脚本，只需将代码部署到所有检测页面即可。

4.2.1通用全局脚本部署

通用全局脚本是所有网站页面都需要引用的脚本，由于其具有通用性，因此大多数情况下会单独生成脚本放到特定文件中通过一段页面HTML代码引用，如下是引用Webtrekk的全局JS代码：
<script type=”text/javascript” src=”http://www.searchmarketingart.com/analytics/webtrekk_v3.js”></script>
通用全局脚本具有三种功能：账户基本信息识别、数据采集规则定义、特定采集功能集成。

1.账户基本信息识别

账户基本信息包括系统分配的账户ID、Cookie定义、跟踪域和网站域名等。这些信息共同组成账户基本信息，用来标识要为哪个网站采集数据、网站唯一识别标识是什么、数据采集到之后发送到哪、Cookie信息记录存放方式等。如下是一段Webtrekk通用JS中的账户基本信息代码：
var webtrekkConfig = {
trackId : “673163862191775”,
cookie : “1”,
trackDomain : “tonysongblog01.wt-cn01.net”,
domain : “www.searchmarketingart.com “,

};
该信息根据不同账户分配的具体值及自身实际情况填写。该代码也可以写入通用页面代码，但考虑到便于后期维护管理管理并减少出错率通常都写入全局调用JS。

2.数据采集规则定义

数据采集规则定义是通用全局脚本的核心，代码的功能包括定义数据采集和发送的时间、数据有效期、数据覆盖、数据错误判断和异常值处理、数据运算逻辑、数据赋值规则和指定变量、数据采集方法等。
这部分代码是网站数据正确采集的规则保障，在代码实施过程中不能更改，否则可能导致数据无法正常采集。如下是Webtrekk采集代码片段：
**************Don ‘t change anything beyond this line **************
var webtrekkUnloadObjects=[];var webtrekkLinktrackObjects=[];var webtrekkHeatmapObjects=[];var webtrekkV3 = function($b){var webtrekkUnload=function($c,$d){if($e.cookie==”1″&&!$e.optOut&&!$e.deactivatePixel){$e.firstParty();};var $f=($d)?$d:($e.formObject&&$c!=”noForm”)?”form”:”link”;if($e.beforeUnloadPixel!=false){$e.beforeUnloadPixel();}else if($f==”form”){$e.executePlugin($e.getPluginConfig(“form”,”before”));};var p=””;if($e.config.linkId){p+=”&ct=”+$e.wtEscape($e.maxlen($e.config.linkId,255));if(p){if($e.linktrackOut){p+=”&ctx=1″;};var $g=$e.ccParams;if(typeof($g)==’string ‘&&$g!=”){p+=$g;}}};if($e.wtEp){if($e.wtEpEncoded){p+=$e.wtEp;}else{var $h=$e.wtEp;if(typeof($h)==’string ‘&&$h!=”){$h=$h.split(/;/);
…

3.特定采集功能集成

特定采集功能在很多网站分析系统中都成为“Plugins”即插件，它其实是一段JS代码，但由于这些代码不是系统必须功能，且可能涉及到费用问题，因此，企业只在需要时部署。
实现特定采集功能通常需要3步工作：
步骤一将实现特定功能的Plugins JS代码写入通用全局脚本；
步骤二在通用全局脚本中，启用Plugins功能；
步骤三在网站分析系统后台，指定该变量的赋值字段，即通过特定Plugins采集到的数据放到哪个字段或变量。（注：如果已经在Plugins JS中指定变量则无需重复定义）
现以Webtrekk系统应用举例：根据业务需求，想要收集用户在每个页面浏览的数据情况，即每个页面用户看了全部内容的5%、20%还是100%。该需求反映到数据系统中，可以通过Scrollposition插件实现，具体步骤如下：

步骤一 将Scrollposition脚本写入通用全局脚本，代码如下：

//Plugins Scrollposition
function wt_scrollposition(conf) {
if(conf.mode == “page” && conf.type == “after” && conf.requestCounter == 1) {
var instance = this;var event = ((this.wtTypeof(window.onbeforeunload)) ? “beforeunload” : “unload”);var de = document.documentElement;var scrollPosition = window.scrollY+window.innerHeight || self.scrollY+self.innerHeight || (de&&de.scrollTop+de.clientHeight) || document.body.scrollTop+document.body.clientHeight;this.registerEvent(window, ‘scroll’, function () {var Y = window.scrollY+window.innerHeight || self.scrollY+self.innerHeight || (de&&de.scrollTop+de.clientHeight) || document.body.scrollTop+document.body.clientHeight;if (Y > scrollPosition) {scrollPosition = Y;}});this.registerEvent(window, event, function () {var YMax = window.innerHeight+window.scrollMaxY || self.innerHeight+self.scrollMaxY || (de&&de.scrollHeight) || document.body.offsetHeight;scrollPosition = Math.round(scrollPosition / YMax * 100);if(scrollPosition > 100) {scrollPosition = 100;}for(;;) {if(scrollPosition % 5 != 0) {scrollPosition++;}else {break;}}instance.sendinfo({linkId : “scrollposition”,customClickParameter : {“540” : “” + scrollPosition}});});
}
};

步骤二 在通用全局代码中，通过executePluginFunction启用脚本功能：

var webtrekkConfig = {
trackId : “673163862191775”,
cookie : “1”,
trackDomain : “tonysongblog01.wt-cn01.net”,
domain : “www.searchmarketingart.com;webtrekk.searchmarketingart.com”,
mediaCode : “wt_mc”,
executePluginFunction : “wt_scrollposition ”
};

步骤三 在“Webtrekk—自定义参数—事件参数”模块中配置该功能。由于在脚本中已经指定Scrollposition的变量参数是540，因此直接选择该参数ID，然后保存即可。如图4-4所示。

图4-4 Webtrekk页面浏览百分比设置
最后在系统中看到页面浏览百分比数据报告。如图4-5所示。

图4-5 Webtrekk页面浏览比分比报告

4.2.2通用页面脚本部署

通用页面脚本可以针对不同页面针对性采集数据，如不同产品页面有不同的产品名称。页面脚本具有比全局脚本更灵活的控制规则，针对不同页面按照内部数据需求收集相关数据。
通用页面脚本通常可以实现不同页面的数据区分采集，包括：自定义页面名称、页面热力图、产品信息追踪、渠道信息追踪、订单信息追踪等。现以Webtrekk为例简要介绍每个功能。

1.自定义页面名称

每个页面都有相应的URL地址，但该地址不便于业务理解和识别，因此需要指定具有特殊规则的值。一种做法是采集每个页面的Title作为页面名称，但更灵活的做法是根据企业需求定制该名称，如将产品类别、产品名称、网站层次目录等写入页面名称，如下是一段针对产品终端页的代码示例：

wt.contentId = “产品终端页 | 大家电 | 海尔彩电”; //任意指定页面名称

2.页面热力图设置

大多数页面点击热力图的配置需要两步，第一步是部署特定页面，该步骤不是必需的，只在有特定需求情况下部署，如只针对某些页面开启热力图；第二步是查看时配置热力图。在页面中控制热力图启用与否的代码如下：

<div class=”wrapper” id=”wt_refpoint”> //针对居中对齐的网站设置热力图参考点
wt.heatmap = “1”; //启用热力图跟踪，0为不启用

3.产品信息跟踪

产品信息跟踪是电子商务跟踪的基本模块，产品相关跟踪包括产品名称、分类、数量、价格、状态等标准字段以及通过自定义变量收集的自定义字段。自定义字段通常包括：产品促销（是否促销）、促销分类（抢购、团购、预售等）、产品属性（尺寸、颜色、折扣等）。如下是一个页面中（通常是购物车流程）同时包含两个商品的标准跟踪代码：

wt.product = “pullover;jeans”; // 产品名称
wt.productCategory = {
1 : “tops;jeans”, // 产品一级类别，可选
2 : “noname;levis” // 产品二级类别，可选
};
wt.productQuantity = “2;1″; // 产品数量，可选
wt.productCost = “99.90;69.95″; // 产品总价格，可选
wt.productStatus = “conf”; // 产品状态，可选——加入购物车、确认、浏览 (add|conf|view)

4.渠道信息追踪

渠道信息跟踪是指对站外投放和合作推广的流量做特定标记，以便于衡量投放效果。渠道跟踪标记是在URL中实现对渠道的识别，如下定义了一个标记为google0103的渠道：

http://www.searchmarketingart.com/?wt_mc=google0103

渠道信息跟踪通过特定代码标记，标记代码可以定义为任何参数；除了识别“渠道身份”外，还可以做特定事件识别或分类。

wt.mediaCode = “mc”; // 自定义的跟踪代码
wt.mediaCodeCookie = “sid”; // 用来对广告在一次visit中多次进入进行排重，只计算第一次
wt.campaignId = “mc%3DNewsletter_2010_08″; // 用来对广告进行分类
wt.campaignAction = “view”; // 用来识别广告动作是基于浏览还是惦记，值为 view | click

5.订单信息追踪

订单信息追踪是电子商务跟踪的核心，包括订单ID、订单价值、订单产品信息、优惠券信息等，产品信息可通过上述“产品信息跟踪”代码实现。同时，在订单提交成功页，也可以加入自定义参数来丰富跟踪数据，如订单状态、积分使用、优惠券信息、配送方式、支付状态等。如下是标准跟踪和部分自定义跟踪代码：

wt.orderId = “M-12345″; //订单ID
wt.orderValue = “52.99″; //订单价值
wt.couponValue = “10.5”; //优惠券价值
wt.customEcommerceParameter = {
1 : “944”, // 针对订单级别应用的积分值
2 : “顺丰快递;中通快递 ” // 针对产品级别的配送方式、
3 : “未支付”, // 待审核
};

6.针对不支持JS客户端的跟踪

浏览器支持JS触发是网站分析工具收集数据的基本前期，不支持JS的浏览器（用户）信息无法通过JS方式实现。目前支持JS的浏览器比例大概在95%左右，虽然这个比例足以实现我们对网站用户行为的分析和判断，但某些情况下我们还是想跟踪不支持JS或不启用JS跟踪的用户信息。针对这部分用户，通常采用1×1硬图片形式跟踪用户，代码如下：

7.自定义参数发送顺序

所有的网站分析工具的每条请求都是有长度限制的，如Webtrekk在3.2.5版本之前的Pixel最大只支持2K数据，之后的Pixel最大支持7K数据。如果在页面信息采集过程中由于变量过多或某个变量值过长可能会导致数据长度超过限制，重要数据可能被丢失。为此，系统允许指定某些重要参数优先发送。在如下代码中，如果存在ov、oi、st、co、qn、ba、cd、cs15、cs16、cs17、cs18、cs19、cs20，则优先发送数据：

wt.paramFirst = “ov;oi;st;co;qn;ba;cd;cs15;cs16;cs17;cs18;cs19;cs20;”;

8.页面JS加载的安全措施

JS代码可能由于很多原因产生错误而无法正确加载，这样会直接导致JS代码之后的其他HTML代码无法执行，导致页面信息展现甚至整个页面空白的情况。针对这种情况，可以定义一个函数来判断JS是否出现错误，如果正确，则继续加载JS脚本。

if(typeof(webtrekkV3) == “function”){
var webtrekk = {
contentId : “”,
linkTrack : “link”,
linkTrackAttribute : “id”,
heatmap : “1″,
form : “1″,
formAttribute : “id”
};
var wt = new webtrekkV3(webtrekk);
wt.sendinfo();
}

9.页面JS延迟加载控制

毫无疑问，更多的JS会减缓页面加载速度（JS的延缓作用其实是微乎其微的，相比页面中图片等因素的延缓作用，该延缓可以忽略不计），大多数技术处理是把JS放到页面底部，等其他代码加载完成之后再加载JS。系统允许使用setTimeout控制JS延迟加载时间，如下代码控制延迟3秒执行脚本。

小提示延迟加载可能导致采集到的数据缺失明显，很多用户可能在代码加载前（3秒内）就已经退出页面，导致无法跟踪到。

10.多账号跟踪设置

很多大公司由于体制和权限划分的原因，可能需要在底层数据采集时即进行分账号（区分数据包或Profile）。此时需要配置多账号跟踪：

var wt1 = new webtrekkV3(); // 生成的第一个实例
wt1.trackId=”111111111111111”; // 为第一个实例指定TrackID
wt1.sendinfo(); // 为第一个实例发送跟踪请求
var wt2 = new webtrekkV3(); //生成的第二个实例
wt2.trackId=”222222222222222”; //为第二个实例指定TrackID
wt2.sendinfo(); //为第二个实例发送跟踪请求

4.2.3特定页面脚本部署

特定页面脚本部署相对于通用页面脚本，更侧重于跟踪页面某个元素或对象的跟踪，如页面事件、下载、表单等。常用的针对特定页面对象的跟踪包括事件追踪、表单追踪、站内搜索行为跟踪、下载跟踪、登录/注册跟踪等。

1.事件追踪

事件追踪包括页面所有链接、非连接（Javascript脚本、锚点等）的点击次数跟踪，也可以定义某个事件的触发次数，如某个按钮的点击次数，视频播放或暂停的使用次数。事件追踪是页面动作的常用跟踪方法，如下是针对页面“联系我们”动作的跟踪代码：

<a href=“contact.htm” onclick=“wt.sendinfo({linkId:’acttionname’);”>Link to
contact page</a> //针对某个链接启用事件跟踪

2.表单追踪

表单跟踪是做表单分析的关键，表单可以跟踪到表单的填写次数、放弃次数，表单值等，结合结果数据（放弃率）和过程数据（值）可以更好的分析表单流失原因，该方法常用于注册、登录、购物车、试用等表单分析场景。

wt.form = “1”;//启用表单跟踪
wt.formFullContent = “author;email;url;comment”; //设置要跟踪表单值的字段

<input type=“hidden” name=“wt_form” value=“1″> //标记表单

3.站内搜索跟踪

站内搜索行为跟踪有两种跟踪方式：如果是以GET方式进行响应的，只需在系统后台配置搜索参数如s、word、Keyword等即可，无需代码部署；如果是以POST（判断是POST还是GET，最简单的方法是搜索后看URL中是否有搜索参数）实现的，则需要通过代码实现：

wt.internalSearch = “adidas shoes”;//站内搜索词

4.下载跟踪

下载跟踪可以使用事件追踪实现，另外也支持下载行为的单独跟踪
wt.linkTrackDownloads = “pdf;doc”; //指定要跟踪的下载格式

5.登录注册用户跟踪

无论是基于Visit的访问分析，还是基于Visitor的访客生命周期分析，大多数网站分析系统都是基于匿名的用户数据提供分析视角。用户登录后，除了可以通过事件追踪用户登录注册的事件、通过表单追踪用户表单完成情况，还可以追踪用户ID，并以用户真实ID作为唯一识别标识进行用户行为分析。如下代码记录了用户登录注册后的ID，该ID与企业CRM中的用户ID一致，可用来做用户信息扩展和外部数据导入时的主键使用。

wt.customerId = “372d1a04d003eebc09e17330d5d3117c”;//用户ID

以上功能基本可以满足大多数网站跟踪需求，但还有些场景是特殊情况下使用的，通过JSON实现代码跟踪、排除特定页面的参数、针对Flash和媒体的跟踪、数据类别（将产品、页面、媒体、时间、CRM进行分类）、自定义参数（会话、页面、事件、电子商务、营销活动、独立参数）等，这些根据实际需要设置。