Merge pull request #363 from Safelite/feature/CSR-129

Feature/csr 129

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() {
@@ -11,10 +12,10 @@ export default {
     };
   },
   methods: {
-    setCmsContent(cmsContent){
+    setCmsContent(cmsContent) {
       this.$root.cmsContentByWidget = cmsContent;
     },
-    getCmsContent(widgetName, fieldName){
+    getCmsContent(widgetName, fieldName) {
       return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
     },
     dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
@@ -25,10 +26,10 @@ export default {
 
       return store.dispatch(type, payload);
     },
-    savePageDataToStore(page, data){
+    savePageDataToStore(page, data) {
       store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
     },
-    onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior
+    onSubmit() { }, // DO NOT REMOVE; needed to prevent default form submit behavior
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array
@@ -40,6 +41,28 @@ 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() {
@@ -65,3 +88,9 @@ function encodeUriData(payload) {
     });
   }
 }
+
+function pushToDataLayerIfDefined(data) {
+  if (window.dataLayer !== undefined) {
+    window.dataLayer.push(data);
+  }
+}

src/router/index.js

@@ -4,6 +4,7 @@ import { storeActions } from "@/constants/store-actions";
 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";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -120,6 +121,10 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
+router.afterEach((to, from) => {
+  baseMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
+});
+
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
   navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
 }

vue.release.config.js

@@ -2,6 +2,10 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
 process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
 
+// GA & GTM
+process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";
+process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC = "__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__"
+
 module.exports = {
   outputDir: "dist/fmg",
   publicPath: "/fmg",