Update Analytics to use Angularitics

This also supports the new Matomo setup.

package-lock.json

@@ -3809,6 +3809,14 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angulartics2": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/angulartics2/-/angulartics2-8.1.0.tgz",
+      "integrity": "sha512-DJWnpKfOUEtaQsWTCcyuzgWCQM6mAYHReqpgmt3IXo1/joofGhDZu/RPV48RVm2voJFoKL4Lp5JNac9vV+NJsg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -9387,11 +9395,6 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
-    "ngx-matomo": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ngx-matomo/-/ngx-matomo-0.1.2.tgz",
-      "integrity": "sha512-BriHz0tgWvrrenIW18rk2cItoR6Fzeq+4Ayon8b2sMQ3auGdw1oxFGUZXiUy2Eg6ipCl9NeP2c0dsxyYngHb8w=="
-    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -24,9 +24,9 @@
     "@angular/platform-browser": "^8.2.7",
     "@angular/platform-browser-dynamic": "^8.2.7",
     "@angular/router": "^8.2.7",
+    "angulartics2": "^8.1.0",
     "core-js": "^2.5.4",
     "json-schema-traverse": "^0.4.1",
-    "ngx-matomo": "^0.1.2",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "web-animations-js": "^2.3.1",

src/app/analytics.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AnalyticsService } from './analytics.service';
-
-describe('AnalyticsService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: AnalyticsService = TestBed.get(AnalyticsService);
-    expect(service).toBeTruthy();
-  });
-});

src/app/analytics.service.ts

@@ -1,17 +0,0 @@
-import {Injectable} from '@angular/core';
-
-declare var OWATracker;
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AnalyticsService {
-
-  constructor() {
-  }
-
-  public trackPageHit(pageName: String) {
-    OWATracker.setPageTitle(pageName);
-    OWATracker.trackPageView();
-  }
-}

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {RouterOutlet} from '@angular/router';
-import {MatomoInjector} from 'ngx-matomo';
 import {animate, query, style, transition, trigger} from '@angular/animations';
+import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 export const routerTransition = trigger('routerTransition', [
   transition('* <=> *', [
@@ -46,9 +46,9 @@ export const routerTransition = trigger('routerTransition', [
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    constructor(private matomoInjector: MatomoInjector) {
+  constructor(private matomo: Angulartics2Piwik) {
-        this.matomoInjector.init('https://cameroncordes.me/piwik/', 1);
+    matomo.startTracking()
-    }
+  }
 
   getState(outlet: RouterOutlet) {
     return outlet.activatedRouteData.state;

src/app/app.module.ts

@@ -11,7 +11,9 @@ import {HomeComponent} from './home/home.component';
 import {ProjectsComponent} from './projects/projects.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ProjectKeywordPipe} from './project-keyword.pipe';
-import {MatomoModule} from 'ngx-matomo';
+
+import { Angulartics2Module } from 'angulartics2';
+import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 const appRoutes: Routes = [
   {path: 'resume', component: ResumeComponent, data: {state: 'resume'}},
@@ -38,7 +40,7 @@ const appRoutes: Routes = [
     MatToolbarModule,
     MatSidenavModule,
     RouterModule,
-    MatomoModule,
+    Angulartics2Module.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/contact/contact.component.ts

@@ -1,5 +1,4 @@
 import {AfterContentInit, Component, OnInit} from '@angular/core';
-import {AnalyticsService} from '../analytics.service';
 
 @Component({
   selector: 'app-contact',
@@ -8,11 +7,10 @@ import {AnalyticsService} from '../analytics.service';
 })
 export class ContactComponent implements AfterContentInit {
 
-  constructor(private analytics: AnalyticsService) {
+  constructor() {
   }
 
   ngAfterContentInit(): void {
-    this.analytics.trackPageHit('Contact');
   }
 
   linkedInClicked() {

src/app/home/home.component.ts

@@ -1,5 +1,4 @@
 import {AfterContentInit, Component, OnInit} from '@angular/core';
-import {AnalyticsService} from '../analytics.service';
 
 @Component({
   selector: 'app-home',
@@ -8,10 +7,9 @@ import {AnalyticsService} from '../analytics.service';
 })
 export class HomeComponent implements AfterContentInit {
 
-  constructor(private analytics: AnalyticsService) { }
+  constructor() { }
 
   ngAfterContentInit(): void {
-    this.analytics.trackPageHit('Home');
   }
 
 }

src/app/projects/projects.component.ts

@@ -1,17 +1,16 @@
-import {AfterContentInit, Component, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ProjectService} from './project.service';
 import {ProjectItem} from './project-item';
-import {AnalyticsService} from '../analytics.service';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.css'],
 })
-export class ProjectsComponent implements OnInit, AfterContentInit {
+export class ProjectsComponent implements OnInit {
   projects: Array<ProjectItem>;
 
-  constructor(private projectService: ProjectService, private analytics: AnalyticsService) {
+  constructor(private projectService: ProjectService) {
   }
 
   ngOnInit(): void {
@@ -22,8 +21,4 @@ export class ProjectsComponent implements OnInit, AfterContentInit {
     this.projectService.getProjects().then(projects => this.projects = projects);
   }
 
-  ngAfterContentInit(): void {
-    this.analytics.trackPageHit('Projects');
-  }
-
 }

src/app/resume/resume.component.ts

@@ -1,22 +1,9 @@
-import {AfterContentInit, Component, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import {AnalyticsService} from '../analytics.service';
-import {MatomoTracker} from 'ngx-matomo';
 
 @Component({
   selector: 'app-resume',
   templateUrl: './resume.component.html',
   styleUrls: ['./resume.component.css']
 })
-export class ResumeComponent implements AfterContentInit {
+export class ResumeComponent {
-  private analytics: AnalyticsService;
-
-  constructor(analytics: AnalyticsService, private matomoTracker: MatomoTracker) {
-    this.analytics = analytics;
-  }
-
-  ngAfterContentInit(): void {
-    this.analytics.trackPageHit('Resume');
-    this.matomoTracker.trackPageView('Resume');
-  }
-
 }

src/index.html

@@ -11,39 +11,20 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
-  <!-- Start Open Web Analytics Tracker -->
+  <!-- Piwik -->
-  <script type="text/javascript">
-    //<![CDATA[
-    var owa_baseUrl = 'https://cameroncordes.me/Open-Web-Analytics-1.6.2/';
-    var owa_cmds = owa_cmds || [];
-    owa_cmds.push(['setSiteId', '472a6484ee74d426b805ef774a407b37']);
-    owa_cmds.push(['trackPageView']);
-    owa_cmds.push(['trackClicks']);
-    // owa_cmds.push(['trackDomStream']);
-
-    (function() {
-      var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true;
-      _owa.src = owa_baseUrl + 'modules/base/js/owa.tracker-combined-min.js';
-      var _owa_s = document.getElementsByTagName('script')[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s);
-    }());
-    //]]>
-  </script>
-  <!-- End Open Web Analytics Code -->
-
-  <!-- Matomo -->
 <script type="text/javascript">
-  var _paq = window._paq || [];
+  var _paq = _paq || [];
-  _paq.push(['trackPageView']);
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
   _paq.push(['enableLinkTracking']);
   (function() {
-    var u="//cameroncordes.me/piwik/";
+    var u="//matomo.cameroncordes.me/";
     _paq.push(['setTrackerUrl', u+'matomo.php']);
     _paq.push(['setSiteId', '1']);
     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+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
 </script>
-<!-- End Matomo Code -->
+<!-- End Piwik Code -->
 </head>
 <body>
 <app-root></app-root>