Merge pull request #506 from Safelite/feature/CSR-216

Feature/csr 216

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

@@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
-import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "buttonQuestion",
@@ -135,8 +134,6 @@ export default {
     },
     handleCheckedChanged(val) {
 
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
-
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;

src/mixins/analytics-mixin.js

@@ -9,12 +9,18 @@ import baseMixin from "@/mixins/base-mixin";
 export default {
   methods: {
     logPageView(pageEvent) {
+      // if the user does not have a session id from the content site, do not log.
+      const sid = getSessionIdValue();
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         action: '', 
         event: pageEvent,
         shouldUseSessionId: true,
@@ -24,12 +30,18 @@ export default {
     },
 
     logCustomEvent(category, action, label, value) {
+      // if the user does not have a session id from the content site, do not log.
+      const sid = getSessionIdValue();
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         category: category, 
         action: action,
         label: label,

src/mixins/analytics-mixin.spec.js

@@ -1,5 +1,5 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
-import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
+import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 
 describe("analyticsMixin.js", () => {
@@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
     }
     const mocks = setupMocksForJsFiles(mockData);
 
+    const testCookieValue = {
+      sid: '10000000-0000-0000-0000-000000000001'
+    }
+
+    setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
+
     analyticsMixin.methods.logPageView(type, payload);
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button-horizontal.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButtonHorizontal",
@@ -120,6 +121,7 @@ export default {
           this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-button/list-button.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButton from "./list-button";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -109,6 +117,13 @@ describe("list-button.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -128,6 +143,13 @@ describe("list-button.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,

src/ux-components/list-button/list-button.vue

@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButton",
@@ -120,6 +121,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-card/list-card.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listCard from "./list-card";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-card.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -292,8 +293,16 @@ describe("list-card.vue", () => {
   });
 
   it("Should run handleChange if triggerButton is triggered", async () => {
+
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: false,
       },
@@ -312,6 +321,13 @@ describe("list-card.vue", () => {
   it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },

src/ux-components/list-card/list-card.vue

@@ -61,6 +61,7 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listCard",
@@ -137,6 +138,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {