CSR-1339

Add GA event to show what button options displayed

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/store/index.js

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