Wrapper for Matomo (aka. Piwik) analytics tracker for Angular 5+ applications.
Download directly from github and place the src files in your Angular 5+ application.
npm install --save ngx-matomo
You can add Matomo either via script tag or using the MatomoInjector in your root component.
To illustrate the set up, here's the code to inject into your header to initialize Matomo in your application. Matomo's site has the detailed documentation on how to set up communication between Matomo and your application. Make sure you replace the MATOMO_URL with your Matomo server. You can remove all the _paq methods in this script and set them up in your Angular 5+ application.
<!-- Matomo -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//{$MATOMO_URL}/";
_paq.push(['setTrackerUrl', u+'piwik.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 -->
To enable Matomo via your root component you can now inject the MatomoInjector in your root component.
import { Component } from '@angular/core';
import { MatomoInjector } from 'ngx-matomo';
@Component({
selector: 'app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(
private matomoInjector: MatomoInjector
) {
this.matomoInjector.init('YOUR_MATOMO_URL', YOUR_SITE_ID);
}
}
Bootrapping this application is easy. Import MatomoModule
into your root NgModule
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatomoModule } from 'ngx-matomo';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
MatomoModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Once that's done you can import MatomoTracker
into any component in your application.
// component
import { Component } from '@angular/core';
import { MatomoTracker } from 'ngx-matomo';
@Component({
selector: 'app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(
private matomoTracker: MatomoTracker
) { }
ngOnInit() {
this.matomoTracker.setUserId('UserId');
this.matomoTracker.setDocumentTitle('ngx-Matomo Test');
}
}
For now tracking events and actions is manual and is not injected into the html.
<button (click)="whatHappensOnClick(1)"></button>
// component
import { Component } from '@angular/core';
import { MatomoTracker } from 'ngx-matomo';
@Component({
selector: 'app',
templateUrl: './myButton.html'
})
export class MyComponent {
constructor(
private matomoTracker: MatomoTracker
) { }
whatHappensOnClick(someVal){
/*
* some code...
*/
this.matomoTracker.trackEvent('category', 'action', 'name', someVal);
}
}
This module is lousily inspired from Angular2Piwik, which was also inspired from Angulartics 2.