ngx-z-matomo v1.0.12
ngx-z-Matomo
This librrary forked from ngx-matomo (https://github.com/Arnaud73/ngx-matomo.git) and updated to latest version of Angular 13. Thanks to Arnaud73.
This library was generated with Angular CLI version 13. Wrapper for Matomo (aka. Piwik) analytics tracker for applications based on Angular 9, 10, 11, 12 or 13.
If your application is based on Angular 5, 6, 7 or 8, please consider using the latest 0.x version of this library instead.
Installation
Use npm
or yarn
to add the module to your current project:
npm install --save ngx-z-matomo
or
yarn add ngx-z-matomo
Using ngxMatomo
Inject the tracker
In order to add Matomo capabilities to your application, you need to import MatomoModule
into your root NgModule
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatomoModule } from 'ngx-z-matomo';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
...
MatomoModule.forRoot({
scriptUrl: '//matomo.example.com/matomo.js',
trackers: [
{
trackerUrl: 'http://matomo.example.com/matomo.php',
siteId: 1
}
],
routeTracking: {
enable: true
}
}),
...
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
If you are using an old version of Matomo (3.x or less), please add scriptVersion
with the version number (2, 3, 4…) to the configuration object passed the the MatomoModule.forRoot()
function. This will activate some features present in Matomo 3 that were deprecated in Matomo 4.
Customize tracking
Once that's done you can import MatomoTracker
into any component of your application.
import { Component } from '@angular/core';
import { MatomoTracker } from 'ngx-z-matomo';
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(
private matomoTracker: MatomoTracker
) { }
ngOnInit() {
this.matomoTracker.setUserId('UserId');
this.matomoTracker.setDocumentTitle('ngxMatomo Test');
}
}
Then, let's find an action you would like to track:
<button (click)="whatHappensOnClick($event)"></button>
Just add the MatomoTracker to your component and use the trackEvent
function.
import { Component } from '@angular/core';
import { MatomoTracker } from 'ngx-z-matomo';
@Component({
selector: 'app-my',
templateUrl: './myButton.html'
})
export class MyComponent {
constructor(
private matomoTracker: MatomoTracker
) { }
whatHappensOnClick(someVal){
/*
* some code...
*/
this.matomoTracker.trackEvent('category', 'action', 'name', someVal);
}
}
Migration from earlier version (0.x)
ngxMatomo 1.0 is a major evolution from previous versions. If you plan migrating from a previous release, follow the next steps:
- Remove any Matomo injection script in your
index.html
if you chose to inject the tracker this way. - Remove any use of
MatomoInjector
in your code if you chose to inject the tracker this way. - Import the MatomoModule with
MatomoModule.forRoot()
call and provide a MatomoConfiguration object so that the tracker is correctly injected into your application. - Decide if you want to take advantage of the newly added features (route tracking, consent management) and update you configuration accordingly.
Also, this new release of ngx-z-Matomo has been rebuilt with Angular CLI v13. As a result, the produced library uses Angular Package Format (APF) v13. As a result, compatibity with previous versions of Angular is not guaranteed.
Original Source
This module is inspired from Angular2Piwik, which was also inspired from Angulartics 2.
License
See also
Matomo's site has the detailed documentation on how to use Matomo and integrate it in an application. See also: