Repository files navigation

Wrapper for Matomo (aka. Piwik) analytics tracker for Angular applications.

Choose the version corresponding to your Angular version:

Usenpm oryarn to add the module to your current project:

npm install --save ngx-matomo

or

yarn add ngx-matomo

In order to add Matomo capabilities to your application, you need to importMatomoModule into your rootNgModule.

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.forRoot({scriptUrl:'//matomo.example.com/matomo.js',trackers:[{trackerUrl:'http://matomo.example.com/matomo.php',siteId:1}],routeTracking:{enable:true}}),    ...],declarations:[AppComponent],bootstrap:[AppComponent]})exportclassAppModule{}

If you are using an old version of Matomo (3.x or less), please addscriptVersion with the version number (2, 3, 4…) to the configuration object passed the theMatomoModule.forRoot() function. This will activate some features present in Matomo 3 that were deprecated in Matomo 4.

Once that's done you can importMatomoTracker into any component of your application.

import{Component}from'@angular/core';import{MatomoTracker}from'ngx-matomo';@Component({selector:'app-root',template:`<router-outlet />`,})exportclassAppComponent{constructor(privatematomoTracker: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 thetrackEvent function.

import{Component}from'@angular/core';import{MatomoTracker}from'ngx-matomo';@Component({selector:'app-my',templateUrl:'./myButton.html',})exportclassMyComponent{constructor(privatematomoTracker:MatomoTracker){}whatHappensOnClick(someVal){/*     * some code...     */this.matomoTracker.trackEvent('category','action','name',someVal);}}

A demo application is available in order to get you quickly up to speed.

1. Clone the ngxMatomo repository:git clone https://github.com/Arnaud73/ngx-matomo.git
2. cd into the repository
3. Run the demo application:npm run demo

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 yourindex.html if you chose to inject the tracker this way.
• Remove any use ofMatomoInjector in your code if you chose to inject the tracker this way.
• Import the MatomoModule withMatomoModule.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.

This module is inspired fromAngular2Piwik, which was also inspired fromAngulartics 2.

MIT

Matomo'ssite has the detailed documentation on how to use Matomo and integrate it in an application.See also:

• Single-Page Application Tracking
• JavaScript Tracking Client User Guide
• JavaScript Tracking Client API
• Tracking HTTP API