CASH-609 - Add dataevents for Sierra/Salesforce chat

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -9,9 +9,11 @@ import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
 import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
 import { applicationConfig } from "@/constants/application-config";
 import { webchatHelper } from "@/helpers/webchat-helper";
+import analyticsMixin from "@/mixins/analytics-mixin";
 
 export default {
     name: "salesforceWebchat",
+    mixins: [analyticsMixin],
     data() {
         return {
             isAgentAvailable: false,
@@ -94,6 +96,9 @@ export default {
             window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
             window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
             window.embedded_svc.settings.displayHelpButton = false;
+            window.embedded_svc.addEventHandler("onChatEstablished", () => {
+                this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
+            });
         },
         finishedLoadingCallback(data) {
             this.isAgentAvailable = data.isAgentAvailable;

src/digital-components/sierra-webchat/sierra-webchat.spec.js

@@ -1,11 +1,28 @@
 import { shallowMount } from "@vue/test-utils";
-import SierraWebchat from "./sierra-webchat.vue";
+import sierraWebchat from "./sierra-webchat.vue";
+
+jest.mock("@/mixins/analytics-mixin");
+// Mock router for analytics-mixin
+jest.mock("@/router", () => ({
+    currentRoute: {
+        value: {
+            name: "mockedPageName",
+        },
+    },
+    default: {
+        currentRoute: {
+            value: {
+                name: "mockedPageName",
+            },
+        },
+    },
+}));
 
 describe("sierraWebchat.vue", () => {
     let wrapper;
 
     beforeEach(() => {
-        wrapper = shallowMount(SierraWebchat);
+        wrapper = shallowMount(sierraWebchat);
         // Mock global window properties
         window.sierraChat = { openChatModal: jest.fn(), closeChatModal: jest.fn() };
         window.sierra = undefined;

src/digital-components/sierra-webchat/sierra-webchat.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script>
+import analyticsMixin from "@/mixins/analytics-mixin";
 export default {
     name: "sierraWebchat",
+    mixins: [analyticsMixin],
     methods: {
         openSierraChatModal() {
             const sierra = window.sierraChat || window.sierra || window.SierraChat;
@@ -18,6 +20,7 @@ export default {
                 launchLink.click();
                 document.body.removeChild(launchLink);
             }
+            this.pushEventForChatsToGA("support_chat", "chat_opened", "Scarlett", true);
         },
         createSierraConfig() {
             return {

src/mixins/analytics-mixin.js

@@ -30,6 +30,7 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
 import { routeData } from "@/router/constants/routes";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { Variables } from "../constants/analytics";
+import router from "@/router";
 
 export default {
     methods: {
@@ -100,7 +101,14 @@ export default {
             );
         },
 
-        async pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
+        async pushEventToGA(
+            category,
+            action,
+            label,
+            pushToLogApp = false,
+            valueToLogType = null,
+            value = null
+        ) {
             const currentPageName = getPageNameByQueryString();
             const labelToLog = getValueToLog(label, valueToLogType);
 
@@ -109,8 +117,8 @@ export default {
                 category: category,
                 action: action,
                 label: labelToLog,
-                value: undefined,
-                path: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
+                value: value ?? undefined,
+                path: `/fmg/${currentPageName}`,
             };
 
             pushToDataLayerIfDefined(eventToBePushed);
@@ -120,6 +128,12 @@ export default {
             }
         },
 
+        async pushEventForChatsToGA(category, action, label, pushToLogApp = false) {
+            const currentPageName = getPageNameByQueryString();
+            const value = `2.0_${currentPageName}`;
+            await this.pushEventToGA(category, action, label, pushToLogApp, null, value);
+        },
+
         async pushVariableToDataLayer(data) {
             pushToDataLayerIfDefined(data);
         },
@@ -128,7 +142,7 @@ export default {
             const currentPageName = getPageNameByQueryString();
             const pageViewEvent = {
                 event: GaEvents.PAGE_VIEW_EVENT,
-                pagePath: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
+                pagePath: `/fmg/${currentPageName}`,
                 pageTitle: currentPageName,
             };
 
@@ -791,12 +805,13 @@ function pushToDataLayerIfDefined(data) {
 }
 
 function getPageNameByQueryString() {
-    const params = new URLSearchParams(location.search);
-
-    if (params.has(queryStrings.FMG_PAGE)) {
-        return params.get(queryStrings.FMG_PAGE);
-    } else {
-        return "";
+    if (
+        router &&
+        router.currentRoute &&
+        router.currentRoute.value &&
+        router.currentRoute.value.name
+    ) {
+        return router.currentRoute.value.name;
     }
 }
 

src/mixins/analytics-mixin.spec.js

@@ -151,7 +151,7 @@ describe("analyticsMixin.js", () => {
             action: "action",
             label: "label",
             value: undefined,
-            path: "/fmg/?fmgPage=",
+            path: "/fmg/mockedPageName",
         });
 
         // Act
@@ -172,7 +172,7 @@ describe("analyticsMixin.js", () => {
             action: "action",
             label: "33333",
             value: undefined,
-            path: "/fmg/?fmgPage=",
+            path: "/fmg/mockedPageName",
         });
 
         const mockData = {
@@ -211,7 +211,7 @@ describe("analyticsMixin.js", () => {
             action: "action",
             label: "111",
             value: undefined,
-            path: "/fmg/?fmgPage=",
+            path: "/fmg/mockedPageName",
         });
 
         const mockData = {
@@ -1048,3 +1048,11 @@ describe("analyticsMixin.js", () => {
         });
     });
 });
+
+jest.mock("@/router", () => ({
+    currentRoute: {
+        value: {
+            name: "mockedPageName",
+        },
+    },
+}));

src/store/index.js

@@ -1499,7 +1499,7 @@ export const actions = {
             parentAccountNumber,
         }
     ) {
-        if (!pageName) {
+        if (!pageName || !category) {
             return;
         }
 

src/store/store.spec.js

@@ -930,6 +930,7 @@ describe("Actions", () => {
             pageName: "pageName",
             sessionId: "sessionId",
             customEvent: customEvent,
+            category: "category",
             shouldUseSessionId: false,
         });
         expect(response).toEqual({});