- 23 Piwik跟踪代碼
第23章
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個自定義變量。
- 上一章：開源網站分析Piwik
- 下一章：Piwik性能優化
數據分析技術白皮書在2016年11月正式出版。
英文版：Piwik Tracking Codes – 簡體中文版：Piwik跟踪代碼
Analytics Book繁體中文版上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International
