Tracking Code Implementation

Why do I need to add the tracking code?

Inserting the Piwik PRO tracking code on every page you want Piwik to analyse is necessary to make it work. It’s not only the first step, but – most importantly – the indispensable and obligatory one.

How to implement the tracking code?

When you launch your newly installed Piwik PRO instance and add your first website, you’ll be asked to insert the tracking code into your website’s HTML code.

You should receive your first tracking code as soon as you’ll register to Piwik PRO Cloud, aside from that you can always find the tracking code of all your websites in your Piwik PRO settings (see: Finding Your Tracking Code Snippet) .

Interesting fact: Piwik PRO offers multiple ways of tracking visits, but the easiest and recommended in most cases way is to use a JavaScript tracking code. With Piwik PRO you can also track visits with Log Analytics and other custom built methods. Still, JavaScript tracking remains the most popular and efficient way of gathering data in Piwik PRO.

Learn more about the differences between synchronous and asynchronous tags .

How to implement website code for asynchronous tags?

Below you’ll find your Piwik PRO tracking code for asynchronous tags. The location to place it is under the <body> element. You can copy & paste it, but in most websites or blogs, there should be a ready-to-use plugin you can use.

Note: Asynchronous tags load at the same time as the page’s content. It’s a good practice to use asynchronous tags for tracking tags.

<!-- Start Piwik PRO Tag Manager code --><script type="text/javascript">
(function(window, document, script, dataLayer, id) {
function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}var isStgDebug=(window.location.href.match("stg_debug")||window.document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?365:-1);
window[dataLayer]=window[dataLayer]||[],window[dataLayer].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName(script)[0],tags=document.createElement(script),dl="dataLayer"!=dataLayer?"?dataLayer="+dataLayer:"";tags.async=!0,tags.src="//marketing.piwik.pro/containers/819958cc-4f49-11e7-963e-000d3a2a450a.js"+dl,isStgDebug&&(tags.src=tags.src+"?stg_debug"),scripts.parentNode.insertBefore(tags,scripts);
})(window, document, 'script', 'dataLayer', '819958cc-4f49-11e7-963e-000d3a2a450a');
</script><noscript><iframe src="//marketing.piwik.pro/containers/819958cc-4f49-11e7-963e-000d3a2a450a/noscript.html" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Piwik PRO Tag Manager code -->

*This is an example of snippet code for asynchronous tags, so it will not automatically work for you

How to implement website code for synchronous tags?

Example of tracking code for synchronous tags can be found below. You should paste your code for synchronous tags into your website’s code between the <head> and </head> elements on all your pages. Please notice that embedding the code under the <body> element may cause performance issues.

Note: Synchronous tags fire and load first – even before the page loads. The content of a page won’t appear until the tag fires. It’s a good practice to use synchronous tags for A/B tests.

<!-- Start Piwik PRO Tag Manager code --><script type="text/javascript">
function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}var isStgDebug=(window.location.href.match("stg_debug")||window.document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?365:-1);
var url = "//marketing.piwik.pro/containers/819958cc-4f49-11e7-963e-000d3a2a450a.sync.js" + (isStgDebug ? "?stg_debug" : "");
document.write('<script src="' + url + '"></' + 'script>');
</script><!-- End Piwik PRO Tag Manager code -->

*This is an example of snippet code for synchronous tags, so it will not automatically work for you

If you don’t know how to place the code, you should contact your website administrator. Of course you can always contact Piwik PRO support at: support@piwik.pro

How to add a tracking code using WordPress Plugin

If you’re running your website on a WordPress platform, you can and add both – asynchronous and synchronous tags – using Piwik PRO Tag Manager Integration Plugin.

Once you install the plugin to your website, all you have to do to start tracking your data is to add your Piwik PRO Instance URL and the ID of the website and select the tracking method. We’ll show you how to do it step by step.

Installing the Plugin

To install the WordPress plugin, follow these steps:

  1. Go to your WordPress Admin Dashboard, from the left-hand menu select Plugins, and click the Add New button.
  2. In the search box, type in Piwik PRO Tag Manager Integration.
  3. Click Install Now and then click Activate.
How to install Piwik PRO Tag Manager Integration Plugin.

Plugin configuration

Once the WordPress plugin is activated, you can add the tracking code from Piwik PRO.

Installing the Asynchronous Code

To add an asynchronous tag to your website, follow these steps:

  1. Enter Settings and select Piwik PRO Tag Manager Integration
  2. Go to Include tags in body section
  3. Enter your Piwik PRO Marketing Suite Instance URL in the Server URL field and fill in the Website ID field. (To find the ID of your website go to Piwik PRO > Menu > Websites)
    Here is where you can find your Website ID.
  4. Enable the output buffering checkbox
Plugin configuration for asynchronous tags.

Installing the Synchronous Code

To add a synchronous tag to your website, follow these steps:

  1. Enter Settings and select Piwik PRO Tag Manager Integration.
  2. Make sure you are in the Include tags in head section tab.
  3. Enter your Piwik PRO Marketing Suite Instance URL in the Server URL field and fill in the Website ID field. (To find the ID of your website go to Piwik PRO > Menu > Websites)
    Here is where you can find your Website ID.
  4. Enable the wp_head checkbox.
Plugin configuration for synchronous tags.

Remember: A lot of other popular platforms (ex. Shopify) also have an integration with Piwik, which allow you to implement tracking in couple of clicks.

Was this article helpful?

of people found this helpful

Technical Support

If you have any questions, drop us a line at support_SPC@piwik_SPC.pro.

We’re happy to help!