Added analytics to release downloads and visualizations. Resolves #1067. (#1116)

Author: MillenniumFalconMechanic

spa/src/app/files/releases/release-files-modal/release-files-modal.component.html

@@ -21,7 +21,7 @@ <h4 class="fontsize-l" [ngClass]="{'singleDataset': state.singleDataset}">
         <mat-table [dataSource]="state.releaseDataset.files">
             <ng-container matColumnDef="download">
                 <mat-cell *matCellDef="let element" class="download fontsize-xxs">
-                    <a [href]="getReleaseFileUrl(element.url)"></a>
+                    <a [href]="getReleaseFileUrl(element.url)" (click)="trackDownload(element)"></a>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="description">

spa/src/app/files/releases/release-files-modal/release-files-modal.component.ts

@@ -19,7 +19,7 @@ import { BehaviorSubject, combineLatest, Subject } from "rxjs";
 import { filter, take, takeUntil } from "rxjs/operators";
 
 // App dependencies
-import { Release } from "../release.model";
+import { ConfigService } from "../../../config/config.service";
 import { AppState } from "../../../_ngrx/app.state";
 import { ModalClosedAction } from "../../../modal/_ngrx/modal-closed.action";
 import { ModalOpenedAction } from "../../../modal/_ngrx/modal-opened.action";
@@ -33,9 +33,11 @@ import { SetReleaseReferrerAction } from "../../_ngrx/release/set-release-referr
 import { FetchProjectRequestAction } from "../../_ngrx/table/table.actions";
 import { ReleaseDatasetView } from "../release-dataset-view.model";
 import { ReleaseFilesModalState } from "./release-files-modal.state";
+import { Release } from "../release.model";
 import { ReleaseName } from "../release-name.model";
+import { ReleaseFileView } from "../release-file-view.model";
 import { ReleaseService } from "../../shared/release.service";
-import { ConfigService } from "../../../config/config.service";
+import { GTMService } from "../../../shared/gtm/gtm.service";
 
 @Component({
     selector: "release-files-modal",
@@ -55,6 +57,7 @@ export class ReleaseFilesModalComponent implements OnDestroy, OnInit {
     /**
      * @param {Store<AppState>} store
      * @param {ConfigService} configService
+     * @param {GTMService} gtmService
      * @param {ReleaseService} releaseService
      * @param {MatDialogRef<ProjectDownloadMatrixModalComponent>} dialogRef
      * @param {any} data
@@ -63,6 +66,7 @@ export class ReleaseFilesModalComponent implements OnDestroy, OnInit {
     constructor(
         private store: Store<AppState>,
         private configService: ConfigService,
+        private gtmService: GTMService,
         private releaseService: ReleaseService,
         private dialogRef: MatDialogRef<ReleaseFilesModalComponent>,
         @Inject(MAT_DIALOG_DATA) private data: any,
@@ -112,6 +116,16 @@ export class ReleaseFilesModalComponent implements OnDestroy, OnInit {
         this.store.dispatch(new SetReleaseReferrerAction());
     }
 
+    /**
+     * Track download of release file.
+     * 
+     * @param {ReleaseFileView} releaseFile
+     */
+    public trackDownload(releaseFile: ReleaseFileView): void {
+
+        this.gtmService.trackDownload(releaseFile.url);
+    }
+
     /**
      * Create model of dataset to back modal. The specified release is expected to have a single project containing a
      * single dataset; the dataset we want to display.

spa/src/app/files/releases/release-table/release-table.component.html

@@ -69,7 +69,7 @@ <h2 class="fontsize-xl">{{organView.organ}}</h2>
                                      [tooltipDisabled]="false"
                                      [tooltipPosition]="'above'">
                             <a href={{visualization.url}} target="_blank"
-                               rel="noopener noreferrer">{{visualization.title}}</a>
+                               rel="noopener noreferrer" (click)="trackExternalLink(visualization.url)">{{visualization.title}}</a>
                         </hca-tooltip>
                     </ng-container>
                 </mat-cell>

spa/src/app/files/releases/release-table/release-table.component.ts

@@ -14,6 +14,7 @@ import { AppState } from "../../../_ngrx/app.state";
 import { SetReleaseReferrerAction } from "../../_ngrx/release/set-release-referrer.action";
 import { ReleaseOrganView } from "../release-organ-view.model";
 import { SetReleaseFilesReferrerAction } from "../../_ngrx/release/set-release-files-referrer.action";
+import { GTMService } from "../../../shared/gtm/gtm.service";
 
 @Component({
     selector: "release-table",
@@ -29,9 +30,10 @@ export class ReleaseTableComponent {
     @Input() releaseFilesReferrer: boolean[];
 
     /**
+     * @param {GTMService} gtmService
      * @param {Store<AppState>} store
      */
-    constructor(private store: Store<AppState>) {}
+    constructor(private gtmService: GTMService, private store: Store<AppState>) {}
 
     /**
      * Returns the technology, based off libraryConstructionApproach. Any libraryConstructionApproach ending with
@@ -78,4 +80,15 @@ export class ReleaseTableComponent {
             this.store.dispatch(new SetReleaseReferrerAction());
         }
     }
+
+
+    /**
+     * Track click on link to external visualization tool.
+     *
+     * @param {string} url
+     */
+    public trackExternalLink(url: string): void {
+
+        this.gtmService.trackExternalLink(url);
+    }
 }

spa/src/app/shared/gtm/gtm.service.ts

@@ -0,0 +1,75 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Service handling Google Tag Manager-related functionality.
+ */
+
+// Core dependencies
+import { Inject, Injectable } from "@angular/core";
+
+@Injectable()
+export class GTMService {
+
+    private EVENT_NAME_DOWNLOAD = "download";
+    private EVENT_NAME_EXTERNAL_LINK = "externalLink";
+    
+    private dataLayer;
+
+    /**
+     * @param {Window} window
+     */
+    constructor(@Inject("Window") private window: Window) {
+
+        this.dataLayer = window["dataLayer"];
+    }
+
+    /**
+     * Send custom "download" GTM event.
+     * 
+     * @param {string} url
+     */
+    public trackDownload(url: string): void {
+
+        if ( !this.isTracking() ) {
+            return;
+        }
+        this.trackEvent(this.EVENT_NAME_DOWNLOAD, {url});
+    }
+
+    /**
+     * Send custom "download" GTM event.
+     *
+     * @param {string} url
+     */
+    public trackExternalLink(url: string): void {
+
+        if ( !this.isTracking() ) {
+            return;
+        }
+        this.trackEvent(this.EVENT_NAME_EXTERNAL_LINK, {url});
+    }
+    
+    /**
+     * Returns true if GTM is enabled.
+     * 
+     * @returns {boolean}
+     */
+    private isTracking(): boolean {
+
+        return !!this.dataLayer;
+    }
+
+    /**
+     * Track the specified event.
+     * 
+     * @param {string} eventName
+     * @param {any} eventVariables
+     */
+    private trackEvent(eventName: string, eventVariables: any): void {
+
+        this.dataLayer.push(Object.assign({
+            "event": eventName
+        }, eventVariables));
+    }
+}

spa/src/app/shared/shared.module.ts

@@ -20,6 +20,7 @@ import { AnnouncementComponent } from "./announcement/announcement.component";
 import { CCToolbarNavComponent } from "./cc-toolbar-nav/cc-toolbar-nav.component";
 import { CCToolbarNavItemComponent } from "./cc-toolbar-nav-item/cc-toolbar-nav-item.component";
 import { DownloadButtonComponent } from "./download-button/download-button.component";
+import { GTMService } from "./gtm/gtm.service";
 import { HCASectionTitleComponent } from "./hca-section-title/hca-section-title.component";
 import { HCATabComponent } from "./hca-tab/hca-tab.component";
 import { KeyValuePairComponent } from "./key-value-pair/key-value-pair.component";
@@ -62,6 +63,7 @@ import { NavComponent } from "./nav/nav.component";
         WarningTitleComponent
     ],
     providers: [
+        GTMService,
         ResponsiveService
     ],
     exports: [