`
csstome
  • 浏览: 1522282 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JavaScript跟踪-Piwik

 
阅读更多

1、先决条件:使用新版本的JavaScript跟踪代码
2、JavaScript跟踪代码的功能
(1)自定义在Piwik中显示的页面名称
(2)手动触发目标转化
(3)考虑一个主机的“别名”,不将这个域名的链接记录为“出站链接”
(4)禁用下载及出站链接跟踪
(5)禁用特定CSS类的下载及出站链接跟踪
(6)禁用特定链接上的下载及出站链接跟踪
(7)将一个链接的点击在Piwik中强制记录为下载
(8)将一个链接的点击在Piwik中强制记录出站链接
(9)修改暂停定时器
(10)修改跟踪为“下载”的文件扩展名列表
3、其他函数
(1)自定义发送到Piwik.php跟踪脚本的JASON数据
(2)多个Piwik跟踪代码
(3)异步跟踪
(4)覆盖Piwik.js的单元测试
4、跟踪API可用的所有方法列表
5、相关文档
Piwik配备了相当强大的JavaScript跟踪API。高级用户能使用Piwik跟踪代码定制一些网站分析数据记录在Piwik中的方式。插件开发者也能向Piwik跟踪脚本发送定制化的JSON数据,并且在插件中使用这些数据。
1、先决条件:使用新版本的JavaScript跟踪代码
基本的Piwik跟踪代码如下:
<!– Piwik –>
<script type=”text/javascript”>
var pkBaseURL = ((“https:” == document.location.protocol) ? “https://{$PIWIK_URL}” : “http://{$PIWIK_URL}”);
document.write(unescape(“%3Cscript src=’” + pkBaseURL + “piwik.js’ type=’text/javascript’%3E%3C/script%3E”));
</script><script type=”text/javascript”>
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + “piwik.php”, {$IDSITE});
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script>
<!– End Piwik Tag –>

在Piwik跟踪代码中,{$PIWIK_URL}将被替换为你的Piwik URL,{$IDSITE}将被替换为你在Piwik中跟踪的网站ID。
如果你的Piwik跟踪代码不是这样的,那么,你可能正在使用过时的旧版本。旧版本仍将按期望工作,继续跟踪你的访问者。但是,为了使用这个页面中所介绍的所有功能,你将需要使用新版本的跟踪代码。请访问你的Piwik管理部分,请求给定网站的JavaScript代码,并且将你的页面更新为新的代码。
2、JavaScript跟踪代码的功能
(1)定制Piwik中显示的页面名称
默认情况下,Piwik在Piwik界面中使用当前页面的URL作为页面的名称。如果您的URL很复杂,或者如果你想要定制Piwik跟踪页面的方式,你能在JavaScript标签中指定页面名称。

常用的方法是使用HTML标题的值:
[...]
piwikTracker.setDocumentTitle(document.title);
piwikTracker.trackPageView();
[...]
高级用户也能动态产生页面名称,例如在PHP中:
[...]
piwikTracker.setDocumentTitle("<?php echo $myPageTitle; ?>");
piwikTracker.trackPageView();
[...]
(2)手动触发目标转化
默认情况下,目标在Piwik被定义为部分URL的“匹配”(开始、包含或正则式匹配)。你也能默认将特定页面查看、下载或出站链接跟踪为目标。
在一些情况下,你想要将其他类型的动作登记为转化,例如:
•访问者提交一个表单:
•访问者在页面上停留超过给定时间
•访问者与你的Flash应用程序进行了一些交互
•用户提交了购物车并完成了支付:你能将Piwik跟踪代码提供给支付网站,这个网站将在稍后在你的Piwik数据库中登记这个转化以及自定义的收入。
•等等
使用Piwik JavaScript跟踪手动触发一个目标,你可以简单的这样做:
[...]
piwikTracker.trackGoal(1); // 记录目标1的一次转化
[...]
你也能为这个目标记录自定义收入,例如,你可以生成对跟踪目标的动态调用,以便设置这笔交易的收入:
[...]
piwikTracker.trackGoal(1, <?php echo $cart->getCartValue(); ?>); // 记录设置了自定义收入的目标1的一次转化
[...]
目标跟踪的更多信息见跟踪目标文档。
(3)考虑一个主机的“别名”,不将这个域名的链接记录为“出站链接”
默认情况下,所有域名不是当前域名的连接都被认为是出站链接。如果你有多个域名,不希望将指向这些网站的链接被认为是“出站链接”,那么你可以在一个域名数组中指定。如果你想要忽略特定域的二级域的所有点击,那么可以使用通配符。
[...]
piwikTracker.setDomains(["*.hostname1.com", "hostname2.com"]); // 至少目前跟踪的网站应添加到这个数组中
piwikTracker.trackPageView();
[...]

(4)禁用下载及出站链接跟踪
Piwik跟踪代码默认启用点击和下载跟踪。禁用所有自动下载和出站链接跟踪,你必须去掉对enableLinkTracking()函数的调用:
[...]
// 我们注释掉启用链接跟踪的函数
// piwikTracker.enableLinkTracking();
piwikTracker.trackPageView();
[...]

(5)禁用特定CSS类的下载及出站链接跟踪
你能禁用对特定CSS类的下载及出站链接的自动跟踪
[...]
piwikTracker.setIgnoreClasses( "no-tracking" ); // 你也能传递一个字符串数组
piwikTracker.trackPageView();
[...]

这将导致链接<a href=’http://example.com’ class=’no-tracking’>Test</a>的点击不被计算。
(6)禁用特定链接的下载或出站链接的跟踪
如果你想要一直忽略特定链接的下载或出站链接跟踪,你能为它添加“piwik_ignore”CSS类:
<a href=’latest.zip’class=’piwik_ignore’>不想跟踪为下载的文件</a>
(7)将一个链接的点击在Piwik中强制记录为下载
如果你想让Piwik将一个给定链接考虑为下载,那么,你可以为这个链接添加“piwik_download”CSS类:
<a href='last.php'class='piwik_download'>我想要跟踪为下载的链接</a>
注:你可以自定义和重命名用于强制被记录为下载的点击的CSS类:
[...]
// 现在所有“download”CSS类的链接将为记录为下载
piwikTracker.setDownloadClasses( "download" ); //你也可以传递一个字符串数组
piwikTracker.trackPageView();
[...]

(8)将一个链接的点击在Piwik中强制记录出站链接
如果你想让Piwik将一个给定的链接考虑为出站链接(指向当前域或一个别名域的链接),那么,你可以为这个链接添加“piwik_link”CSS类:
<a href='http://mysite.com/partner/'class='piwik_link'>我想要跟踪为出站链接的链接</a>
注:你可以自定义和重命名用于强制被记录为出站链接的点击的CSS类:
[...]
//现在所有“external”CSS类的链接上的点击将被计算为出站链接
piwikTracker.setLinkClasses( "external" ); //你也可以传递一个字符串数组
piwikTracker.trackPageView();
[...]

(9)修改暂停定时器
当访问者点击文件下载,或点击出站链接时,Piwik将记录它。为了这样做,Piwik在重定向用户到请求的文件或链接之前添加了一小段延迟。我们使用的默认值是500ms,但是你可以将它设置为更短的时间。但是,需要注意的是,这样做会带来由于这段时间过短而使Piwik无法记录数据的风险。
[...]
piwikTracker.setLinkTrackingTimer( 250 ); // 250 毫秒
piwikTracker.trackPageView();
[...]

(10)修改跟踪为“下载”的文件扩展名列表
默认情况下,任何以下列这些文件扩展名之一结尾的文件在Piwik界面中都会被认为是“下载”:
7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd||xls|xml|z|zip
为了替换你想要跟踪为文件下载的扩展名列表,你可以:
[...]
piwikTracker.setDownloadExtensions( "jpg|png|gif" ); //我们现在只跟踪图片上的点击
piwikTracker.trackPageView();
[...]

如果你想跟踪新的文件名类型,你可以仅将它添加到这个列表中:
[...]
//点击以mp5或mp6结尾的URL将被计算为下载
piwikTracker.addDownloadExtensions( "mp5|mp6" );
piwikTracker.trackPageView();
[...]

3、其他函数
(1)向piwik.php跟踪脚本发送自定义JSON数据(插件开发者)
例如,向一个(虚构的)跟踪插件发送用户ID数据:
[...]
var user = { 'userId' : user_id };
piwikTracker.setCustomData( user );
piwikTracker.trackPageView();
[...]

在trackLink方法中,你也可以为特定点击发送自定义数据。例如,发送交易数据供虚构的电子商务跟踪插件使用。
[...]
var trans = { 'orderId' : order_id,
'storeId' : store_id,
'total' : total,
'city' : city,
'state' : state,
'country' : country,
'skus' : 'A;B;C',
'units' : '1;2;1'
};
piwikTracker.trackLink( '/store', 'addTransaction', trans );
[...]

所有的自定义数据能被设置为JASON对象。Piwik代码将自动编码JASON对象并且构建为一个字符串版本,随后你可以在php段使用json_decode()解码。我们使用json.org上的开源JSON工具。
注:目前,自定义数据不会记录在Piwik数据库中。插件使用的自定义数据必须在自己的表中存储数据,然后进行归档。如果你需要别人帮忙构建这样的功能,请在piwik-hacker的邮箱列表中询问你的问题(更多信息)。
(2)多个Piwik跟踪器
可以使用指向相同或不同Piwik服务器的多个Piwik跟踪器跟踪同一个页面。为了减少加载时间,你可以加载piwik.js一次。每一次调用Piwik.getTracker()都返回惟一Piwik跟踪器对象(事例),这些跟踪对象可以进行配置。
调用getTracker的第一个参数
<script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker("http://URL_1/piwik.php", 1);
piwikTracker.trackPageView();
var piwik2 = Piwik.getTracker("http://URL_2/piwik.php", 4);
piwik2.trackPageView();
} catch( err ) {}
</script>
注意你也可以手动设置网站ID和piwik跟踪器URL,而不是在getTracker调用中设置它们:
//我们替换Piwik.getTracker("http://example.com/piwik/", 12)
var piwikTracker = Piwik.getTracker();
piwikTracker.setSiteId( 12 );
piwikTracker.setTrackerUrl( "http://example.com/piwik/" );
piwikTracker.trackPageView();

(3)异步跟踪
Piwik JavaScript跟踪API也支持异步跟踪,以便页面加载(或看起来加载)的更快。配置和跟踪调用被推送到_paq数组进行执行,与piwik.js加载异步。其形式为:
_paq.push([ 'API_method_name', parameter_list ]);
异步Piwik跟踪代码应插入到<head>标签中,形式如下:
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
(function(){
var u=(("https:" == document.location.protocol) ? "https://{$PIWIK_URL}" : "http://{$PIWIK_URL}");
_paq.push(['setSiteId', {$IDSITE}]);
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['trackPageView']);
var d=document,
g=d.createElement('script'),
s=d.getElementsByTagName('script')[0];
g.type='text/javascript';
g.defer=true;
g.async=true;
g.src=u+'piwik.js';
s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Piwik Tag -->

(为了清晰,以上代码段没有压缩。)
(4)覆盖Piwik.js的单元测试
Piwik JavaScript跟踪API由广泛JavaScript单元测试控件来确保代码的质量尽可能高,我们永远不会破坏这种功能。测试使用QUnit-jQuery单元测试执行器写的。运行这些测试,只需要检查Piwik的SVN端口汇合,进入/path/to/piwik/tests/javascript/。测试在你的浏览器中进行。
Piwik JavaScript API经过许多web浏览器的测试:包括(但不限于)火狐2、3.0、3.1;IE 5.5、6、7、8;Opera 7.54、8.54、9.64、10;Safari 3.0、3.2、4.0;Konqueror 3.5;SeaMonkey 1.1、2.0。我们有时使用browsershots.org来帮助测试。
(5)压缩piwik.js
Piwik.js被压缩为你的网站访问者将要下载的最小尺寸。我们使用YUI压缩器在压缩JavaScript(了解更多)。你可以在/js/piwik.js找到原始的未经压缩的版本。
4、跟踪API可用的所有方法列表
从Piwik类请求跟踪器实例
•Piwik.getTracker( trackerUrl, siteId )——获得跟踪器的新实例
•[Google Analytics等价物] _getTracker(account)
•[Yahoo! Analytics等价物] getTracker(account)
使用跟踪器对象
•enableLinkTracking()——在所有可以应用的链接元素上安装链接跟踪
•addListener(element)——为特定链接元素添加链接监听器。当点击时,Piwik将自动记录点击。
•setRequestMethod(method)——将请求方法设置为“GET”或“POST”(默认是“GET”)。使用POST请求方法,Piwik的主机必须与跟踪网站的主机相同(Piwik安装在与跟踪网站相同的域上)。
•trackGoal( idGoal, [customRevenue], [customData])——手动记录idGoal目标的一个转化,如果指定了的话,传递customRevenue和customData
•trackLink( url, linkType, [customData] )——手动记录来自你自己代码的一次点击。url是点击的URL。linkType可以是“link”出站链接也可以是“download”下载。
•trackPageView([customTitle], [customData])——记录这个页面的访问
•[Google Analytics等价物] _trackPageview(opt_pageURL)
•[Yahoo! Analytics等价物] submit()
跟踪器对象的设置
•setDocumentTitle( string )——重写文档标题
•[Yahoo! Analytics 等价物] YWATracker.setDocumentName(“xxx”)
•setDomains( array)——设置当做本地处理的主机名或域名数组
•[Google Analytics 等价物] _setDomainName(“.example.com”)
•[Yahoo! Analytics equivalent] setDomains(“*.abc.net”)
•setCustomData( object|string )——向服务器传递自定义数据
•setCustomUrl( string )——重写页面报告的URL
•setReferrerUrl( string )——重写检测到的Http-Referer
•setSiteId( integer )——指定网站的ID。多余的:能在getTracker()构造函数中指定。
•setTrackerUrl( string )——指定Piwik服务器URL。多余的:能在getTracker()构造函数中指定。
•setDownloadClasses( string | array )——设置处理为下载(除了piwik_download以外)的类。
•setDownloadExtensions( string )——设置识别为下载的文件扩展名列表。例如:“doc|pdf|txt”。
•addDownloadExtensions( string )——指定更多的识别为下载的文件扩展名。;例如:“doc|pdf|txt”。
•setIgnoreClasses( string | array )——设置如果出现在链接中将被忽略的类(除了piwik_ignore以外)
•setLinkClasses( string | array )——设置被处理为出站链接的类(除了piwik_link以外)
•setLinkTrackingTimer( integer )——设置链接跟踪的延迟,以毫秒为单位。

来自:http://www.cloga.info

分享到:
评论
1 楼 Reizsoon 2012-01-11  
您好,最近使用到这个,能否有个写好的例子借我学习下呢?

相关推荐

    商业源码-编程源码-Piwik ( PHP统计系统,可以和GOOGLE媲美) v0.6.2.zip

    6. **获取跟踪代码**:将生成的JavaScript跟踪代码插入到每个网页的头部,开始收集数据。 ### Piwik与Google Analytics的比较 1. **数据隐私**:Piwik在本地运行,数据不离开服务器,而Google Analytics数据存储在...

    nodejs-piwik:从node.js访问Matomo(Piwik)API

    跟踪匹配并使用Node.js访问Matomo API 该软件包以Matomo的先前名称命名。 我不想更改软件包名称,因为人们正在其应用程序中使用它。 例子 const matomo = require ( 'piwik' ) . setup ( '...

    classic-piwik

    客户端不依赖于任何Javascript框架。 用法 在&lt;head&gt;&lt;/head&gt;之间包含以下脚本 &lt; script src =" library/piwik.min.js " &gt; &lt;/ script &gt; &lt; script src =" ...

    piwik:跟踪每个人!

    在五分钟的安装过程结束时,您将获得一个 JavaScript 代码。 只需将此标签复制并粘贴到您希望实时跟踪和访问分析报告的网站上即可。 Piwik 旨在成为 Google Analytics 的免费软件替代品,并且已经在超过 1,000,000...

    piwik文档说明

    至于跟踪代码,Piwik 使用 JavaScript 跟踪代码来收集数据。基本的跟踪代码应该放置在所有需要统计的页面上,代码会设置站点ID、追踪器URL,然后追踪页面视图,启用链接跟踪。代码中有一个noscript部分,以备...

    piwik网站数据分析

    3. **安装JavaScript代码**:将Piwik提供的追踪代码添加到网站模板中,确保每个页面都能被追踪。 4. **数据收集与查看**:一旦代码安装完成,Piwik开始收集数据,你可以在报表界面查看统计结果。 5. **报告定制**...

    piwik-dashboard:显示来自 Piwik API 的数据的前端

    - **API扩展**: 随着Piwik API的不断丰富,应用可以整合更多高级分析功能,如转化率跟踪、用户行为路径分析等。 - **性能优化**: 通过缓存策略、异步加载和代码分割等手段,提高应用的加载速度和响应性。 - **安全...

    piwik-yourls:一个适合你的 Piwik 插件

    PIWIK-YOURLS 一个插件的特征使用 Piwik 记录所有请求跟踪 IP 和自定义变量让您禁用本地跟踪/统计包括来自 OZH 的“请勿登录机器人”要求PHP 5.3 PiwikTracker.php 来自您的 Piwik 安装设置你的将文件拉到 &lt;youurls&gt;...

    PHP实例开发源码—Piwik (可以和GOOGLE媲美的PHP统计系统).zip

    Piwik通过在网站上放置JavaScript追踪代码来收集访问数据。当用户访问网站时,追踪代码会捕获用户行为,并将这些信息发送回Piwik服务器。服务器对数据进行处理和存储,然后生成各种分析报告。 **3. 安装与配置** ...

    matomo-nodejs-tracker:Matomo(Piwik)跟踪HTTP API的Node.js包装器

    Matomo跟踪HTTP API的包装器 用法 首先,安装matomo-tracker作为依赖项: npm install --save matomo-tracker 然后,在您的项目中使用它: var MatomoTracker = require ( 'matomo-tracker' ) ; // Initialize ...

    trackings:跟踪Google Analytics(分析)和Piwik Matomo的摘要

    跟踪Google Analytics(分析)和Piwik / Matomo的摘要 无需将Google Analytics(分析)和Matomo / Piwik代码段添加到您的所有html页面中,您可以使用此库将它们包含在Javascript代码中。 安装 使用npm : $ npm ...

    Piwik 支持flex

    5. **Piwik与Flex集成**: "piwik_as.swc"可能包含预编译的类和组件,使开发人员能够在Flex项目中无缝集成Piwik的API,实现自定义的跟踪和报告功能。这使得开发者可以定制化界面,同时利用Piwik的强大分析能力。 6. ...

    基于PHP的可以和GOOGLE媲美的PHP统计系统 Piwik v0.4.5.zip

    3. **AJAX和JavaScript**:在前端,Piwik利用AJAX和JavaScript提供动态交互的用户体验,如实时更新的图表和报告。 4. **插件架构**:Piwik的插件系统允许开发人员添加额外的功能或定制报告,增强了系统的可扩展性。...

    PHP实例开发源码—matomo(Piwik)开源网站流量统计系统.zip

    - Matomo通过JavaScript代码跟踪用户行为,该代码嵌入到被监控网站的每个页面中。 - 跟踪的数据包括页面访问、停留时间、点击事件、滚动深度等。 - 数据通过HTTP请求发送到Matomo服务器,服务器将数据存储在...

    基于PHP的matomo(Piwik)开源网站流量统计系统源码.zip

    安装完成后,你可以通过Web浏览器访问Matomo,设置你的网站,并获取跟踪代码以嵌入到网页中。一旦部署完毕,Matomo将开始收集数据,并提供丰富的图表和报告,帮助你洞察网站性能和用户行为。 此外,Matomo强调用户...

    前端项目-angulartics.zip

    - Piwik - Localytics - Segment.io 每种服务的集成方式略有不同,但Angulartics提供了统一的API接口,使得转换成本降低。 **6. 自定义扩展** Angulartics 的可扩展性使得开发者可以自定义事件,或者为不被官方...

    ti.piwik:Piwik Titanium分析模块

    Piwik Titanium分析模块 描述 该模块使Titanium Apps能够集成 Analytics。 它很大程度上基于Piwiks自己在其App中的实现 。 该CommonJs模块提供了Tracker的功能,但使其可在每个Titanium App上使用。 诚然,它还...

    基于PHP的matomo(Piwik)开源网站流量统计系统.zip

    1. 数据收集:Matomo通过JavaScript代码跟踪用户在网站上的行为,如页面浏览、点击事件等。当用户访问网站时,这段JavaScript代码会发送请求到Matomo服务器,发送关于用户的匿名信息。 2. 数据存储:收集的数据通常...

    gatsby-plugin-matomo::clinking_glasses:Gatsby插件,将Matomo(以前称为Piwik)添加到网站上

    :clinking_glasses: Gatsby插件可将Matomo(以前称为Piwik)添加到网站上。 特征 插件使用明智的默认设置来优先考虑用户体验,性能和隐私: 在所有服务器端呈现的路由中包括跟踪代码 跟踪所有路线视图作为自定义...

    模板网站:网站统计模板

    var u="//your-piwik-instance-url/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; ...

Global site tag (gtag.js) - Google Analytics