Linux Tutorials, Guides & Latest Tech Stuffs

How to install Matomo analytics on Angular JS Website

Matomo (piwik)  is a secure open web analytics platform. It allows to evaluate your website visitor’s user experience, behaviour and conversions. As per matomo official website it claims to provide 100% accurate data with 100% data ownership. Matomo offer cloud hosted environments or you can choose to host at your own on premise infrastructure. It is also GDPR compliant.

Matomo Setup on Angular JS (angular 1.x) websites.

If you have already installed and create a site in matomo, it will by default provide you javascript tracking code.  The sample of javascript tracking code is give below.

Sample Matomo Javascript tracking code

<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//{$PIWIK_URL}/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', {$IDSITE}]);
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>
<!-- End Matomo Code -->

 

You need to track your Matomo javascript code into index.html file of you angular application. You can paste it either in header or footer,  in both way it works.

Important note for Angular JS website integration

Matomo integration with Angularjs sites or single page application is different than usual one like php based CMS such as wordpress. It is because single page applications(SPAs) as there is no regular page reload on navigating each new page.  This means you need to somehow load matomo script on each url change, this can be done by adding a eventlistner that triggers on `hashchange`  as shown below.

var currentUrl = location.href;
window.addEventListener('hashchange', function() {
    _paq.push(['setReferrerUrl', currentUrl]);
     currentUrl = '/' + window.location.hash.substr(1);
    _paq.push(['setCustomUrl', currentUrl]);
    _paq.push(['setDocumentTitle', 'My New Title']);

    // remove all previously assigned custom variables, requires Matomo (formerly Piwik) 3.0.2
    _paq.push(['deleteCustomVariables', 'page']); 
    _paq.push(['setGenerationTimeMs', 0]);
    _paq.push(['trackPageView']);

    // make Matomo aware of newly added content
    var content = document.getElementById('content');
    _paq.push(['MediaAnalytics::scanForMedia', content]);
    _paq.push(['FormAnalytics::scanForForms', content]);
    _paq.push(['trackContentImpressionsWithinNode', content]);
    _paq.push(['enableLinkTracking']);
});

Tracking User ID of logged in user or adding custom tracking variables in Matomo

Matomo allows you to track logged in users

  • for tracking users that are logging in your application you need to pass unique and persistent non-empty string that represent each logged in user. Typically, this is email address or username provided by authentication system.
  • You must have to set user ID for each preview otherwise the pageview will be tracked without user ID set.
  • You must set you user ID or email in matomo tracking url above `trackPageView`  see example below.
_paq.push(['setUserId', 'USER_ID_HERE']);
_paq.push(['trackPageView']);

Setting up custom variable or custom dimension in Matomo

Matomo allows to track custom data using custom variable (to be deprecated) or custom dimension. As custom variables will be deprecated in future you should use custom dimension as both works same.

For setting up custom dimension you need to first create a custom dimension in matomo application by following these steps.

  1. Setup custom dimension in Matomo application
  • Log in matomo application as a super user
  • Go to Administration by clicking cogwheel icon on top right
  • Click on marketplace menu item
  • choose Custom Dimensions from the list
  • press install, on next page press Activate to activate custom dimension
  • Note down ID of your newly created custom Dimension you will required it in next step ( it should be as you are creating very first time)

2. Add your newly created custom dimension to you tracking code

After creating custom dimension in Matomo applicaton, you need to add it to javascript tracking code like this.

_paq.push(['setCustomDimension','customDimensionID', 'customDimensionValue']);

ensure to add custom dimension above this line of code `_paq.push([‘trackPageView’]);`

Conclusion

As per my own experience Matomo is good in terms of tracking lots of useful stats of visitors, this can be used to improved application in terms of SEO, content and user experience. It is also free so if you are looking for some useful analytics tool you can give it a try.

Pranav K

Pranav K is a software engineer and all-round computer geek. His interests include AWS, Ubuntu and Wordpress

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.