Skip to content
Matomo (aka. Piwik) web analytics for applications based on Angular 5, 6, 7 & 8.
Branch: master
Clone or download
Latest commit 29d4f86 May 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
integration chore(build): Add initial files May 7, 2018
src test: Add additional calls to getter functions May 10, 2019
.editorconfig chore(build): Add initial files May 7, 2018
.gitignore chore(build): Add initial files May 7, 2018
.prettierrc
.travis.yml chore(ci): Add NPM v6 installation on Travis Aug 2, 2018
BUILD.md chore(build): Add initial files May 7, 2018
CHANGELOG.md chore(release): 0.1.4 May 10, 2019
LICENSE Initial commit May 7, 2018
README.md fix(config): Accept Angular 5, 6, 7 & 8 May 10, 2019
bs-config.json chore(build): Add initial files May 7, 2018
build.js chore(build): Add initial files May 7, 2018
inline-resources.js chore(build): Add initial files May 7, 2018
karma-coverage.conf.js
karma-test-shim.js chore(build): Add initial files May 7, 2018
karma.conf.js test(karma): Configure Karma for Chrome Headless May 8, 2018
package-lock.json chore(release): 0.1.4 May 10, 2019
package.json
tsconfig.json chore(build): Add initial files May 7, 2018
tslint.json

README.md

ngx-matomo

Wrapper for Matomo (aka. Piwik) analytics tracker for applications based on Angular 5, 6, 7 & 8.

Install through source files

Download directly from github and place the src files in your Angular application.

npm install

npm install --save ngx-matomo

Adding Matomo into to your Angular application

You can add Matomo either via script tag or using the MatomoInjector in your root component.

Adding Matomo into your application via Script Tag.

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

Initialize Matomo via Root Component

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);
  }
}

Include it in your application

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');
  }
}

Tracking events

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);
  }
}

Original Source

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

License

MIT

You can’t perform that action at this time.