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..5400c7b7e 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..368625e7b 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, LabelToLogTypes } 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.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 40ec2336b..a96de89e9 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="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.vue b/src/ux-components/radio/radio.vue index 6daf6b972..78df075df 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -25,6 +25,8 @@