How can I set up Piwik PRO for multiple environments?

Needed permissions: owner

When you set up your site or app in a few environments (development, staging, production or other environments), you 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:

  1. We’ll create two separate sites for our two domains: https://staging.example.com/ and https://example.com/.
  2. Go to Menu > Administration.
  3. Navigate to Sites & apps.
  4. Click Add a site or app.
  5. Type the site or app name and address, and click OK.
    Add a site or app in Piwik PRO
  6. Note the site ID for the created site. The ID is under the site or app name.
    Site or app ID in Piwik PRO
  7. Repeat steps 2 –– 6 for the second (or more) domain.
  8. Navigate to Installation. (It can be any of previously added sites or apps.)
  9. In Basic container (async), click Copy to clipboard.
    Copy to clipboard a basic container in Piwik PRO
  10. 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.
  11. Delete the <noscript> tag and its content from the code.

    Note: The <nonscript> tag fires only for browsers that don’t allow any scripts to load. This happens very rarely. We decided to delete it because we can’t dynamically add the site or app ID to the <noscript> tag.

  12. 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';
    } 
    
    
  13. Paste the function right after the opening <script> tag.
  14. Replace the site ID at the end of the code with window.PiwikPROappID.
    (window, document, 'dataLayer', 'window.PiwikPROappID');
  15. 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>
    
  16. Paste the modified code right after the opening <body> tag on every page of your website or app.
  17. 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

Was this article helpful?

Technical support

If you still have some questions, visit our community.
There’s always someone ready to help!

Back to help center