How can I set up Piwik PRO for multiple environments?

When you set up your site or app in a few environments (development, testing, staging, production), you usually share the same code between them. So when Piwik PRO is installed, the container code is also the same. This results in collecting data from all sites or apps into one bucket. In this article, we’ll show you how to use the same container but to report collected data under separate sites or apps.

To set up your site or app for multiple environments, follow these steps:

We’ll create two separate sites for our two domains: https://staging.example.com/ and https://example.com/.
Go to Menu > Administration.
Navigate to Sites & apps.
Click Add a site or app.
Type the site or app name and address, and click OK.
Note the site ID for the created site. The ID is under the site or app name.
Repeat steps 2 –– 6 for the second (or more) domain.
Navigate to Installation. (It can be any of previously added sites or apps.)
In Basic container (async), click Copy to clipboard.
Paste the code to a text editor. We’ll modify the code a bit so that it can be used on all added sites or apps.

Create the function that will recognize the site or app and assign its ID. We’ll use the following function:

if (window.location.hostname === "staging.example.com")

{
	window.PiwikPROappID = '00000000-0000-0000-0000-000000000000';
}

else if (window.location.hostname === "example.com")

{
	window.PiwikPROappID = '11111111-1111-1111-1111-111111111111';
}

Paste the function right after the opening <script> tag.
Replace the site ID at the end of the code with window.PiwikPROappID.
```
(window, document, 'dataLayer', window.PiwikPROappID);
```

The modified code should look something like this:

<script type="text/javascript">

  if (window.location.hostname === "staging.example.com")

  {
  	window.PiwikPROappID = '00000000-0000-0000-0000-000000000000';
  }

  else if (window.location.hostname === "example.com")

  {
  	window.PiwikPROappID = '11111111-1111-1111-1111-111111111111';
  } 


  (function(window, document, dataLayerName, id) {
  window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
  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")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
  var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
  tags.async=!0,tags.src="https://clearbank.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
  !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
  })(window, document, 'dataLayer', window.PiwikPROappID);
</script>

Paste the modified code right after the opening <body> tag on every page of your website or app.
Now you can see your data in separate sites or apps in Piwik PRO. Data will appear in reports in about an hour. Data in the tracker debugger will appear instantly.

Tip: You can also check manually if the tracking works. Read more

How can I set up Piwik PRO for multiple environments?

Was this article helpful?

Technical support