Merge pull request 'Add tag manager container for link click tracking' (#6) from feature/link-out-analytics into master

Reviewed-on: #6

src/app/contact/contact.component.css

@@ -21,6 +21,6 @@
 }
 
 .icon-layout:hover {
-  color: #0FA0CE;
+  color: var(--nord12);
   cursor: pointer;
 }

src/app/contact/contact.component.html

@@ -3,19 +3,19 @@
     <h2>Social Media</h2>
 
     <div style="display: flex; justify-content: center; width: 100%">
-      <div class="icon-layout" (click)="linkedInClicked()">
-        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn">
-        <span class="icon-text">LinkedIn</span>
+      <div class="icon-layout" (click)="linkedInClicked()" (keydown.enter)="linkedInClicked()" tabindex="0">
+        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn" tabindex="-1">
+        <span class="icon-text" tabindex="-1">LinkedIn</span>
       </div>
 
-      <div class="icon-layout" (click)="githubClicked()">
-        <img src="../../assets/github.png" class="icon" alt="Github">
-        <span class="icon-text">GitHub</span>
+      <div class="icon-layout" (click)="githubClicked()" (keydown.enter)="githubClicked()" tabindex="0">
+        <img src="../../assets/github.png" class="icon" alt="Github" tabindex="-1">
+        <span class="icon-text" tabindex="-1">GitHub</span>
       </div>
 
-      <div class="icon-layout" (click)="emailClicked()">
-        <img src="../../assets/gmail.png" class="icon" alt="GMail">
-        <span class="icon-text">Email</span>
+      <div class="icon-layout" (click)="emailClicked()" (keydown.enter)="emailClicked()" tabindex="0">
+        <img src="../../assets/gmail.png" class="icon" alt="GMail" tabindex="-1">
+        <span class="icon-text" tabindex="-1">Email</span>
       </div>
     </div>
     <p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p>

src/app/contact/contact.component.spec.ts

@@ -1,14 +1,23 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
 
 import { ContactComponent } from './contact.component';
+import { Angulartics2 } from 'angulartics2';
 
 describe('ContactComponent', () => {
   let component: ContactComponent;
   let fixture: ComponentFixture<ContactComponent>;
 
   beforeEach(async(() => {
+    const analytics = jasmine.createSpyObj('piwik', ['startTracking']);
     TestBed.configureTestingModule({
-      declarations: [ ContactComponent ]
+      imports: [
+        RouterTestingModule,
+      ],
+      declarations: [ ContactComponent ],
+      providers: [
+        { provide: Angulartics2, useValue: analytics },
+      ],
     })
     .compileComponents();
   }));

src/app/contact/contact.component.ts

@@ -1,4 +1,5 @@
 import {AfterContentInit, Component, OnInit} from '@angular/core';
+import { Angulartics2 } from 'angulartics2';
 
 @Component({
   selector: 'app-contact',
@@ -7,21 +8,34 @@ import {AfterContentInit, Component, OnInit} from '@angular/core';
 })
 export class ContactComponent implements AfterContentInit {
 
-  constructor() {
+  constructor(private analytics: Angulartics2) {
   }
 
   ngAfterContentInit(): void {
   }
 
   linkedInClicked() {
+    this.analytics.eventTrack.next(this.linkClickEvent('LinkedIn'));
     window.open('https://www.linkedin.com/in/cameron-cordes-3b166583/');
   }
 
   githubClicked() {
+    this.analytics.eventTrack.next(this.linkClickEvent('GitHub'));
     window.open('https://github.com/Stampede10343');
   }
 
   emailClicked() {
+    this.analytics.eventTrack.next(this.linkClickEvent('Email'));
     window.open('mailto:cameronc.dev@gmail.com');
   }
+
+  private linkClickEvent(label: String): object {
+      return {
+          action: 'LinkClick',
+          properties: {
+              category: 'Contact',
+              label: label
+          }
+      };
+  }
 }

src/app/toolbar/toolbar.component.css

@@ -1,4 +1,4 @@
-span {
+a {
   margin-left: 1em;
   margin-right: 1em;
   -webkit-transition: color 300ms;
@@ -8,13 +8,20 @@ span {
   transition: color 300ms;
 }
 
-span:hover {
-  color: var(--nord7);
-  cursor: pointer;
+a:hover {
+  color: var(--nord13);
 }
 
 @media (max-width: 425px) {
-  span {
-    font-size: 14px;
+  a {
+    font-size: 15px;
+    margin-left: .8em;
+    margin-right: .8em;
   }
 }
+
+a {
+  color: var(--nord4);
+  text-decoration: none;
+}
+

src/app/toolbar/toolbar.component.html

@@ -1,8 +1,8 @@
-<mat-sidenav-container>
 <mat-toolbar>
-    <span routerLink="/home" routerLinkActive="active">Home</span>
-    <span routerLink="/resume" routerLinkActive="active">Resume</span>
-    <span routerLink="/projects" routerLinkActive="active">Projects</span>
-    <span routerLink="/contact" routerLinkActive="active">Contact</span>
+  <mat-toolbar-row>
+  <a routerLink="/home" routerLinkActive="active">Home</a>
+  <a routerLink="/resume" routerLinkActive="active">Resume</a>
+  <a routerLink="/projects" routerLinkActive="active">Projects</a>
+  <a routerLink="/contact" routerLinkActive="active">Contact</a>
+  </mat-toolbar-row>
 </mat-toolbar>
-</mat-sidenav-container>

src/app/toolbar/toolbar.component.spec.ts

@@ -36,12 +36,12 @@ describe('ToolbarComponent', () => {
   });
 
   it('should contain a material toolbar', () => {
-    expect(fixture.debugElement.children[0].nativeElement.className).toBe('mat-drawer-container mat-sidenav-container');
+    expect(fixture.debugElement.children[0].nativeElement.className).toBe('mat-toolbar mat-toolbar-multiple-rows');
   });
 
   it('should contain 4 links, Home, Resume, Projects, Contact', () => {
     const debugElements = fixture.debugElement.queryAll((element) => {
-      return element.nativeElement.className.indexOf('mat-toolbar') !== -1;
+      return element.nativeElement.className.indexOf('mat-toolbar-row') !== -1;
     });
 
     expect(debugElements[0].children.length).toBe(4);

src/index.html

@@ -26,6 +26,12 @@
     g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
 </script>
+<script type="text/javascript">
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src='https://matomo.cameroncordes.me/js/container_mhU560vd.js'; s.parentNode.insertBefore(g,s);
+</script>
 <!-- End Piwik Code -->
 </head>
 <body>

src/styles.css

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
 
-h1, h2, h3, p, span {
+h1, h2, h3, p, span, a {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-weight: 300;
 }
@@ -114,5 +114,5 @@ html, body {
 }
 
 .active {
-  color: var(--nord7);
+  color: var(--nord7) !important;
 }