Update Analytics to use Angularitics

This also supports the new Matomo setup.

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) {
-        this.matomoInjector.init('https://cameroncordes.me/piwik/', 1);
-    }
+  constructor(private matomo: Angulartics2Piwik) {
+    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 {AnalyticsService} from '../analytics.service';
-import {MatomoTracker} from 'ngx-matomo';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-resume',
   templateUrl: './resume.component.html',
   styleUrls: ['./resume.component.css']
 })
-export class ResumeComponent implements AfterContentInit {
-  private analytics: AnalyticsService;
-
-  constructor(analytics: AnalyticsService, private matomoTracker: MatomoTracker) {
-    this.analytics = analytics;
-  }
-
-  ngAfterContentInit(): void {
-    this.analytics.trackPageHit('Resume');
-    this.matomoTracker.trackPageView('Resume');
-  }
-
+export class ResumeComponent {
 }