diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7fd3a4231..5fbe03ac6 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -36,6 +36,7 @@ data-test="button" :validationRules="validationRules" :class="[suppressError ? 'alertError' : '']" + :valueToLogType="valueToLogType" /> @@ -91,6 +92,7 @@ export default { validationRules: String, suppressError: Boolean, useTextForValue: Boolean, + valueToLogType: String, }, computed: { formattedGroupName() { diff --git a/src/constants/analytics.js b/src/constants/analytics.js index d4ac3d2ea..7ba9ef78c 100644 --- a/src/constants/analytics.js +++ b/src/constants/analytics.js @@ -29,5 +29,8 @@ const GaLabels = { ADDRESS_LOOKUP: 'Address_Look_up', }; +const ValueToLogTypes = { + LAST_5: "last_5", +}; -export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents}; +export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes }; diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 13436be78..67a3dc8ae 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -7,7 +7,7 @@ import { cookieNames } from "@/constants/cookie-names"; import { Form } from "vee-validate"; import baseMixin from "@/mixins/base-mixin"; import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper"; -import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics"; +import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics"; import { queryStrings } from "@/constants/query-strings"; import { routerParams } from "@/router/router-constants/router-params"; @@ -48,6 +48,7 @@ export function getMountOptions(mockData) { mocks.GaActions = GaActions; mocks.GaLabels = GaLabels; mocks.GaEvents = GaEvents; + mocks.ValueToLogTypes = ValueToLogTypes; mocks.queryStrings = queryStrings; mocks.routerParams = routerParams; diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js index 04bcdb366..70f056e3b 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js @@ -1,5 +1,7 @@ import { shallowMount } from "@vue/test-utils"; import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question"; +import { ValueToLogTypes } from "@/constants/analytics"; + describe("addressVehiclesQuestion.vue", () => { @@ -54,9 +56,15 @@ const mockMixin = { return 'FoundWindshieldTestReturn'; } return null; - }), - vehicles: jest.fn(() => { - return [{ vehicle: "test" }]; - }) - } + }), + vehicles: jest.fn(() => { + return [{ vehicle: "test" }]; + }) + }, + computed: { + ValueToLogTypes() { + return ValueToLogTypes; + } + }, + } diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 40ec2336b..4bdaa8887 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue @@ -8,6 +8,7 @@ v-model="selectedVehicleVinAsArray" isRequired :validation-rules="validationRules" + :valueToLogType="ValueToLogTypes.LAST_5" /> { test("logPageView: calls dispatch with type and payload", () => { @@ -39,21 +39,71 @@ describe("analyticsMixin.js", () => { expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); }); - test("pushEventToGA, should call logEvent too", () => { + test("pushEventToGA, should call dataLayer push and logCustomEvent too", () => { // Arrange + window.dataLayer = []; const mockData = { actionList: [{ actionName: storeActions.LOG_CUSTOM_EVENT }], } const mocks = setupMocksForJsFiles(mockData); + var mockDataLayer = []; + mockDataLayer.push({ + event: 'event', + category: 'category', + action: 'action', + label: 'label', + value: undefined, + path: '/fmg/?fmgPage=' + }); // Act analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true); // Assert + expect(mockDataLayer).toEqual(expect.arrayContaining(window.dataLayer)); expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); + }); + test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 only logs last 5 of label", () => { + // Arrange + window.dataLayer = []; + var expectedDataLayer = []; + expectedDataLayer.push({ + event: 'event', + category: 'category', + action: 'action', + label: '33333', + value: undefined, + path: '/fmg/?fmgPage=' + }); + + // Act + analyticsMixin.methods.pushEventToGA('category', 'action', '1111122222333333', false, ValueToLogTypes.LAST_5); + + // Assert + expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer)); + }); + + test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 logs only the last 3 characters for a 3 character string", () => { + // Arrange + window.dataLayer = []; + var expectedDataLayer = []; + expectedDataLayer.push({ + event: 'event', + category: 'category', + action: 'action', + label: '111', + value: undefined, + path: '/fmg/?fmgPage=' + }); + + // Act + analyticsMixin.methods.pushEventToGA('category', 'action', '111', false, ValueToLogTypes.LAST_5); + + // Assert + expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer)); }); test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 4e0def451..83c9b0fd1 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -78,6 +78,7 @@ export default { validationRules: String, selectedValues: [Array, String], hasError: Boolean, + valueToLogType: String, }, data() { return { @@ -116,7 +117,7 @@ export default { this.handleCheckChange(); } - this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true); + this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType); }, handleCheckChange() { const emitEvent = { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 80e8c6043..b9f46dffa 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -74,10 +74,12 @@ export default { // Field initial value type: [String, Number], default: "", - }, + }, + validationRules: String, selectedValues: [Array, String], hasError: Boolean, + valueToLogType: String, }, data() { return { @@ -111,7 +113,7 @@ export default { this.displayLoader(); this.handleCheckChange(); } - this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true); + this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType); }, handleCheckChange() { const emitEvent = { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index b485b78b3..c0c2a71c9 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -88,6 +88,7 @@ export default { validationRules: String, selectedValues: [Array, String], hasError: Boolean, + valueToLogType: String, }, data() { return { @@ -146,7 +147,7 @@ export default { this.handleCheckChange(); } - this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true); + this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType); }, handleCheckChange() { const emitEvent = { diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js index f97700b0e..ebe3ef53a 100644 --- a/src/ux-components/radio/radio.spec.js +++ b/src/ux-components/radio/radio.spec.js @@ -1,6 +1,7 @@ import { shallowMount } from "@vue/test-utils"; import radio from "./radio"; import { nextTick } from "vue"; +import { GaActions } from "@/constants/analytics"; describe("radio.vue", () => { it("Should return group name", async () => { @@ -64,6 +65,13 @@ describe("radio.vue", () => { it("Should emit button value on click", async () => { // Act const wrapper = shallowMount(radio, { + global: { + mocks: { + '$route': { query: { fmgPage: 'page-name' } }, + GaActions: GaActions, + pushEventToGA: jest.fn(), + } + }, propsData: { buttonLabel: "Windshield", value: "List Card Checkbox", @@ -77,12 +85,20 @@ describe("radio.vue", () => { }); wrapper.vm.handleCheckChange(); // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]); + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);; + expect(wrapper.vm.pushEventToGA).toHaveBeenCalled(); }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { // Act const wrapper = shallowMount(radio, { + global: { + mocks: { + '$route': { query: { fmgPage: 'page-name' } }, + GaActions: GaActions, + pushEventToGA: jest.fn(), + } + }, propsData: { buttonLabel: "Windshield", buttonID: "List Card Checkbox", diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 6daf6b972..be8441415 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -25,6 +25,8 @@