Added GA/GTM for Terra functionality. Resolves #1137. (#1141)

Author: MillenniumFalconMechanic

spa/src/app/files/hca-get-data/display-data-link/display-data-link.component.html

@@ -1,3 +1,4 @@
 <a class="fontsize-s link"
    href="{{link}}"
+   (click)="onClick($event)"
    [attr.target]="targetBlank ? '_blank' : null">{{link}}</a>

spa/src/app/files/hca-get-data/display-data-link/display-data-link.component.ts

@@ -6,7 +6,7 @@
  */
 
 // Core dependencies
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 @Component({
     selector: "display-data-link",
@@ -18,4 +18,17 @@ export class DisplayDataLinkComponent {
     // Inputs
     @Input() link: string;
     @Input() targetBlank: boolean;
+    
+    // Outputs 
+    @Output() dataLinkClicked = new EventEmitter<MouseEvent>();
+
+    /**
+     * Emit click event on click of anchor tag.
+     * 
+     * @param {MouseEvent} event
+     */
+    public onClick(event: MouseEvent) {
+
+        this.dataLinkClicked.emit(event);
+    }
 }

spa/src/app/files/hca-get-data/hca-export-to-terra/hca-export-to-terra.component.html

@@ -7,7 +7,7 @@ <h4 class="fontsize-m semi-bold">Select Export File Types</h4>
         <ng-container *ngIf="getFileTypeSummaries(state.manifestDownloadFileSummary).length > 0">
             <file-type-summary-list [selectedSearchTermNames]="state.selectedSearchTermNames"
                                     [fileTypeSummaries]="getFileTypeSummaries(state.manifestDownloadFileSummary)"></file-type-summary-list>
-            <button class="button primary" type="button" (click)="onExportToTerra()" [disabled]="!isAnyFileFormatSelected(state.selectedSearchTerms)">Request Export</button>
+            <button class="button primary" type="button" (click)="onExportToTerra(state.selectedSearchTerms)" [disabled]="!isAnyFileFormatSelected(state.selectedSearchTerms)">Request Export</button>
         </ng-container>
     </ng-container>
     <ng-container *ngIf="isRequestInProgress(state.exportToTerraStatus)">
@@ -24,8 +24,10 @@ <h4 class="fontsize-m semi-bold">Your Export is Ready</h4>
         </hca-get-data-panel>
         <div class="download">
             <display-data-link [link]="getTerraServiceUrl(state.exportToTerraUrl)"
-                               [targetBlank]="true"></display-data-link>
-            <copy-to-clipboard [copyToClipboardLink]="getTerraServiceUrl(state.exportToTerraUrl)"></copy-to-clipboard>
+                               [targetBlank]="true" 
+                               (dataLinkClicked)="onDataLinkClicked(getTerraServiceUrl(state.exportToTerraUrl))"></display-data-link>
+            <copy-to-clipboard [copyToClipboardLink]="getTerraServiceUrl(state.exportToTerraUrl)"
+                               (copyClicked)="onDataLinkCopied(getTerraServiceUrl(state.exportToTerraUrl))"></copy-to-clipboard>
         </div>
     </ng-container>
     <ng-container *ngIf="isRequestFailed(state.exportToTerraStatus)">

spa/src/app/files/hca-get-data/hca-export-to-terra/hca-export-to-terra.component.spec.ts

@@ -30,6 +30,7 @@ import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy
 import { DisplayDataLinkComponent } from "../display-data-link/display-data-link.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { HCAExportToTerraComponent } from "./hca-export-to-terra.component";
+import { GTMService } from "../../../shared/gtm/gtm.service";
 
 describe("HCAExportToTerraComponent", () => {
 
@@ -88,6 +89,12 @@ describe("HCAExportToTerraComponent", () => {
                         "requestFileManifestUrl"
                     ])
                 },
+                {
+                    provide: GTMService,
+                    useValue: jasmine.createSpyObj("GTMService", [
+                        "trackEvent"
+                    ])
+                },
                 {
                     provide: HttpClient,
                     useValue: jasmine.createSpyObj("HttpClient", [

spa/src/app/files/hca-get-data/hca-export-to-terra/hca-export-to-terra.component.ts

@@ -26,6 +26,13 @@ import { SearchTerm } from "../../search/search-term.model";
 import { ExportToTerraStatus } from "../../shared/export-to-terra-status.model";
 import { TerraService } from "../../shared/terra.service";
 import { HCAExportToTerraState } from "./hca-export-to-terra.state";
+import { SearchTermService } from "../../shared/search-term.service";
+import { GTMService } from "../../../shared/gtm/gtm.service";
+import { GACategory } from "../../../shared/gtm/ga-category.model";
+import { GAAction } from "../../../shared/gtm/ga-action.model";
+import { GADimension } from "../../../shared/gtm/ga-dimension.model";
+import { ReleaseName } from "../../releases/release-name.model";
+import { ToolName } from "../../shared/tool-name.model";
 
 @Component({
     selector: "hca-export-to-terra",
@@ -44,11 +51,15 @@ export class HCAExportToTerraComponent implements OnDestroy, OnInit {
     /**
      *
      * @param {ConfigService} configService
+     * @param {GTMService} gtmService
+     * @param {SearchTermService} searchTermService
      * @param {TerraService} terraService
      * @param {Store<AppState>} store
      * @param {Window} window
      */
     constructor(private configService: ConfigService,
+                private gtmService: GTMService,
+                private searchTermService: SearchTermService,
                 private terraService: TerraService,
                 private store: Store<AppState>,
                 @Inject("Window") window: Window) {
@@ -135,10 +146,41 @@ export class HCAExportToTerraComponent implements OnDestroy, OnInit {
         return this.terraService.isExportToTerraRequestNotStarted(status);
     }
 
+    /**
+     * Track click on Terra data link.
+     *
+     * @param {string} exportToTerraUrl
+     */
+    public onDataLinkClicked(exportToTerraUrl: string) {
+
+        this.gtmService.trackEvent(GACategory.RESULT_SET, GAAction.DATA_LINK, exportToTerraUrl, {
+            [GADimension.TOOL_NAME]: ToolName.TERRA
+        });
+    }
+
+    /**
+     * Track click on copy of Terra data link.
+     *
+     * @param {string} exportToTerraUrl
+     */
+    public onDataLinkCopied(exportToTerraUrl: string) {
+        
+        this.gtmService.trackEvent(GACategory.RESULT_SET, GAAction.COPY_TO_CLIPBOARD, exportToTerraUrl, {
+            [GADimension.TOOL_NAME]: ToolName.TERRA
+        });
+    }
+
     /**
      * Dispatch action to export to Terra.
+     * 
+     * @param {SearchTerm[]} selectedSearchTerms
      */
-    public onExportToTerra() {
+    public onExportToTerra(selectedSearchTerms: SearchTerm[]) {
+
+        const query = this.searchTermService.marshallSearchTerms(selectedSearchTerms);
+        this.gtmService.trackEvent(GACategory.RESULT_SET, GAAction.EXPORT, query, {
+            [GADimension.TOOL_NAME]: ToolName.TERRA
+        });
         this.store.dispatch(new ExportToTerraRequestAction());
     }
 

spa/src/app/files/shared/tool-name.model.ts

@@ -0,0 +1,12 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Set of tools.
+ */
+
+export enum ToolName {
+    "TERRA" = "Terra",
+    "MANIFEST" = "Manifest",
+    "MATRIX" = "Matrix"
+}

spa/src/app/shared/copy-to-clipboard/copy-to-clipboard.component.ts

@@ -6,7 +6,7 @@
  */
 
 // Core dependencies
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { BehaviorSubject, interval } from "rxjs";
 import { take } from "rxjs/internal/operators";
 
@@ -22,6 +22,9 @@ export class CopyToClipboardComponent {
 
     // Inputs
     @Input() copyToClipboardLink: string;
+    
+    // Outputs 
+    @Output() copyClicked = new EventEmitter<any>();
 
     /**
      * Returns true, when copy to clipboard is successful.
@@ -41,6 +44,10 @@ export class CopyToClipboardComponent {
      */
     public onCopy(event: MouseEvent) {
 
+        // Let parent components know link has been copied
+        this.copyClicked.emit(event);
+        
+        // Update UI to indicate link has been copied
         this.copied.next(true);
         this.resetCopied();
         event.stopPropagation();

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

@@ -6,7 +6,9 @@
  */
 
 export enum GAAction {
+    "DATA_LINK" = "Data Link",
     "DOWNLOAD" = "Download",
     "EXPORT" = "Export",
+    "COPY_TO_CLIPBOARD" = "Copy to Clipboard",
     "VISUALIZE" = "Visualize"
 }