Archive March 2019

I wanted to share the easiest way to integrate https://github.com/matomo-org/matomo in an angular project (tested with angular 7) with zero external package.

Add following structure to angular project

src/
├── analytics
│  ├── conf
│  │  ├── matomo.conf.local.js
│  │  ├── matomo.conf.staging.js
│  │  └── matomo.conf.prod.js
│  ├── matomo.conf.js
│  └── matomo.js

Put your matomo provided script in matomo.js and :
– delimit with: if(matomoEnabled){ ... }.
– replace the matomo url with variable matomoUrl.
– replace the matomo site id by variable matomoSiteId.

if (matomoEnabled) {
  console.log("init matomo { matomoEnabled: " + matomoEnabled + ", matomoUrl: " + matomoUrl + ", matomoSiteId: " + matomoSiteId + " }");
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u=matomoUrl;
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', matomoSiteId]);
    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+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
} else {
  console.log("matomo disabled");
}

In matomo.conf.js:

matomoEnabled=false;
matomoUrl="";
matomoSiteId="";

Copy matomo.conf.js content to matomo.conf.staging.js and matomo.conf.prod.js and fill with environment values.

Then import matomo.js and matomo.conf.js with angular.json:

"angular": {
  "build": {
    "options": {
      ...
      "scripts": [
        "src/analytics/matomo.conf.js",
        "src/analytics/matomo.js"
      ]
      ...
    }
  }
}

Finally use file replacements in angular.json:

"configurations": {
  "prod": {
    "fileReplacements": [
      {
        "replace": "src/analytics/matomo.conf.js",
        "with": "src/analytics/conf/matomo.conf.local.js"
      }
    ]
  }
}