When you set up your site or app in multiple environments, such as development, testing, staging and 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 and apps into one place.
In this article, we’ll explain how to keep using the same code but report the data separately for each site or app.
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 Save.
6. Note the site ID for the created site. The ID is under the site or app name.
7. Repeat steps 2–6 for the second domain or any other domain.
8. Navigate to Installation. This can be any of your previously added sites or apps.
9. In Basic container (async), click Copy to clipboard.
10. Paste the code into a text editor. We’ll modify the code slightly so that it can be used on all sites and apps you add.
11. Create a function that recognizes your site or app and assigns it an 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';
}
12. Paste the function right after the opening <script> tag.
13. Replace the site ID at the end of the code with window.PiwikPROappID.
(window, document, 'dataLayer', window.PiwikPROappID);14. 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>15. Paste the modified code right after the opening <body> tag on every page of your website or app.
16. All done! You can now 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 to see if your tracking works. Read more