Merge pull request #375 from Safelite/feature/CSR-33

Feature/csr 33

src/common-components/button-question/button-question.spec.js

@@ -1,9 +1,8 @@
 import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
-import { nextTick } from "vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import store from "@/store";
-jest.mock("@/store",()=>{return{};},{virtual:true});
+
+jest.mock("@/store", () => { return {}; }, { virtual: true });
 
 describe("buttonQuestion.vue", () => {
   it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
@@ -76,7 +75,7 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("getColLength should return '' if prop isWide is set to false", () => {
     // Act
-    const localThis = { 
+    const localThis = {
       isWide: false,
       answers: ['a', 'b']
     }
@@ -110,12 +109,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should trigger event modelValue change to new value on when radio button selected", async () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, setupMocks({}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false
     });
-    const val = {checkValue: true, value: "2021", }
+    const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@@ -125,13 +124,13 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         modelValue: ["2022", "2021", "2020"],
         isMultiSelect: true,
       }
-    });
-    const val = {checkValue: true, value: "2019", }
+    }));
+    const val = { checkValue: true, value: "2019", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
@@ -141,12 +140,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
-        modelValue: [ 'a', 'b' ]
+        isMultiSelect: true,
+        modelValue: ['a', 'b']
       }
-    });
+    }));
     const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -158,12 +157,13 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
-        modelValue: [ 'a', 'b' ]
+        isMultiSelect: true,
+        modelValue: ['a', 'b']
       }
-    });
+    }));
+
     const val = { checkValue: false, value: "a", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -176,12 +176,12 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, {
+    const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
-        isMultiSelect: true, 
+        isMultiSelect: true,
         modelValue: 'a',
       }
-    });
+    }));
     const val = { checkValue: true, value: "c", }
     wrapper.vm.handleCheckedChanged(val);
 
@@ -189,3 +189,11 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.vm.selectedValues).toEqual("a");
   });
 });
+
+function setupMocks(mountOptionsMockData = {}) {
+  const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
+  const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+  const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+  return allMountOptions;
+}

src/common-components/button-question/button-question.vue

@@ -52,6 +52,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "buttonQuestion",
@@ -133,6 +134,9 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
+      
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
+
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;

src/constants/analytics-page-events.js

@@ -1,6 +0,0 @@
-const analyticsPageEvents = {
-  ENTRY: "ENTRY",
-  EVENT: "EVENT"
-};
-
-export { analyticsPageEvents };

src/constants/analytics.js

@@ -0,0 +1,32 @@
+const analyticsPageEvents = {
+  ENTRY: "ENTRY",
+  EVENT: "EVENT"
+};
+
+// GA Constants
+const GaEvents = {
+  GENERIC_EVENT: 'ga_Event',
+  PAGE_VIEW_EVENT : 'logPageview'
+};
+
+const GaCategories = {
+  API_RESPONSE: 'Api_Response',
+  EVOX: 'Evox'
+};
+
+const GaActions = {
+  RESULT: 'Result',
+  CLICKED: 'Clicked',
+  VIF: 'vif',
+  SUBMITTED: 'Submitted',
+};
+
+const GaLabels = {
+  SUCCESS: 'Success',
+  ERROR: 'Error',
+  LICENSE_PLATE_LOOKUP: 'License_Plate_Look_Up',
+  VIN_LOOKUP: 'Vin_Look_Up', 
+};
+
+
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};

src/constants/endpoints.js

@@ -70,6 +70,10 @@ const endpoints = {
   LogActivity:{
     url: "/analytics/api/v1/analytics/activity",
     method: "POST",
+  },
+  GetExperimentsByUserForGa: {
+    url: "/analytics/api/v1/analytics/get-experiments-for-GA",
+    method: "GET",
   }
 };
 

src/constants/experiments.js

@@ -1,6 +1,10 @@
 const experimentUniverses = {
     CONCEPT_FUNNEL: 'ConceptFunnel'
 };
+
+const experimentSettings = {
+    GOOGLE_CUSTOM_DIMENSION_INDEX: 'Google Custom Dimension Index'
+}
   
-export { experimentUniverses };
+export { experimentUniverses, experimentSettings};
   

src/constants/store-actions.js

@@ -19,6 +19,7 @@ const storeActions = {
   VALIDATE_ZIP: "validateZip",
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
   LOG_ACTIVITY: "logActivity",
+  GET_EXPERIMENTS_BY_USER_FOR_GA: "getExperimentsByUserForGa",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

src/global-methods.js

@@ -1,39 +1,34 @@
 import axios from "axios";
+import analyticsMixIn from "@/mixins/analytics-mixin.js";
+
 import { applicationConfig } from "@/constants/application-config.js";
-import httpStatusCodes from "http-status-codes";
+import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
 
 export default {
-  callHttpClient({ method, endpoint, payload }) {
+  callHttpClient({ method, endpoint, payload, logApiCall = true }) {
     return new Promise((resolve, reject) => {
       const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+      const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
 
-      const payloadAndAnalyticsData = Object.assign({}, payload, {
-        AppName: "FixMyGlass",
-      });
+      axios({ method: method, url: apiGatewayUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
+        .then((response) => {
 
-      axios({
-        method: method,
-        url: apiGatewayUrl + endpoint,
-        data: payloadAndAnalyticsData,
-        crossDomain: true,
-        responseType: {},
-      }).then(
-        (response) => {
-          if (response.status == httpStatusCodes.OK) {
-            if(response.data == undefined) {
-                reject(response);  
-            }else{
-              resolve(response);
-            }
-          } else {
-            reject(response);
+          if (logApiCall) {
+            analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.SUCCESS}_${endpoint}`, true);
           }
+
+          return resolve(response);
         },
-        (error) => {
-          console.error(error);
-          return reject(error.response);
-        }
-      );
+          error => {
+            console.error(error);
+
+            if (logApiCall) {
+              analyticsMixIn.methods.pushEventToGA(GaCategories.API_RESPONSE, GaActions.RESULT, `${GaLabels.ERROR}_${endpoint}`, true);
+            }
+
+            return reject(error.response);
+          }
+        );
     });
   },
 
@@ -48,11 +43,7 @@ export default {
         responseType: {},
       }).then(
         (response) => {
-          if (response.status == httpStatusCodes.OK) {
-            resolve(response);
-          } else {
-            reject(response);
-          }
+          resolve(response);
         },
         (error) => {
           return reject(error.response);

src/global-methods.spec.js

@@ -1,13 +1,16 @@
 import globalMethods from "@/global-methods";
 import axios from "axios";
+import analyticsMixIn from "@/mixins/analytics-mixin";
 
 //Mock external dependencies
 jest.mock("axios");
+jest.mock("@/mixins/analytics-mixin");
 
 it("Global Methods - Call Http Client - Should Resolve Promise", () => {
   //Arrange
   const endpoint = "https://mock.safelite.com";
   const httpArgs = setupMocksForHttpClient({ endpoint: endpoint });
+  analyticsMixIn.methods.pushEventToGA = jest.fn();
 
   //Act
   globalMethods.callHttpClient(httpArgs).then((response) => {
@@ -25,6 +28,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => {
     endpoint: endpoint,
     isError: true,
   });
+  analyticsMixIn.methods.pushEventToGA = jest.fn();
 
   //Act
   globalMethods.callHttpClient(httpArgs).catch((err) => {
@@ -72,5 +76,6 @@ function setupMocksForHttpClient({
 
   return {
     endpoint: endpoint,
+    logApiCall: true
   };
 }

src/helpers/unit-test-helper.js

@@ -7,6 +7,8 @@ import { cookieNames } from "@/constants/cookie-names";
 import { Form } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin";
 import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { queryStrings } from "@/constants/query-strings";
 
 // Common methods
 export function getMountOptions(mockData) {
@@ -16,6 +18,11 @@ export function getMountOptions(mockData) {
   //this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
   setupBaseMixinDispatchNonBlockingStoreAction(mockData);
 
+  mocks.pushEventToGA = jest.fn();
+  mocks.pushPageViewToGA = jest.fn();
+  mocks.logEvent = jest.fn();
+  mocks.pushExperimentsToDataLayer = jest.fn();
+
   mocks.dispatchNonBlockingStoreAction = jest.fn();
   mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
     let actionFilterResult = mockData.actionList.filter(
@@ -35,6 +42,12 @@ export function getMountOptions(mockData) {
   mocks.navigationScenarios = navigationScenarios;
   mocks.vehicleCategories = vehicleCategories;
   mocks.fmgPageValues = fmgPageValues;
+  mocks.analyticsPageEvents = analyticsPageEvents;
+  mocks.GaCategories = GaCategories;
+  mocks.GaActions = GaActions;
+  mocks.GaLabels = GaLabels;
+  mocks.GaEvents = GaEvents;
+  mocks.queryStrings = queryStrings;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -174,6 +174,9 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
+
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.LICENSE_PLATE_LOOKUP , true);
+
       const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip);
       if (!zipValidation.data.isServiceable) {
         this.$refs.funnelFooter.removeLoader();

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -79,6 +79,7 @@ import { errorMessages } from "@/constants/error-messages";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { queryStrings } from "@/constants/query-strings";
 
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
@@ -140,6 +141,12 @@ export default {
       selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
     }
   },
+  mounted(){
+    if(this.$store.getters.vehicle.imageVifNumber){
+      this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
+      this.$store.getters.vehicle.carId, true);
+    }
+  },
   methods: {
     arePagePrerequisitesValid() {
       if(store.getters.vehicle.carId){

src/layouts/vin-lookup/vin-lookup.vue

@@ -180,6 +180,8 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.VINLOOKUP , true);
+
       const zipValidation = await this.validateZip(this.zip);
       if (!zipValidation.data.isServiceable) {
         this.customAlertData.zip = this.zip;

src/mixins/analytics-mixin.js

@@ -1,69 +1,116 @@
 import { storeActions } from "@/constants/store-actions";
-import baseMixin from "@/mixins/base-mixin";
-import { settleAllPromises } from "@/helpers/layout-helper";
 import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
-import { analyticsPageEvents } from "@/constants/analytics-page-events";
+import { experimentSettings } from "@/constants/experiments";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+
+import baseMixin from "@/mixins/base-mixin";
+
+// We will need current page name for multiple methods, define it once to re-use.
+const currentPageName = getPageNameByQueryString();
 
 export default {
   methods: {
-    logEvent(destinationFmgPageValue, pageEvent, category, action, label, value){
+    logEvent(pageEvent, category, action, label, value) {
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
-        pageName: destinationFmgPageValue,
+        pageName: currentPageName,
         sessionId: getSessionIdValue(),
         shouldUseSessionId: true,
       };
 
       if (pageEvent) {
-        payload.pageEvent = {action: '', event: pageEvent};
+        payload.pageEvent = { action: '', event: pageEvent };
       }
 
       if (category) {
-        payload.customEvent = {category: category, action: action, label: label, value: value};
+        payload.customEvent = { category: category, action: action, label: label, value: value };
       }
 
       baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, payload, false);
     },
 
-    pushEventToGA(category, action, label, value, pageName, pushToLogApp) {
+    pushEventToGA(category, action, label, pushToLogApp = false) {
       const eventToBePushed = {
-        'event': 'ga_event',
+        'event': GaEvents.GENERIC_EVENT,
         'category': category,
         'action': action,
         'label': label,
-        'value': value,
-        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
+        'value': undefined,
+        'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
 
       pushToDataLayerIfDefined(eventToBePushed);
-      
+
       if (pushToLogApp) {
-        this.logEvent(pageName, null, category, action, label, value);
+        this.logEvent(undefined, category, action, label, undefined);
       }
+
     },
 
-    pushPageViewToGA(pageName) {
+    pushPageViewToGA() {
       const pageViewEvent = {
-        'event': 'logPageview',
-        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
-        'pageTitle': pageName
+        'event': GaEvents.PAGE_VIEW_EVENT,
+        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
+        'pageTitle': currentPageName
       };
 
       pushToDataLayerIfDefined(pageViewEvent);
-      this.logEvent(pageName, analyticsPageEvents.ENTRY);
+
+      this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
+    },
+
+    pushExperimentsToDataLayer(experiments) {
+      experiments?.data?.forEach(exp => {
+
+        // Set Google Dimension Index based on experiment settings.
+        let googleDimensionIndex = 99;
+
+        if (exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX] !== undefined) {
+          googleDimensionIndex = exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX];
+        }
+
+        // Create object with dimension index and value.
+        const experimentWithDimension = {};
+
+        Object.keys(exp).forEach(key => {
+          experimentWithDimension[`${key}_${googleDimensionIndex}`] = exp[key];
+        });
+
+        // Push to the data layer with the Google Custom Dimension Index.
+        pushToDataLayerIfDefined(experimentWithDimension);
+      });
     }
   },
   computed: {
-    storeActions() {
-      return storeActions;
+    analyticsPageEvents() {
+      return analyticsPageEvents;
     },
-  },
+    GaCategories() {
+      return GaCategories;
+    },
+    GaActions() {
+      return GaActions;
+    },
+    GaLabels() {
+      return GaLabels;
+    }
+  }
 };
 
 function pushToDataLayerIfDefined(data) {
   if (window.dataLayer !== undefined) {
     window.dataLayer.push(data);
   }
+}
+
+function getPageNameByQueryString() {
+  const params = new URLSearchParams(location.search);
+
+  if (params.has(queryStrings.FMG_PAGE)) {
+    return params.get(queryStrings.FMG_PAGE);
+  } else {
+    return '';
+  }
 }

src/mixins/analytics-mixin.spec.js

@@ -9,13 +9,75 @@ describe("analyticsMixin.js", () => {
 
     const mockData = {
       actionList: [{
-          actionName: storeActions.LOG_ACTIVITY
+        actionName: storeActions.LOG_ACTIVITY
       }],
     }
-    var mocks = setupMocksForJsFiles(mockData);
+    const mocks = setupMocksForJsFiles(mockData);
 
     analyticsMixin.methods.logEvent(type, payload);
 
     expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled();
   });
+
+  test("pushEventToGA, should call logEvent too", () => {
+    // Arrange
+    const mockData = {
+      actionList: [{
+        actionName: storeActions.LOG_ACTIVITY
+      }],
+    }
+    const mocks = setupMocksForJsFiles(mockData);
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
+
+    // Assert
+    expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled();
+
+  });
+
+  test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {
+    // Arrange
+    window.dataLayer = [];
+
+    const mockExperimentData = {
+      data: [
+        {
+          settings: {},
+          variationName: 'test',
+          universeName: 'testUniverse'
+        }
+      ]
+    }
+
+    // Act
+    analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
+
+    // Assert
+    expect(window.dataLayer).toEqual([ { settings_99: {}, variationName_99: 'test', universeName_99: 'testUniverse' } ]);
+
+  });
+
+  test("Experiments, should push to dataLayer with custom Google Custom Dimension Index", () => {
+    // Arrange
+    window.dataLayer = [];
+
+    const mockExperimentData = {
+      data: [
+        {
+          settings: { "Google Custom Dimension Index": "5"},
+          variationName: 'test',
+          universeName: 'testUniverse'
+        }
+      ]
+    }
+
+    // Act
+    analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData);
+
+    // Assert
+    expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]);
+
+  });
+
 });

src/mixins/base-mixin.js

@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   data() {
@@ -54,6 +55,9 @@ export default {
     vehicleCategories() {
       return vehicleCategories;
     },
+    queryStrings(){
+      return queryStrings;
+    }
   },
 };
 

src/router/index.js

@@ -5,6 +5,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
+import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -21,6 +22,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
 
+
 const routes = [
   {
     path: "/component-test", // This is a temporary route for testing.
@@ -121,8 +123,11 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
-router.afterEach((to, from) => {
+router.afterEach(async (to, from) => {
+  // Push page view to GA
   analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
+  const assignedExperiments = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
+  analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
 });
 
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
@@ -167,7 +172,7 @@ async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery
     if (getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) {
       await saveOrder();
     }
-    
+
     router.push({
       name: "root",
       query: Object.assign(optionalQuery, {

src/store/index.js

@@ -442,7 +442,16 @@ export const actions = {
     return globalMethods.callHttpClient({
       method: endpoints.LogActivity.method,
       endpoint: endpoints.LogActivity.url,
-      payload: payload
+      payload: payload,
+      logApiCall: false
+    });
+  },
+
+  getExperimentsByUserForGa(context, { userId }){
+    return globalMethods.callHttpClient({
+      method: endpoints.GetExperimentsByUserForGa.method,
+      endpoint: `${endpoints.GetExperimentsByUserForGa.url}/${userId}`,
+      payload: {}
     });
   },
   

src/ux-components/button-main/button-main.spec.js

@@ -1,15 +1,16 @@
 import { shallowMount } from "@vue/test-utils";
 import buttonMain from "./button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 
 describe("buttonMain.vue", () => {
   it("Should return btn-primary class", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         isPrimary: true,
       },
-    });
+    }));
 
     // Assert
     const button = wrapper.find("button");
@@ -20,11 +21,11 @@ describe("buttonMain.vue", () => {
 
   it("Should return aria-disabled state", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         isDisabled: true,
       },
-    });
+    }));
 
     // Assert
     const button = wrapper.find("button");
@@ -35,12 +36,12 @@ describe("buttonMain.vue", () => {
 
   it("Should return loader color", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         loaderColor: "blue",
         loaderEnabled: true,
       },
-    });
+    }));
 
     // Assert
 
@@ -57,12 +58,12 @@ describe("buttonMain.vue", () => {
 
   it("Should return loader position", async () => {
     // Act
-    const wrapper = shallowMount(buttonMain, {
+    const wrapper = shallowMount(buttonMain, setupMocks({
       propsData: {
         loaderPosition: "right",
         loaderEnabled: true,
       },
-    });
+    }));
 
     // Assert
 
@@ -77,3 +78,11 @@ describe("buttonMain.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 });
+
+function setupMocks(mountOptionsMockData = {}) {
+  const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
+  const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+  const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+  return allMountOptions;
+}

src/ux-components/button-main/button-main.vue

@@ -16,6 +16,7 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "buttonMain",
   props: {
@@ -36,6 +37,7 @@ export default {
       this.isLoaderDisplayed = false;
     },
     clicked() {
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.buttonText, true);
       if (!this.isDisabled) {
         this.isLoaderDisplayed = true;
         this.$emit("click-event");

src/ux-components/text-link/text-link.vue

@@ -17,6 +17,7 @@ export default {
   },
   methods: {
     handleClick(event) {
+      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.text, true);
       this.$emit("click-event");
     },
   },