From 1aa109ae52afb723659b1c7d2f42a7450351f510 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 21 Sep 2019 14:40:14 +0000 Subject: [PATCH] Update Analytics to use Angularitics This also supports the new Matomo setup. --- package-lock.json | 13 +++++++----- package.json | 2 +- src/app/analytics.service.spec.ts | 12 ----------- src/app/analytics.service.ts | 17 --------------- src/app/app.component.ts | 8 +++---- src/app/app.module.ts | 6 ++++-- src/app/contact/contact.component.ts | 4 +--- src/app/home/home.component.ts | 4 +--- src/app/projects/projects.component.ts | 11 +++------- src/app/resume/resume.component.ts | 17 ++------------- src/index.html | 29 +++++--------------------- 11 files changed, 29 insertions(+), 94 deletions(-) delete mode 100644 src/app/analytics.service.spec.ts delete mode 100644 src/app/analytics.service.ts diff --git a/package-lock.json b/package-lock.json index 45685b9..73fe084 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 687563b..95de02d 100644 --- a/package.json +++ b/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", diff --git a/src/app/analytics.service.spec.ts b/src/app/analytics.service.spec.ts deleted file mode 100644 index e0babf1..0000000 --- a/src/app/analytics.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/analytics.service.ts b/src/app/analytics.service.ts deleted file mode 100644 index 6377d05..0000000 --- a/src/app/analytics.service.ts +++ /dev/null @@ -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(); - } -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index be7012d..0341801 100644 --- a/src/app/app.component.ts +++ b/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; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7cdfcc3..a6ab36b 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts index cfd9e2f..a0c6425 100644 --- a/src/app/contact/contact.component.ts +++ b/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() { diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 4fd58b0..0d9a461 100644 --- a/src/app/home/home.component.ts +++ b/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'); } } diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts index ffdb864..5d7f59d 100644 --- a/src/app/projects/projects.component.ts +++ b/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; - 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'); - } - } diff --git a/src/app/resume/resume.component.ts b/src/app/resume/resume.component.ts index 8375562..925b01d 100644 --- a/src/app/resume/resume.component.ts +++ b/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 { } diff --git a/src/index.html b/src/index.html index af24237..a566a50 100644 --- a/src/index.html +++ b/src/index.html @@ -11,39 +11,20 @@ - - - - - + - +