Trying to add page tracking

src/app/analytics.service.spec.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+
+declare var owa_cmds: Array<any>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyticsService {
+
+  constructor() {
+  }
+
+  public trackPageHit(pageName: String) {
+    if (typeof owa_cmds === 'object') {
+      owa_cmds.push(pageName);
+    }
+  }
+}

src/app/contact/contact.component.ts

@@ -1,24 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterContentInit, Component, OnInit} from '@angular/core';
+import {AnalyticsService} from '../analytics.service';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.css']
 })
-export class ContactComponent {
+export class ContactComponent implements AfterContentInit {
 
-  constructor() { }
+  constructor(private analytics: AnalyticsService) {
+  }
 
+  ngAfterContentInit(): void {
+    this.analytics.trackPageHit('Contact');
+  }
 
   linkedInClicked() {
-    window.open("https://www.linkedin.com/in/cameron-cordes-3b166583/")
+    window.open('https://www.linkedin.com/in/cameron-cordes-3b166583/');
   }
 
   githubClicked() {
-    window.open("https://github.com/Stampede10343")
+    window.open('https://github.com/Stampede10343');
   }
 
   emailClicked() {
-    window.open("mailto:cameronc.dev@gmail.com")
+    window.open('mailto:cameronc.dev@gmail.com');
   }
 }

src/app/home/home.component.ts

@@ -1,15 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterContentInit, Component, OnInit} from '@angular/core';
+import {AnalyticsService} from '../analytics.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements AfterContentInit {
 
-  constructor() { }
+  constructor(private analytics: AnalyticsService) { }
 
-  ngOnInit() {
+  ngAfterContentInit(): void {
+    this.analytics.trackPageHit('Home');
   }
 
 }

src/app/projects/projects.component.ts

@@ -1,24 +1,29 @@
-import {Component, OnInit} from '@angular/core';
-import {ProjectService} from "./project.service";
-import {ProjectItem} from "./project-item";
+import {AfterContentInit, 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 {
+export class ProjectsComponent implements OnInit, AfterContentInit {
   projects: Array<ProjectItem>;
 
-  constructor(private projectService: ProjectService) {
+  constructor(private projectService: ProjectService, private analytics: AnalyticsService) {
   }
 
   ngOnInit(): void {
-    this.getProjects()
+    this.getProjects();
   }
 
   getProjects() {
-    return this.projectService.getProjects().then(projects => this.projects = projects)
+    this.projectService.getProjects().then(projects => this.projects = projects);
+  }
+
+  ngAfterContentInit(): void {
+    this.analytics.trackPageHit('Projects');
   }
 
 }

src/app/resume/resume.component.ts

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

src/index.html

@@ -10,6 +10,25 @@
 
   <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 -->
+  <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 -->
 </head>
 <body>
 <app-root></app-root>