Added tracking of facet de/select. Resolves #1162. (#1184)

Author: MillenniumFalconMechanic

spa/src/app/files/_ngrx/analytics/tracking.action.ts

@@ -0,0 +1,26 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Model of action triggered when action is to be tracked by GA/GTM. 
+ */
+
+// Core dependencies
+import { Action } from "@ngrx/store";
+
+// App dependencies
+import { GAEvent } from "../../../shared/analytics/ga-event.model";
+import { GASource } from "../../../shared/analytics/ga-source.model";
+
+export interface TrackingAction extends Action {
+    
+    source: GASource; // Element/component where tracking event originated
+    currentQuery: string; // Current set of selected search terms
+
+    /**
+     * Return action in the format of a GA event.
+     *
+     * @returns {string}
+     */
+    asEvent(): GAEvent;
+}

spa/src/app/files/_ngrx/file.effects.spec.ts

@@ -23,14 +23,15 @@ import {
     PROJECTS_STATE_WITH_PROJECT_SEARCH_TERM, SAMPLES_STATE_WITH_SEARCH_TERM
 } from "./file.state.mock";
 import { FetchFileFacetsRequestAction } from "./facet/file-facet-list.actions";
-import { SearchTermsUpdatedAction } from "./search/search-terms-updated-action.action";
+import { FetchFacetsSuccessAction } from "./facet/fetch-facets-success-action.action";
+import { SearchTermsUpdatedAction } from "./search/search-terms-updated.action";
+import { GTMService } from "../../shared/analytics/gtm.service";
 import { DEFAULT_PROJECTS_ENTITY_SEARCH_RESULTS } from "../shared/entity-search-results.mock";
 import { FilesService } from "../shared/files.service";
 import { DEFAULT_FILE_SUMMARY } from "../shared/file-summary.mock";
 import { TermCountsUpdatedAction } from "./table/term-counts-updated.action";
 import { FetchTableModelSuccessAction } from "./table/fetch-table-model-success.action";
 import { FetchTableDataRequestAction } from "./table/fetch-table-data-request.action";
-import { FetchFacetsSuccessAction } from "./facet/fetch-facets-success-action.action";
 
 describe("File Effects", () => {
 
@@ -58,7 +59,13 @@ describe("File Effects", () => {
                     provide: FilesService,
                     useValue: filesService
                 },
-                provideMockStore({initialState: DEFAULT_PROJECTS_STATE})
+                provideMockStore({initialState: DEFAULT_PROJECTS_STATE}),
+                {
+                    provide: GTMService,
+                    useValue: jasmine.createSpyObj("GTMService", [
+                        "trackEvent"
+                    ])
+                }
             ]
         });
 

spa/src/app/files/_ngrx/file.effects.ts

@@ -13,40 +13,33 @@ import { Observable, of } from "rxjs";
 import { map, mergeMap, switchMap, take } from "rxjs/operators";
 
 // App dependencies
+import { TrackingAction } from "./analytics/tracking.action";
+import { FetchFacetsSuccessAction } from "./facet/fetch-facets-success-action.action";
 import { FetchIsMatrixSupportedRequestAction } from "./facet/fetch-is-matrix-supported-request.action";
 import { FetchIsMatrixSupportedSuccessAction } from "./facet/fetch-is-matrix-supported-success.action";
+import { FileFacetName } from "../facet/file-facet/file-facet-name.model";
 import { SetViewStateAction } from "./facet/set-view-state.action";
+import { FetchFileFacetsRequestAction, InitEntityStateAction, NoOpAction } from "./facet/file-facet-list.actions";
+import { selectTableQueryParams } from "./file.selectors";
 import { FileSummary } from "../file-summary/file-summary";
-import {
-    FetchFileFacetsRequestAction,
-    InitEntityStateAction,
-    NoOpAction
-} from "./facet/file-facet-list.actions";
-import {
-    FetchFileSummaryRequestAction,
-    FetchFileSummarySuccessAction
-} from "./file-summary/file-summary.actions";
-import {
-    selectTableQueryParams
-} from "app/files/_ngrx/file.selectors";
+import { FetchFileSummaryRequestAction, FetchFileSummarySuccessAction } from "./file-summary/file-summary.actions";
 import { AppState } from "../../_ngrx/app.state";
 import { ClearSelectedTermsAction } from "./search/clear-selected-terms.action";
 import { SelectFileFacetTermAction } from "./search/select-file-facet-term.action";
-import { SearchTerm } from "../search/search-term.model";
 import { selectSelectedSearchTerms } from "./search/search.selectors";
-import { SearchTermsUpdatedAction } from "./search/search-terms-updated-action.action";
+import { SearchTermsUpdatedAction } from "./search/search-terms-updated.action";
+import { SearchTerm } from "../search/search-term.model";
+import { SelectFacetAgeRangeAction } from "./search/select-facet-age-range.action";
+import { ClearSelectedAgeRangeAction } from "./search/clear-selected-age-range.action";
+import { GTMService } from "../../shared/analytics/gtm.service";
 import { EntityName } from "../shared/entity-name.model";
-import { FileFacetName } from "../facet/file-facet/file-facet-name.model";
 import { FilesService } from "../shared/files.service";
 import { FetchTableDataRequestAction } from "./table/fetch-table-data-request.action";
 import { FetchTableModelSuccessAction } from "./table/fetch-table-model-success.action";
 import { EntitySelectAction } from "./table/table.actions";
 import { DEFAULT_TABLE_PARAMS } from "../table/table-params.model";
 import { getSelectedTable } from "./table/table.state";
 import { TermCountsUpdatedAction } from "./table/term-counts-updated.action";
-import { FetchFacetsSuccessAction } from "./facet/fetch-facets-success-action.action";
-import { SelectFacetAgeRangeAction } from "./search/select-facet-age-range.action";
-import { ClearSelectedAgeRangeAction } from "./search/clear-selected-age-range.action";
 
 @Injectable()
 export class FileEffects {
@@ -55,10 +48,12 @@ export class FileEffects {
      * @param {Store<AppState>} store
      * @param {Actions} actions$
      * @param {FilesService} fileService
+     * @param {GTMService} gtmService
      */
     constructor(private store: Store<AppState>,
                 private actions$: Actions,
-                private fileService: FilesService) {
+                private fileService: FilesService,
+                private gtmService: GTMService) {
     }
 
     /**
@@ -79,7 +74,12 @@ export class FileEffects {
                 SelectFileFacetTermAction.ACTION_TYPE, // Selecting facet term eg file type "matrix"
                 SelectFacetAgeRangeAction.ACTION_TYPE // Setting age range
             ),
-            mergeMap(() => {
+            mergeMap((action) => {
+
+                // If this action is a tracking action, send tracking event.
+                if ( (action as TrackingAction).asEvent ) {
+                    this.gtmService.trackEvent((action as TrackingAction).asEvent());
+                }
 
                 // Return an array of actions that need to be dispatched - we need to (re-)request summary and facet
                 // (including table) data.

spa/src/app/files/_ngrx/search/clear-selected-age-range.action.ts

@@ -12,18 +12,53 @@ import { Action } from "@ngrx/store";
 import { AgeRange } from "../../facet/facet-age-range/age-range.model";
 import { SearchAgeRange } from "../../search/search-age-range.model";
 import { SearchTermAction } from "./search-term.action";
+import { TrackingAction } from "../analytics/tracking.action";
+import { GACategory } from "../../../shared/analytics/ga-category.model";
+import { GAAction } from "../../../shared/analytics/ga-action.model";
+import { GAEvent } from "../../../shared/analytics/ga-event.model";
+import { GAEntityType } from "../../../shared/analytics/ga-entity-type.model";
+import { GADimension } from "../../../shared/analytics/ga-dimension.model";
+import { GASource } from "../../../shared/analytics/ga-source.model";
 
-export class ClearSelectedAgeRangeAction implements Action, SearchTermAction {
+export class ClearSelectedAgeRangeAction implements Action, SearchTermAction, TrackingAction {
 
     public static ACTION_TYPE = "FILE.SEARCH.CLEAR_SELECTED_AGE_RANGE";
     public readonly type = ClearSelectedAgeRangeAction.ACTION_TYPE;
 
     /**
      * @param {string} facetName
      * @param {AgeRange} ageRange
+     * @param {GASource} source
+     * @param {string} currentQuery
      */
     constructor(public readonly facetName: string,
-                public readonly ageRange: AgeRange) {}
+                public readonly ageRange: AgeRange,
+                public source: GASource,
+                public currentQuery: string) {}
+
+    /**
+     * Return the cleared age range action as a GA event.
+     *
+     * @returns {GAEvent}
+     */
+    public asEvent(): GAEvent {
+
+        const term = this.asSearchTerm().getDisplayValue();
+        return {
+            category: GACategory.SEARCH,
+            action: GAAction.DESELECT, // Always DESELECT for this action (see SelectSelectedAgeRangeAction for SELECT)
+            label: term,
+            dimensions: {
+                [GADimension.CURRENT_QUERY]: this.currentQuery,
+                [GADimension.ENTITY_TYPE]: GAEntityType.FACET,
+                [GADimension.FACET]: this.facetName,
+                [GADimension.MAX]: `${this.ageRange.ageMax}`,
+                [GADimension.MIN]: `${this.ageRange.ageMin}`,
+                [GADimension.SOURCE]: this.source,
+                [GADimension.TERM]: term
+            }
+        };
+    }
 
     /**
      * Returns selected file facet term in search term format.

spa/src/app/files/_ngrx/search/clear-selected-terms.action.ts

@@ -2,14 +2,48 @@
  * Human Cell Atlas
  * https://www.humancellatlas.org/
  *
- * Action that is triggered when all selected file facet terms are to be removed and default state is restored.
+ * Action that is triggered when all selected facet terms are to be removed and default state is restored.
  */
 
 // Core dependencies
 import { Action } from "@ngrx/store";
 
-export class ClearSelectedTermsAction implements Action {
+// App dependencies
+import { TrackingAction } from "../analytics/tracking.action";
+import { GACategory } from "../../../shared/analytics/ga-category.model";
+import { GAAction } from "../../../shared/analytics/ga-action.model";
+import { GAEvent } from "../../../shared/analytics/ga-event.model";
+import { GAEntityType } from "../../../shared/analytics/ga-entity-type.model";
+import { GADimension } from "../../../shared/analytics/ga-dimension.model";
+import { GASource } from "../../../shared/analytics/ga-source.model";
+
+export class ClearSelectedTermsAction implements Action, TrackingAction {
+    
     public static ACTION_TYPE = "FILE.SEARCH.CLEAR_SELECTED_TERMS";
     public readonly type = ClearSelectedTermsAction.ACTION_TYPE;
-    constructor() {}
+
+    /**
+     * @param {GASource} source
+     * @param {string} currentQuery
+     */
+    constructor(public source: GASource, public currentQuery: string) {}
+
+    /**
+     * Return the clear action as a GA event.
+     *
+     * @returns {GAEvent}
+     */
+    public asEvent(): GAEvent {
+
+        return {
+            category: GACategory.SEARCH,
+            action: GAAction.CLEAR,
+            label: "Clear All",
+            dimensions: {
+                [GADimension.CURRENT_QUERY]: this.currentQuery,
+                [GADimension.ENTITY_TYPE]: GAEntityType.FACET,
+                [GADimension.SOURCE]: this.source
+            }
+        };
+    }
 }

spa/src/app/files/_ngrx/search/search-terms-updated-action.action.ts renamed to spa/src/app/files/_ngrx/search/search-terms-updated.action.ts

@@ -13,7 +13,7 @@ import { SearchState } from "./search.state";
 import { SelectFileFacetTermAction } from "./select-file-facet-term.action";
 import { ClearSelectedTermsAction } from "./clear-selected-terms.action";
 import { SetViewStateAction } from "../facet/set-view-state.action";
-import { SearchTermsUpdatedAction } from "./search-terms-updated-action.action";
+import { SearchTermsUpdatedAction } from "./search-terms-updated.action";
 import { SelectProjectIdAction } from "./select-project-id.action";
 import { SelectFacetAgeRangeAction } from "./select-facet-age-range.action";
 import { SelectSearchTermAction } from "./select-search-term.action";

spa/src/app/files/_ngrx/search/search.reducer.ts

@@ -17,7 +17,7 @@ import { SearchFacetTerm } from "../../search/search-facet-term.model";
 import { SearchTerm } from "../../search/search-term.model";
 import { SelectSearchTermAction } from "./select-search-term.action";
 import { SearchEntity } from "../../search/search-entity.model";
-import { SearchTermsUpdatedAction } from "./search-terms-updated-action.action";
+import { SearchTermsUpdatedAction } from "./search-terms-updated.action";
 import { QueryStringSearchTerm } from "../../search/url/query-string-search-term.model";
 import { FacetAgeRangeName } from "../../facet/facet-age-range/facet-age-range-name.model";
 import { SearchAgeRange } from "../../search/search-age-range.model";

spa/src/app/files/_ngrx/search/search.state.ts

@@ -14,18 +14,53 @@ import { AgeRange } from "../../facet/facet-age-range/age-range.model";
 import { SearchAgeRange } from "../../search/search-age-range.model";
 import { SearchTermAction } from "./search-term.action";
 import { SearchTerm } from "../../search/search-term.model";
+import { TrackingAction } from "../analytics/tracking.action";
+import { GACategory } from "../../../shared/analytics/ga-category.model";
+import { GAAction } from "../../../shared/analytics/ga-action.model";
+import { GAEvent } from "../../../shared/analytics/ga-event.model";
+import { GAEntityType } from "../../../shared/analytics/ga-entity-type.model";
+import { GADimension } from "../../../shared/analytics/ga-dimension.model";
+import { GASource } from "../../../shared/analytics/ga-source.model";
 
-export class SelectFacetAgeRangeAction implements Action, SearchTermAction {
+export class SelectFacetAgeRangeAction implements Action, SearchTermAction, TrackingAction {
 
     public static ACTION_TYPE = "FILE.SEARCH.SELECT_AGE_RANGE";
     public readonly type = SelectFacetAgeRangeAction.ACTION_TYPE;
 
     /**
      * @param {string} facetName
      * @param {AgeRange} ageRange
+     * @param {GASource} source
+     * @param {string} currentQuery
      */
     constructor(public readonly facetName: string,
-                public readonly ageRange: AgeRange) {}
+                public readonly ageRange: AgeRange,
+                public source: GASource,
+                public currentQuery: string) {}
+
+    /**
+     * Return the de/selected term as a GA event.
+     *
+     * @returns {GAEvent}
+     */
+    public asEvent(): GAEvent {
+
+        const term = this.asSearchTerm().getDisplayValue();
+        return {
+            category: GACategory.SEARCH,
+            action: GAAction.SELECT, // Always SELECT for this action (see ClearSelectedAgeRangeAction for DESELECT
+            label: term,
+            dimensions: {
+                [GADimension.CURRENT_QUERY]: this.currentQuery,
+                [GADimension.ENTITY_TYPE]: GAEntityType.FACET,
+                [GADimension.FACET]: this.facetName,
+                [GADimension.MAX]: `${this.ageRange.ageMax}`,
+                [GADimension.MIN]: `${this.ageRange.ageMin}`,
+                [GADimension.SOURCE]: this.source,
+                [GADimension.TERM]: term
+            }
+        };
+    }
 
     /**
      * Returns selected file facet term in search term format.

spa/src/app/files/_ngrx/search/select-facet-age-range.action.ts

@@ -10,11 +10,18 @@
 import { Action } from "@ngrx/store";
 
 // App dependencies
+import { TrackingAction } from "../analytics/tracking.action";
 import { SearchFacetTerm } from "../../search/search-facet-term.model";
 import { SearchTerm } from "../../search/search-term.model";
 import { SelectSearchTermAction } from "./select-search-term.action";
+import { GAEvent } from "../../../shared/analytics/ga-event.model";
+import { GAAction } from "../../../shared/analytics/ga-action.model";
+import { GACategory } from "../../../shared/analytics/ga-category.model";
+import { GADimension } from "../../../shared/analytics/ga-dimension.model";
+import { GAEntityType } from "../../../shared/analytics/ga-entity-type.model";
+import { GASource } from "../../../shared/analytics/ga-source.model";
 
-export class SelectFileFacetTermAction implements Action, SelectSearchTermAction {
+export class SelectFileFacetTermAction implements Action, SelectSearchTermAction, TrackingAction {
 
     public static ACTION_TYPE = "FILE.SEARCH.SELECT_FACET_TERM";
     public readonly type = SelectFileFacetTermAction.ACTION_TYPE;
@@ -23,10 +30,35 @@ export class SelectFileFacetTermAction implements Action, SelectSearchTermAction
      * @param {string} facetName
      * @param {string} termName
      * @param {boolean} selected
+     * @param {GASource} source
+     * @param {string} currentQuery
      */
     constructor(public readonly facetName: string,
                 public readonly termName: string,
-                public readonly selected = true) {}
+                public readonly selected = true,
+                public source: GASource,
+                public currentQuery: string) {}
+
+    /**
+     * Return the selected age range as a GA event.
+     * 
+     * @returns {GAEvent}
+     */
+    public asEvent(): GAEvent {
+        
+        return {
+            category: GACategory.SEARCH,
+            action: this.selected ? GAAction.SELECT : GAAction.DESELECT,
+            label: this.termName,
+            dimensions: {
+                [GADimension.CURRENT_QUERY]: this.currentQuery,
+                [GADimension.ENTITY_TYPE]: GAEntityType.FACET,
+                [GADimension.FACET]: this.facetName,
+                [GADimension.SOURCE]: this.source,
+                [GADimension.TERM]: this.termName
+            }
+        };
+    }
 
     /**
      * Returns selected file facet term in search term format.