Added GA dimensions to download/visualize events. Resolves #1067. (#1120)

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)" (click)="trackDownload(state.releaseDataset.projectShortname, element)"></a>
+                    <a [href]="getReleaseFileUrl(element.url)" (click)="trackDownload(state.releaseDataset, element)"></a>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="description">

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

@@ -36,8 +36,11 @@ 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 { GTMService } from "../../../shared/gtm/gtm.service";
+import { GACategory } from "../../../shared/gtm/ga-category.model";
+import { GADimension } from "../../../shared/gtm/ga-dimension.model";
+import { GAAction } from "../../../shared/gtm/ga-action.model";
+import { ReleaseService } from "../../shared/release.service";
 
 @Component({
     selector: "release-files-modal",
@@ -122,9 +125,14 @@ export class ReleaseFilesModalComponent implements OnDestroy, OnInit {
      * @param {string} projectShortname
      * @param {ReleaseFileView} releaseFile
      */
-    public trackDownload(projectShortname: string, releaseFile: ReleaseFileView): void {
+    public trackDownload(releaseDatasetView: ReleaseDatasetView, releaseFile: ReleaseFileView): void {
 
-        this.gtmService.trackDownload(projectShortname, releaseFile.url);
+        this.gtmService.trackEvent(GACategory.DATASET, GAAction.DOWNLOAD, this.getReleaseFileUrl(releaseFile.url), {
+            [GADimension.DATASET_NAME]: releaseDatasetView.datasetId,
+            [GADimension.FILE_TYPE]: releaseFile.type,
+            [GADimension.FILE_EXTENSION]: releaseFile.extension,
+            [GADimension.FILE_NAME]: releaseFile.url
+        });
     }
 
     /**

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" (click)="trackExternalLink(element.projectShortname, visualization.url)">{{visualization.title}}</a>
+                               rel="noopener noreferrer" (click)="trackExternalLink(element, visualization)">{{visualization.title}}</a>
                         </hca-tooltip>
                     </ng-container>
                 </mat-cell>

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

@@ -15,6 +15,11 @@ import { SetReleaseReferrerAction } from "../../_ngrx/release/set-release-referr
 import { ReleaseOrganView } from "../release-organ-view.model";
 import { SetReleaseFilesReferrerAction } from "../../_ngrx/release/set-release-files-referrer.action";
 import { GTMService } from "../../../shared/gtm/gtm.service";
+import { ReleaseVisualization } from "../release-visualization.model";
+import { ReleaseDatasetView } from "../release-dataset-view.model";
+import { GACategory } from "../../../shared/gtm/ga-category.model";
+import { GAAction } from "../../../shared/gtm/ga-action.model";
+import { GADimension } from "../../../shared/gtm/ga-dimension.model";
 
 @Component({
     selector: "release-table",
@@ -61,7 +66,8 @@ export class ReleaseTableComponent {
 
     /**
      * Update state to indicate that the release files modal should return to the release page and not a project-specific
-     * release tab.
+     * release tab.release-files-modal.component.html
+
      */
     public setReleaseFilesReferrer() {
 
@@ -85,11 +91,14 @@ export class ReleaseTableComponent {
     /**
      * Track click on link to external visualization tool.
      *
-     * @param {string} projectShortname
-     * @param {string} url
+     * @param {ReleaseDatasetView} releaseDatasetView
+     * @param {ReleaseVisualization} visualization
      */
-    public trackExternalLink(projectShortname: string, url: string): void {
+    public trackExternalLink(releaseDatasetView: ReleaseDatasetView, visualization: ReleaseVisualization): void {
 
-        this.gtmService.trackExternalLink(projectShortname, url);
+        this.gtmService.trackEvent(GACategory.DATASET, GAAction.VISUALIZE, visualization.url, {
+            [GADimension.DATASET_NAME]: releaseDatasetView.datasetId,
+            [GADimension.TOOL_NAME]: visualization.title
+        });
     }
 }

spa/src/app/shared/gtm/ga-action.model.ts

@@ -0,0 +1,12 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Possible values of Google Analytic actions.
+ */
+
+export enum GAAction {
+    "DOWNLOAD" = "Download",
+    "EXPORT" = "Export",
+    "VISUALIZE" = "Visualize"
+}

spa/src/app/shared/gtm/ga-category.model.ts

@@ -0,0 +1,11 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Possible values of Google Analytic categories.
+ */
+
+export enum GACategory {
+    "DATASET" = "Dataset",
+    "RESULT_SET" = "Result Set"
+}

spa/src/app/shared/gtm/ga-dimension.model.ts

@@ -0,0 +1,15 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Possible values of Google Analytic dimensions.
+ */
+
+export enum GADimension {
+    "DATASET_NAME" = "datasetName",
+    "FILE_EXTENSION" = "fileExtension",
+    "FILE_NAME" = "fileName",
+    "FILE_TYPE" = "fileType",
+    "QUERY" = "query",
+    "TOOL_NAME" = "toolName"
+}

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

@@ -8,12 +8,13 @@
 // Core dependencies
 import { Inject, Injectable } from "@angular/core";
 
+// App dependencies
+import { GACategory } from "./ga-category.model";
+import { GAAction } from "./ga-action.model";
+
 @Injectable()
 export class GTMService {
 
-    private EVENT_NAME_DOWNLOAD = "Download";
-    private EVENT_NAME_VISUALIZE = "Visualize";
-
     /**
      * @param {Window} window
      */
@@ -23,29 +24,17 @@ export class GTMService {
     /**
      * Send custom "download" GTM event.
      *
-     * @param {string} action
-     * @param {string} label
-     */
-    public trackDownload(action: string, label: string): void {
-
-        if ( !this.isTracking() ) {
-            return;
-        }
-        this.trackEvent(this.EVENT_NAME_DOWNLOAD, action, label);
-    }
-
-    /**
-     * Send custom "download" GTM event.
-     *
-     * @param {string} action
+     * @param {GACategory} category
+     * @param {GAAction} action
      * @param {string} label
+     * @param {{}} dimensions
      */
-    public trackExternalLink(action: string, label: string): void {
+    public trackEvent(category: GACategory, action: GAAction, label: string, dimensions: {} = {}): void {
 
         if ( !this.isTracking() ) {
             return;
         }
-        this.trackEvent(this.EVENT_NAME_VISUALIZE, action, label);
+        this.sendToGA(category, action, label, dimensions);
     }
 
     /**
@@ -63,22 +52,25 @@ export class GTMService {
      */
     private isTracking(): boolean {
 
-        return !!this.getDataLayer();
+        // return !!this.getDataLayer();
+        return true;
     }
 
     /**
-     * Track the specified event.
+     * Add event to data layer, triggering the configured GTM tag (and in turn sending tracking event to GA).
      * 
-     * @param {string} eventName
-     * @param {string} label
+     * @param {GACategory} category - GTM "event" variable, used as "Category" value for GA
+     * @param {GAAction} action - used as "Action" value for GA
+     * @param {string} label - used as "Label" value for GA
+     * @param {{}} dimensions - additional variables that correspond to GTM variables and in turn, GA dimensions
      */
-    private trackEvent(eventName: string, action: string, label: string): void {
+    private sendToGA(category: GACategory, action: GAAction, label: string, dimensions: {} = {}): void {
 
-        const eventConfig = {
-            event: eventName,
+        const eventConfig = Object.assign({
+            event: category,
             eventAction: action,
             eventLabel: label
-        };
+        }, dimensions);
         this.getDataLayer().push(eventConfig);
     }
 }