Piwik跟踪代码


第23章

JavaScript

Piwik采用基于JavaScript的跟踪代码来跟踪网站数据。网站上的每个页面都要被植入跟踪代码,以供Piwik启动对网站数据的跟踪。

Piwik基于JavaScript的跟踪代码

在你完成了Piwik软件安装后,方可从浏览器登录Piwik。登录页面的URL地址为:

data.example.com/piwik/piwik.php

可以从如下路径中获取你的Piwik跟踪代码:

Settings -> Websites -> View Tracking Code

为了跟踪你的网站数据,需要将如下的Piwik跟踪代码添加至每个网页上,这些是Piwik默认设置。

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//data.example.com/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>

安装Piwik软件的网站服务器具备其URL地址,如下两行指定了其URL地址:

var u="//data.example.com/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);

在你的Piwik账户中创建的每一个网站都有一个唯一的siteID,如下代码指定了其siteID = 1。

_paq.push(['setSiteId', '1']);

以下一行代码将一次浏览传输到Piwik:

_paq.push(['trackPageView']);

假如你的Piwik服务器是安装在https协议上,就需要使用以下方法去判断:

(function(){ var u=(("https:" == document.location.protocol) ?
"https://data.example.com/piwik/" : "http://data.example.com/piwik/");
...
}

更新后的跟踪代码如下所示:

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function(){ var u=(("https:" == document.location.protocol) ?
"https://data.example.com/piwik/" : "http://data.example.com/piwik/");
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>

Piwik 基于JavaScript的跟踪代码是异步的。这意味着跟踪代码能在后台执行,不会阻塞其他脚本和网站内容,使得你的网站页面的可视化布局能够更快的加载并显示给用户。更快的网页加载意味着更好的用户体验。

Piwik目标跟踪

例如,我们来演示一下如何创建一个新的目标来跟踪你的网站注册情况。

  • 在Piwik的Dashboard窗格中,单击“Goals”
  • 在“Goal Name”文本框中输入一个目标名称
  • 在“Goal is trigger”下,选择“when visitors”,并选择“Visit a given URL“的单选按钮
  • 在”where the Page Title”下,选择“contains”并在注册完成后输入URL路径,例如/registration/success.php
  • 单击“Add Goal”

Piwik 活动跟踪

为了使用Piwik跟踪活动绩效,你需要采用特定参数pk_campaign对活动广告的URL地址进行标记。

pk_campaign

例如,你的广告活动显示的URL可以是:

http://www.example.com/promo.php?pk_campaign=my-email-promo-nov-2016

对于付费搜索活动,需要跟踪关键词,对URL地址还需要增加额外的参数pk_keyword进行标记,即使用:

pk_campaign
pk_keyword

例如,你的百度付费搜索活动的URL地址可以是:

http://www.example.com/book.php?pk_campaign=baidu_ppc_tcmsb-brand&pk_kwd=the-china-mobile-seo-book

如果你的网站正同时使用Google Analytics和Piwik,你必须针对你的URL明确标记两个参数集,也就是说,两个参数集一个供Google Analytics使用,另一个供Piwik使用。

http://www.example.com/book.php?pk_campaign=baidu_ppc_tcmsb-brand&pk_kwd=the-china-mobile-seo-book&utm_source=baidu&utm_medium=cpc&utm_campaign=tcmsb-brand&utm_term=the-china-mobile-seo-book

另一个建议就是,Piwik可以识别如下两个Google Analytics的参数:

utm_campaign
utm_keyword

因为Piwik理解这两个Google Analytics的参数,因此它可以识别URL中的这两个标记。比如如下第二个URL,utm_campaign参数的值将在Piwik活动报告中作为活动名称呈现,utm_term参数的值将在关键词报告中呈现。

http://www.example.com/book.php?pk_campaign=baidu_ppc_tcmsb-brand&pk_kwd=the-china-mobile-seo-book
http://www.example.com/book.php?utm_campaign=baidu_ppc_tcmsb-brand&utm_kwd=the-china-mobile-seo-book

Piwik电商跟踪

对于电商网站,Piwik可以跟踪电商交易情况。为保证Piwik电商跟踪功能的运转,需要在购买确认页面额外增加关于交易的JavaScript代码。

跟踪一个被购买的项目(交易的):

_paq.push(['addEcommerceItem',
"sku0129303", // SKU (Compulsory)
"XYZ Fruit Juice", // Product Item Name (Compulsory)
"Food/Imported/Juice", // Category (Optional)
10.00, // Unit Price (Compulsory)
12 // Quantity (Compulsory)
]);

所有的项目都必须被添加到一个交易中(比如订单):

_paq.push(['trackEcommerceOrder',
"R0000001", // Order ID (Compulsory)
185.00, // Total (Compulsory)
180.00, // Subtotal (Optional)
0.0, // Tax (Optional)
5.0, // Shipping Fee (Optional)
false // Discount (false is no discount)
]);

在采购确认页面必须被触发的完整的Piwik跟踪代码如下所示。需要注意的是,在如下的电商跟踪代码中,一个单一交易(或者订单)中包含了2个项目。

<script type="text/javascript">
var _paq = _paq || [];
(function() {
var u="//data.example.com/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
_paq.push(['addEcommerceItem',
"sku0129303", // SKU (Compulsory)
"XYZ Fruit Juice", // Product Item Name (Compulsory)
"Food/Imported/Juice", // Category (Optional)
10.00, // Unit Price (Compulsory)
12 // Quantity (Compulsory)
]);
_paq.push(['addEcommerceItem',
"sku0617172", // SKU (Compulsory)
"Sunny Yogurt", // Product Item Name (Compulsory)
"Food/Domestic/Refrigerated", // Category (Optional)
30.00, // Unit Price (Compulsory)
2 // Quantity (Compulsory)
]);
_paq.push(['trackEcommerceOrder',
"R0000001", // Order ID (Compulsory)
185.00, // Total (Compulsory)
180.00, // Subtotal (Optional)
0.0, // Tax (Optional)
5.0, // Shipping Fee (Optional)
false // Discount (false is no discount)
]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>

Piwik事件跟踪

通过Piwik,你可以跟踪用户的行为,比如点击按钮。“trackEvent”功能就是用于跟踪例如点击按钮等事件,格式为:

trackEvent(category, action, [name], [value])

强制的参数包括:

category
action

可选参数包括:

[name]
[values]

例如,如果你要为侧边菜单按钮“Fruits”实施一个“点击事件”,可以按照如下格式使用“trackEvent”功能

_paq.push(['trackEvent', 'SideMenu', 'Click', 'Fruits']);

在你网页的真实按钮上,你需要通过“onclick”属性在<a href>标记内加入“trackEvent”功能。

<a href="http://www.example.com/fruits/" onclick="javascript:_paq.push(['trackEvent', 'SideMenu', 'Fruits']);">Freedom page</a>

Piwik自定义变量

自定义变量是由一个索引,一个名称,一个值和取值范围组成的,Piwik允许你跟踪一个用户访问特定的网页URL并记录用户的信息。

Piwik的自定义变量采取如下的格式:

setCustomVariable(index, name, value, scope)

例如,我们来跟踪那些访问网站是已经登录了的注册会员的会员ID。“setCustomVariable”功能设置了自定义变量的索引为1,名称为'logged-on',值为所跟踪会员的ID(例如 id002931),取值范围为'visit'。

_paq.push(['setCustomVariable', 1, 'logged-on', 'id002931', 'visit']);

以下的“if”判断用于校验用户是否已经访问了“member area”页面(这意味着用户已经完成登录)。如果一个用户已经登录,setCustomVariable功能将发送用户ID到Piwik的数据库中。

if (location.pathname.toLowerCase() == "/member-area/")
{
  _paq.push(['setCustomVariable', 1, 'logged-on', 'id002931', 'visit']);
}

注意,Piwik只允许使用最多5个自定义变量。



数据分析技术白皮书在2016年11月正式出版。

英文版:Piwik Tracking Codes – 繁体中文版:Piwik跟踪代码







数据分析技术白皮书上的内容按下列许可协议发布: CC Attribution-Noncommercial 4.0 International

Gordon Choi's Analytics Book