piwik

Piwik

homepage: piwik.org
docs: developer.piwik.org
import: import { NgxAnalyticsPiwik } from 'ngx-analytics/piwik';

Setup

Add the sandard piwik track code inside your index.html head tag:

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  // _paq.push(['trackPageView']); // DELETE THIS LINE
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//piwik.YOUR-DOMAIN.com/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '11']);
    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 Piwik Code -->

Make sure "trackPageView" line is commented or deleted. It is not needed as page tracking will be trigger by the angular module on route change.

Replace YOUR-DOMAIN with your piwik domain (//DOMAIN.innocraft.cloud if you are using the innocraft cloud service).

Pass the Piwik provider to angulartics in app.module:

import { NgxAnalyticsModule } from 'ngx-analytics';
import { NgxAnalyticsPiwik } from 'ngx-analytics/piwik';
@NgModule({
  imports: [
    NgxAnalyticsModule.forRoot([NgxAnalyticsPiwik]),
    ...

Inject angulartics into your root component (usually appComponent)

import { NgxAnalyticsPiwik } from 'ngx-analytics/piwik';
export class AppComponent {
  // inject NgxAnalyticsPiwik in root component to initialize it
  constructor(private ngx-analyticsPiwik: NgxAnalyticsPiwik){ }
}

To track full URLs if there is a hash (#), make sure to enable settings=>websites=>settings=>page url fragments tracking in the Piwik dashboard.

Once set up, Angulartics usage is the same regardless of provider