Merge pull request #1075 from Safelite/feature/CSR-1339

CSR-1339

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

@@ -79,6 +79,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 import { ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -119,6 +120,10 @@ export default {
         useTextForValue: Boolean,
         valueToLogType: String,
         additionalButtonStyling: String,
+        logDisplayedValuesEvent: {
+            type: Boolean,
+            default: false,
+        },
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -130,6 +135,26 @@ export default {
             lastValuePushedToGa: null,
         };
     },
+    watch: {
+        answers() {
+            //once we get the answers to display from parent, see if we need a GA event to log what we showed
+            if (this.logDisplayedValuesEvent && this.answers.length > 0) {
+                var eventLabel = "";
+                //build comma separated list of all items in button list that we are going to display on page
+                this.answers.forEach((item) => {
+                    eventLabel += item.Name + ",";
+                });
+
+                eventLabel = eventLabel.slice(0, -1); //remove the last comma
+                this.pushEventToGA(
+                    this.$route.query[queryStrings.FMG_PAGE],
+                    this.GaActions.DISPLAYED,
+                    eventLabel,
+                    true
+                );
+            }
+        },
+    },
     computed: {
         getFieldSetClasses() {
             if (this.isOverflowScrollable) {

src/constants/analytics.js

@@ -19,6 +19,7 @@ const GaActions = {
     CLICKED: "Clicked",
     VIF: "vif",
     SUBMITTED: "Submitted",
+    DISPLAYED: "Displayed",
 };
 
 const GaLabels = {

src/layouts/estimate/estimate.vue

@@ -18,7 +18,8 @@
                         buttonTypeString="listButton"
                         v-model="selectedVinLookupMethod"
                         isRequired
-                        validationRules="option-required" />
+                        validationRules="option-required"
+                        :logDisplayedValuesEvent="true" />
                 </div>
                 <div v-else>
                     <alert

src/mixins/analytics-mixin.js

@@ -146,18 +146,18 @@ export default {
                 false
             );
 
-            if (response.data) {
-                if (response.data.sessionKey && skey === 0) {
+            if (response?.data) {
+                if (response?.data.sessionKey && skey === 0) {
                     setCookieProperties(
-                        { [cookieNames.SESSION_KEY]: response.data.sessionKey },
+                        { [cookieNames.SESSION_KEY]: response?.data.sessionKey },
                         {
                             useDefaultFunnelCookieAttributes: false,
                         }
                     );
                 }
-                if (response.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
+                if (response?.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
                     setCookieProperties(
-                        { [cookieNames.SESSION_ID]: response.data.sessionId },
+                        { [cookieNames.SESSION_ID]: response?.data.sessionId },
                         {
                             maxAge: 60 * 30, // 30 minutes
                         }

src/store/index.js

@@ -725,12 +725,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogPageView.method,
-            endpoint: endpoints.LogPageView.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogPageView.method,
+                endpoint: endpoints.LogPageView.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     logCustomEvent(
         context,
@@ -761,12 +770,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogCustomEvent.method,
-            endpoint: endpoints.LogCustomEvent.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogCustomEvent.method,
+                endpoint: endpoints.LogCustomEvent.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     initializeSession(context, { userId, sessionId, userAgent, referrer }) {
         var payload = {
@@ -780,12 +798,21 @@ export const actions = {
             referrer: referrer,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.InitializeSession.method,
-            endpoint: endpoints.InitializeSession.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.InitializeSession.method,
+                endpoint: endpoints.InitializeSession.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
 
     // Misc Actions