Merge pull request #367 from Safelite/feature/CSR-18

Feature/csr 18

src/main.js

@@ -5,6 +5,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
+import analyticsMixin from "@/mixins/analytics-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 
 // Vue App Setup
@@ -15,5 +16,6 @@ vueApp.use(store);
 vueApp.use(LoadScript);
 vueApp.use(Maska);
 vueApp.mixin(baseMixin);
+vueApp.mixin(analyticsMixin);
 
 vueApp.mount("#app");

src/mixins/analytics-mixin.js

@@ -0,0 +1,66 @@
+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";
+
+export default {
+  methods: {
+    async logPageEvent(destinationFmgPageValue, pageEvent){
+      const logActivityPromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, 
+        {
+          userId: getDeviceIdValue(),
+          sessionKey: getSessionKeyValue(),
+          pageName: destinationFmgPageValue,
+          sessionId: getSessionIdValue(),
+          shouldUseSessionId: true,
+          pageEvent: {
+            action: '',
+            event: pageEvent,
+          }
+        }, false);
+    
+        // Settle promises and get results
+        const promiseResultMap = [
+          {
+            resultKey: "logActivity",
+            promise: logActivityPromise,
+          },
+        ];
+    
+        let resultMap = await settleAllPromises(promiseResultMap);
+    },
+
+    pushEventToGA(category, action, label, value, pageName) {
+      const eventToBePushed = {
+        'event': 'ga_event',
+        'category': category,
+        'action': action,
+        'label': label,
+        'value': value,
+        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
+      }
+      pushToDataLayerIfDefined(eventToBePushed);
+    },
+
+    pushPageViewToGA(pageName) {
+      const pageViewEvent = {
+        'event': 'logPageview',
+        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
+        'pageTitle': pageName
+      };
+      pushToDataLayerIfDefined(pageViewEvent);
+    }
+  },
+  computed: {
+    storeActions() {
+      return storeActions;
+    },
+  },
+};
+
+function pushToDataLayerIfDefined(data) {
+  if (window.dataLayer !== undefined) {
+    window.dataLayer.push(data);
+  }
+}

src/mixins/analytics-mixin.spec.js

@@ -0,0 +1,21 @@
+import analyticsMixin from "@/mixins/analytics-mixin";
+import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
+
+describe("analyticsMixin.js", () => {
+  test("logPageEvent: calls dispatch with type and payload", () => {
+    const type = "";
+    const payload = {};
+
+    const mockData = {
+      actionList: [{
+          actionName: storeActions.LOG_ACTIVITY
+      }],
+    }
+    var mocks = setupMocksForJsFiles(mockData);
+
+    analyticsMixin.methods.logPageEvent(type, payload);
+
+    expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled();
+  });
+});

src/mixins/base-mixin.js

@@ -3,7 +3,6 @@ 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() {
@@ -41,28 +40,6 @@ export default {
         el && el.focus();
       }
     },
-
-    pushEventToGA(category, action, label, value, pageName) {
-      const eventToBePushed = {
-        'event': 'ga_event',
-        'category': category,
-        'action': action,
-        'label': label,
-        'value': value,
-        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
-      }
-      pushToDataLayerIfDefined(eventToBePushed);
-    },
-
-    pushPageViewToGA(pageName) {
-      const pageViewEvent = {
-        'event': 'logPageview',
-        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
-        'pageTitle': pageName
-      };
-      pushToDataLayerIfDefined(pageViewEvent);
-    }
-
   },
   computed: {
     storeActions() {
@@ -88,9 +65,3 @@ function encodeUriData(payload) {
     });
   }
 }
-
-function pushToDataLayerIfDefined(data) {
-  if (window.dataLayer !== undefined) {
-    window.dataLayer.push(data);
-  }
-}

src/router/index.js

@@ -15,12 +15,11 @@ import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpe
 import baseMixin from "@/mixins/base-mixin";
 import eventBus from "@/helpers/event-bus/event-bus";
 import store from "@/store";
+import analyticsMixin from "@/mixins/analytics-mixin";
 
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
-import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
 import { analyticsPageEvents } from "./router-constants/analytics-page-events";
 
 const routes = [
@@ -79,7 +78,6 @@ const routes = [
             await GoToFunnelStartOn404(next);
           }
 
-          // logPageEvent(to.query.fmgPage, analyticsPageEvents.ENTRY);
           return next({ name: to.query.fmgPage, query: to.query, params: to.params });
         }
 
@@ -101,8 +99,6 @@ const routes = [
           await GoToFunnelStartOn404(next);
         }
 
-        // logPageEvent(to.query.fmgPage, analyticsPageEvents.ENTRY);
-
         // Assign current query string parameters, as well as our fmgPage one.
         next({
           name: routeData[0].name,
@@ -127,8 +123,8 @@ const router = createRouter({
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
 router.afterEach((to, from) => {
-  baseMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
-  logPageEvent(to.query[queryStrings.FMG_PAGE], analyticsPageEvents.ENTRY);
+  analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
+  analyticsMixin.methods.logPageEvent(to.query[queryStrings.FMG_PAGE], analyticsPageEvents.ENTRY);
 });
 
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
@@ -275,29 +271,4 @@ function resetDependentState(component) {
   return component.default.methods.resetDependentState();
 }
 
-async function logPageEvent(destinationFmgPageValue, pageEvent){
-  const logActivityPromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, 
-    {
-      userId: getDeviceIdValue(),
-      sessionKey: getSessionKeyValue(),
-      pageName: destinationFmgPageValue,
-      sessionId: getSessionIdValue(),
-      shouldUseSessionId: true,
-      pageEvent: {
-        action: '',
-        event: pageEvent,
-      }
-    }, false);
-
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "logActivity",
-        promise: logActivityPromise,
-      },
-    ];
-
-    let resultMap = await settleAllPromises(promiseResultMap);
-}
-
 export default router;