Updated GTM data layer config. Resolves #1067. (#1118)

Author: MillenniumFalconMechanic

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

@@ -21,12 +21,12 @@ <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(element)"></a>
+                    <a (click)="trackDownload(state.releaseDataset.projectShortname, element)"></a>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="description">
                 <mat-cell *matCellDef="let element" class="description">
-                    <span class="fontsize-s">{{element.url}}</span>
+                    <span class="fontsize-s">{{element.url}}!!</span>
                     <span class="fontsize-xxs">{{element.description}}</span>
                 </mat-cell>
             </ng-container>

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

@@ -119,11 +119,12 @@ export class ReleaseFilesModalComponent implements OnDestroy, OnInit {
     /**
      * Track download of release file.
      * 
+     * @param {string} projectShortname
      * @param {ReleaseFileView} releaseFile
      */
-    public trackDownload(releaseFile: ReleaseFileView): void {
+    public trackDownload(projectShortname: string, releaseFile: ReleaseFileView): void {
 
-        this.gtmService.trackDownload(releaseFile.url);
+        this.gtmService.trackDownload(projectShortname, 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(visualization.url)">{{visualization.title}}</a>
+                               rel="noopener noreferrer" (click)="trackExternalLink(element.projectShortname, visualization.url)">{{visualization.title}}</a>
                         </hca-tooltip>
                     </ng-container>
                 </mat-cell>

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

@@ -85,10 +85,11 @@ export class ReleaseTableComponent {
     /**
      * Track click on link to external visualization tool.
      *
+     * @param {string} projectShortname
      * @param {string} url
      */
-    public trackExternalLink(url: string): void {
+    public trackExternalLink(projectShortname: string, url: string): void {
 
-        this.gtmService.trackExternalLink(url);
+        this.gtmService.trackExternalLink(projectShortname, url);
     }
 }

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

@@ -11,65 +11,74 @@ import { Inject, Injectable } from "@angular/core";
 @Injectable()
 export class GTMService {
 
-    private EVENT_NAME_DOWNLOAD = "download";
-    private EVENT_NAME_EXTERNAL_LINK = "externalLink";
-    
-    private dataLayer;
+    private EVENT_NAME_DOWNLOAD = "Download";
+    private EVENT_NAME_VISUALIZE = "Visualize";
 
     /**
      * @param {Window} window
      */
     constructor(@Inject("Window") private window: Window) {
-
-        this.dataLayer = window["dataLayer"];
     }
 
     /**
      * Send custom "download" GTM event.
-     * 
-     * @param {string} url
+     *
+     * @param {string} action
+     * @param {string} label
      */
-    public trackDownload(url: string): void {
+    public trackDownload(action: string, label: string): void {
 
         if ( !this.isTracking() ) {
             return;
         }
-        this.trackEvent(this.EVENT_NAME_DOWNLOAD, {url});
+        this.trackEvent(this.EVENT_NAME_DOWNLOAD, action, label);
     }
 
     /**
      * Send custom "download" GTM event.
      *
-     * @param {string} url
+     * @param {string} action
+     * @param {string} label
      */
-    public trackExternalLink(url: string): void {
+    public trackExternalLink(action: string, label: string): void {
 
         if ( !this.isTracking() ) {
             return;
         }
-        this.trackEvent(this.EVENT_NAME_EXTERNAL_LINK, {url});
+        this.trackEvent(this.EVENT_NAME_VISUALIZE, action, label);
     }
-    
+
+    /**
+     * Return the GTM data layer.
+     */
+    private getDataLayer(): any[] {
+
+        return this.window["dataLayer"];
+    }
+
     /**
      * Returns true if GTM is enabled.
      * 
      * @returns {boolean}
      */
     private isTracking(): boolean {
 
-        return !!this.dataLayer;
+        return !!this.getDataLayer();
     }
 
     /**
      * Track the specified event.
      * 
      * @param {string} eventName
-     * @param {any} eventVariables
+     * @param {string} label
      */
-    private trackEvent(eventName: string, eventVariables: any): void {
+    private trackEvent(eventName: string, action: string, label: string): void {
 
-        this.dataLayer.push(Object.assign({
-            "event": eventName
-        }, eventVariables));
+        const eventConfig = {
+            event: eventName,
+            eventAction: action,
+            eventLabel: label
+        };
+        this.getDataLayer().push(eventConfig);
     }
 }