Skip to content

Arnaud73/ngx-matomo

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ngx-Matomo

GitHub stars Build Status (GitHub) Build Status (Travis) NPM version Codacy Badge Conventional Commits MIT license

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

Choose the version corresponding to your Angular version:

Angular ngx-matomo
14+ 1.x
13 not available
9 to 12 1.0.0-rc1
5 to 8 0.x

Installation

Use npm or yarn to add the module to your current project:

npm install --save ngx-matomo

or

yarn add ngx-matomo

Using ngxMatomo

Injecting 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-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.

Customizing tracking

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

import { Component } from '@angular/core';
import { MatomoTracker } from 'ngx-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-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);
  }
}

Migrating from earlier versions (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.

Original Source

This module is inspired from Angular2Piwik, which was also inspired from Angulartics 2.

License

MIT

See also

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