- Chapter 23 – Piwik Tracking Codes
Chapter 23
Piwik uses a JavaScript-based tracking code to track website's data. The tracking code must be placed on each page of a website for Piwik to start tracking the website's data.
Piwik JavaScript-based Tracking Code
After completing your Piwik software's installation, log onto Piwik from your web browser. Your Piwik's login page URL should be located at:
data.example.com/piwik/piwik.php
Follow the below path to get your Piwik Tracking Code.
Settings -> Websites -> View Tracking Code
To track your website's data, add the following Piwik tracking code onto each page of your website. This tracking code is for default Piwik setup.
<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>
The web server in which your Piwik software has been installed has a URL. The 2 lines below specifies the location of the URL.
var u="//data.example.com/piwik/"; _paq.push(['setTrackerUrl', u+'piwik.php']);
Each website you created in your Piwik account has a unique site ID. This specific website has a siteID = 1.
_paq.push(['setSiteId', '1']);
The line sends the data to Piwik as a page view.
_paq.push(['trackPageView']);
If your Piwik's web server URL may have been installed on a “https” protocol, then evaluate the protocol type using this function:
(function(){ var u=(("https:" == document.location.protocol) ?
"https://data.example.com/piwik/" : "http://data.example.com/piwik/");
...
}
The updated tracking code will become:
<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's JavaScript-based tracking code is asynchronous. Asynchronous means the tracking code can execute in the background without blocking other scripts and content of your website. This allows the visible layout of your web page's to load and appear to your users faster. Faster web page loading means better user experience.
Piwik Goal Tracking
As an example, let's demonstrate how to create a new goal for tracking your website's registrations.
- While on Piwik's Dashboard, click “Goals”.
- Enter a goal name in the “Goal Name” field.
- Under “Goal is trigger”, select “when visitors” and select the “Visit a given URL” radio button.
- Under “where the Page Title”, select “contains” and enter the URL path when a registration completes. e.g. /registration/success.php
- Click “Add Goal”.
Piwik Campaign Tracking
To track your campaign's performance with Piwik, you will have to tag your campaign advertising URLs with a parameter:
pk_campaign
For example, your display advertising campaign's URL may become:
http://www.example.com/promo.php?pk_campaign=my-email-promo-nov-2016
For paid search campaigns in which you will need to track keywords, tag your URLs with an additional parameter:
pk_campaign pk_keyword
For example, your Baidu paid search campaign's URL may become:
http://www.example.com/book.php?pk_campaign=baidu_ppc_tcmsb-brand&pk_kwd=the-china-mobile-seo-book
If your website is using Google Analytics and Piwik at the same time, you may have to explicitly tag both sets of parameters to your URL i.e. One set of parameters for Google Analytics and a second set of parameters for 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
Another tip is: Piwik is able to recognize the two Google Analytics parameters below:
utm_campaign utm_keyword
Because Piwik understands the two Google Analytics parameters, it can recognize the two URL tagging below are identical. For the second URL, the value in utm_campaign will show up under Piwik's campaign report as campaign names. The value in utm_term will show up under the keyword report.
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 Ecommerce Tracking
For ecommerce websites, Piwik is able to track ecommerce transactions. For Piwik ecommerce tracking to work, additional JavaScript codes regarding the transactions must be added to the “purchase confirmation” page.
To track an “item” (of a transaction) that are purchased:
_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) ]);
All items must be included in a transaction (i.e. order):
_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) ]);
Below is the full Piwik tracking code which should be triggered on the purchase confirmation page. Note, the ecommerce tracking code has included 2 items in a single transaction (or order).
<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 Event Tracking
With Piwik, you are able to track user actions such as a button click. The “trackEvent” function allows tracking of events including button clicks, and has the format below.
trackEvent(category, action, [name], [value])
The compulsory parameters are:
category action
The optional parameters are:
[name] [values]
As an example, you are to implement a “click event” for the side menu button that reads “Fruits”. You will use trackEvent function in this format:
_paq.push(['trackEvent', 'SideMenu', 'Click', 'Fruits']);
On the actual button of your web page, you may include the trackEvent function within the “onclick” attribute in an <a href> tag.
<a href="http://www.example.com/fruits/" onclick="javascript:_paq.push(['trackEvent', 'SideMenu', 'Fruits']);">Freedom page</a>
Piwik Custom Variables
A custom variable consists of an index, a name, a value and its scope. Piwik lets you track if a user visits a specific page URL and record the user's information.
Piwik's custom variable takes the following format:
setCustomVariable(index, name, value, scope)
As an example, let's track the member IDs of the registration members who have logged-on while visiting your website. The setCustomVariable function sets the custom variable index to 1, the name to 'logged-on', the value to the member's ID (i.e. id002931), and the scope to 'visit'.
_paq.push(['setCustomVariable', 1, 'logged-on', 'id002931', 'visit']);
The “if-statement” checks if a user has visited the “member area” page (which means the user has logged on). If a user has logged on, then the setCustomVariable function will send the member ID to Piwik's database.
if (location.pathname.toLowerCase() == "/member-area/")
{
_paq.push(['setCustomVariable', 1, 'logged-on', 'id002931', 'visit']);
}
Note, Piwik allows using a maximum of 5 custom variables.
Previous Chapters
- Chapter 22 – Open Source Web Analytics: Piwik
Next Chapters
- Chapter 24 – Piwik Performance Optimization
Gordon Choi's Analytics Book has been available since August 2016.
Content on Gordon Choi's Analytics Book is licensed under the CC Attribution-Noncommercial 4.0 International license.
Gordon Choi's Other Books:
The China Mobile SEO Book
Mobile Website Book