chore(app): add analytics service (#7)

src/app/@theme/components/header/header.component.html

@@ -45,7 +45,7 @@
     <span>Download</span>
     <div class="download-items-container">
       <ul>
-        <li>
+        <li (click)="clickOnDownloadPack()">
           <a href="{{ zipUrl }}"
              download>
             <i [innerHTML]="'cube-outline' | eva: { width: 24, height: 24, fill: '#ffffff' }"></i>

src/app/@theme/components/header/header.component.ts

@@ -6,6 +6,7 @@
 
 import { Component } from '@angular/core';
 import { UrlService } from '../../../@core/data/service/url.service';
+import { EvaAnalytics } from '../../services/analytics.service';
 
 @Component({
   selector: 'eva-header',
@@ -16,7 +17,12 @@ export class HeaderComponent {
 
   zipUrl: string;
 
-  constructor(private urlService: UrlService) {
+  constructor(private urlService: UrlService,
+              private analytics: EvaAnalytics) {
     this.zipUrl = this.urlService.getZippedIconsUrl();
   }
+
+  clickOnDownloadPack() {
+    this.analytics.trackEvent('download-pack', 'download-icons-design-pack');
+  }
 }

src/app/@theme/components/modals/download-icon/download-icon.component.html

@@ -11,7 +11,7 @@
     </div>
     <div class="download-controls">
       <div *ngFor="let item of downloadControls"
-           (click)="selectFormatAndDownloadIcon(item.format)"
+           (click)="clickOnDownloadIcon(item)"
            [class.active]="item.format === selectedFormat"
       >
         <a href="{{ item.href }}" download>

src/app/@theme/components/modals/download-icon/download-icon.component.ts

@@ -7,6 +7,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
 import { UrlService } from '../../../../@core/data/service/url.service';
 import { NbDialogRef } from '@nebular/theme';
+import { EvaAnalytics } from '../../../services/analytics.service';
 
 @Component({
   selector: 'eva-download-icon',
@@ -24,7 +25,8 @@ export class DownloadIconComponent implements AfterViewInit {
 
   constructor(private changeDetectorRef: ChangeDetectorRef,
               private urlService: UrlService,
-              protected dialogRef: NbDialogRef<DownloadIconComponent>) {}
+              protected dialogRef: NbDialogRef<DownloadIconComponent>,
+              private analytics: EvaAnalytics) {}
 
   ngAfterViewInit() {
     this.downloadControls =
@@ -37,7 +39,7 @@ export class DownloadIconComponent implements AfterViewInit {
     this.dialogRef.close();
   }
 
-  selectFormatAndDownloadIcon(iconFormat: string) {
-    this.selectedFormat = iconFormat;
+  clickOnDownloadIcon(icon: { format: string; title: string }) {
+    this.analytics.trackEvent('download-icon', `${this.selectedIcon}.${icon.format}`);
   }
 }

src/app/@theme/components/page-container/page-container.component.ts

@@ -25,6 +25,7 @@ import { debounceTime, delay, mergeMap, takeWhile, tap } from 'rxjs/operators';
 import { DownloadIconComponent } from '../modals/download-icon/download-icon.component';
 import { DialogStateService } from '../../services/dialog-state.service';
 import { EvaVersionService } from '../../services/version.service';
+import { EvaAnalytics } from '../../services/analytics.service';
 
 @Component({
   selector: 'eva-page-container',
@@ -54,7 +55,8 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
               private breakpointService: NbMediaBreakpointsService,
               private themeService: NbThemeService,
               private dialogStateService: DialogStateService,
-              private versionService: EvaVersionService) {
+              private versionService: EvaVersionService,
+              private analytics: EvaAnalytics) {
     this.currentVersion = this.versionService.getEvoVersion();
     this.breakpoints = this.breakpointService.getBreakpointsMap();
 
@@ -133,6 +135,8 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
   }
 
   clickIcon(icon) {
+    this.analytics.trackEvent('open-icon-dialog', icon);
+
     if (this.isMobileMode) {
       return;
     }

src/app/@theme/services/analytics.service.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable, Inject } from '@angular/core';
+import { NB_WINDOW } from '@nebular/theme';
+declare const ga: any;
+
+@Injectable()
+export class EvaAnalytics {
+  private enabled: boolean;
+
+  constructor(@Inject(NB_WINDOW) private window) {
+    this.enabled = this.window.location.href.indexOf('akveo.github.io') >= 0;
+  }
+
+  trackEvent(eventName: string, eventVal: string = '') {
+    if (this.enabled) {
+      ga('send', 'event', eventName, eventVal);
+    }
+  }
+}

src/app/@theme/services/index.ts

@@ -6,9 +6,11 @@
 
 import { EvaVersionService } from './version.service';
 import { DialogStateService } from './dialog-state.service';
+import { EvaAnalytics } from './analytics.service';
 
 
 export const evaServices = [
   EvaVersionService,
   DialogStateService,
+  EvaAnalytics,
 ];