From fa21cb1a7cd83d14278258a9260b140c32bd6030 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 21 Apr 2026 15:08:31 -0400 Subject: [PATCH 1/6] INSR-8884: Some payment-method events --- src/constants/analytics.js | 8 +++++- .../cart-dropdown/cart-dropdown.vue | 11 ++++++-- src/layouts/payment-method/payment-method.vue | 25 +++++++++++++++++++ .../service-package-radio.vue | 3 ++- .../service-packages/service-packages.vue | 11 ++++++-- 5 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/constants/analytics.js b/src/constants/analytics.js index dc023b15..f81b19bc 100644 --- a/src/constants/analytics.js +++ b/src/constants/analytics.js @@ -57,4 +57,10 @@ const analyticsServicePackageMap = new Map([ [packageNames.TIER_THREE, 'essentialsplus'] ]); -export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes, analyticsPaymentTypeMap, analyticsServicePackageMap }; +const analyticsVapsModalMap = new Map([ + ['FrontWiperModal', 'wiper'], + ['RearWiperModal', 'wiper'], + ['RainDefenseModal', 'raindefense'], +]); + +export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes, analyticsPaymentTypeMap, analyticsServicePackageMap, analyticsVapsModalMap }; diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index a24586c7..3bbfacb4 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -42,7 +42,7 @@ linkType="text" text="Remove" href="javascript:void(0)" - @clickEvent="removeVap(item.partType)"> + @clickEvent="removeVap(item.partType, item?.name ?? '')"> @@ -367,8 +367,15 @@ export default { ?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? []; return this.getCartItem(label, lineItems, cartItemType.VAP, partType); }, - removeVap(partType) { + removeVap(partType, partName) { const newVaps = useMainStore().lineItems.vaps?.filter((vap) => vap?.partType !== partType) ?? []; + if (partType === partTypeStrings.FRONT_WIPER) { + this.pushEventToGA('Removed From Cart', 'Product - Front Wiper', 'Safelite advanced', true); + } else if (partType === partTypeStrings.REAR_WIPER) { + this.pushEventToGA('Removed From Cart', 'Product - Rear Wiper', 'Safelite advanced', true); + } else { + this.pushEventToGA('Removed From Cart', `Product - Other - ${partName}`, 'none', true); + } useMainStore().updateVaps(newVaps); useMainStore().updateServicePackage(null); }, diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 0c3d0c7d..af37a518 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -156,6 +156,7 @@ import { getCartTotal } from '@/helpers/cart-helper'; import { formatAmountInDollars } from '@/helpers/text-helper'; import widgetFields from '@/constants/cms-widget-fields'; import MaskaFormattedMasks from '@/constants/maska-masks'; +import { containsRecalParts } from '@/helpers/recal-helper'; export default { name: 'payment-method', @@ -197,6 +198,9 @@ export default { vm.updateFooterButtonText(vm.customCallToActionButtonCopy); }); }, + mounted() { + this.handleAnalyticsEvents(); + }, data() { return { paymentMethod: null, @@ -499,6 +503,27 @@ export default { }, closeContactDetailsWithoutSaving() { this.smsOptIn = 'No'; + }, + handleAnalyticsEvents() { + const mobileOrInshop = this.mainStore.isMobileAppointment ? 'mobile' : 'in_shop'; + const verifiedOrNotVerified = this.mainStore.isVerified ? 'verified' : 'not_verified'; + const repairOrReplace = this.mainStore.isRepair ? 'repair' : 'replace'; + this.pushEventToGA('order_summary', 'safelite', `${mobileOrInshop}_${repairOrReplace}_${verifiedOrNotVerified}`, true); + + if (containsRecalParts(this.mainStore.lineItems)) { + let coverageType = ''; + if (this.mainStore.isITAC) { + coverageType = 'ITAC'; + } else if (this.mainStore.isNoComp) { + coverageType = 'no_comp'; + } else if (this.mainStore.isVerified) { + coverageType = 'verified'; + } else { + coverageType = 'unverified'; + } + const recalibrationType = this.mainStore.lineItems.glassParts?.find((part) => part.requiresRecalibration)?.recalibrationType; + this.pushEventToGA(`recalibration_added_${coverageType}`, this.mainStore.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true); + } } } }; diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue index 5951d611..ccfa4629 100644 --- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue +++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue @@ -115,7 +115,8 @@ export default { }, textLinkEmit(copy) { this.$parent.$emit('link-event', { - args: getRouterLinkRouteFromCopy(copy) + route: getRouterLinkRouteFromCopy(copy), + packageName: this.value }); } } diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue index 6c95e13b..f495d7ae 100644 --- a/src/layouts/service-packages/service-packages.vue +++ b/src/layouts/service-packages/service-packages.vue @@ -80,6 +80,7 @@ import servicePackageQuestion from '@/layouts/service-packages/service-package-q import issPageValues from '@/router/router-constants/issPage-values'; import bailoutMessage from '@/constants/bailoutMessage'; import buttonMain from '@/ux-components/button-main/button-main.vue'; +import { analyticsServicePackageMap, analyticsVapsModalMap } from '@/constants/analytics'; const store = useMainStore(); @@ -204,8 +205,11 @@ export default { } }, methods: { - openModalAction(modalName) { - this.$refs[modalName.args].openModal(); + openModalAction(eventData) { + this.$refs[eventData.route].openModal(); + const packageName = analyticsServicePackageMap.get(eventData.packageName); + const modalName = analyticsVapsModalMap.get(eventData.route); + this.pushEventToGA('service_package', 'modal_displayed', `${packageName}_${modalName}_modal_displayed`, true); }, arePagePrerequisitesValid() { return ( @@ -235,6 +239,9 @@ export default { } store.updateVaps(this.selectedVaps); store.updateServicePackage(this.selectedPackageTier); + + const packageName = analyticsServicePackageMap.get(this.selectedPackageTier); + this.pushEventToGA('service_package', 'attached_a_package', packageName, true); const scenario = store.isMobileAppointment ? this.navigationScenarios.CLICKED_FORWARD_MOBILE From 9a7b452b9827f33fb46d5e13850e136de530688d Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 21 Apr 2026 16:53:34 -0400 Subject: [PATCH 2/6] INSR-8884: More payment-method events --- .../payment-method-question.vue | 2 + src/layouts/payment-method/payment-method.vue | 37 ++++++++++++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index 33d82adf..38919f7b 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -20,6 +20,7 @@ import buttonQuestion from '@/digital-components/button-question/button-question import widgetFields from '@/constants/cms-widget-fields.js'; import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue'; import { markRaw } from 'vue'; +import { analyticsPaymentTypeMap } from '@/constants/analytics'; export default { name: 'payment-method-question', @@ -43,6 +44,7 @@ export default { return this.modelValue; }, set(selectedMethod) { + this.pushEventToGA('submit_order', 'payment_type_selected', analyticsPaymentTypeMap.get(selectedMethod), true); this.$emit('update:modelValue', selectedMethod); } }, diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index af37a518..b4599eb5 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -157,6 +157,7 @@ import { formatAmountInDollars } from '@/helpers/text-helper'; import widgetFields from '@/constants/cms-widget-fields'; import MaskaFormattedMasks from '@/constants/maska-masks'; import { containsRecalParts } from '@/helpers/recal-helper'; +import coverageType from '@/constants/coverage-type'; export default { name: 'payment-method', @@ -199,7 +200,7 @@ export default { }); }, mounted() { - this.handleAnalyticsEvents(); + this.handleAnalyticsEventsOnMounted(); }, data() { return { @@ -415,6 +416,7 @@ export default { this.$refs.siteFooter.updateButtonText(newValue); }, async forwardButtonAction() { + this.handleAnalyticsEventsOnForwardButtonAction(); this.mainStore.savePaymentMethodChoice(this.paymentMethod); this.savePageDataToStore(issPageValues.PAYMENT_METHOD, { smsOptIn: this.smsOptIn }); if (!this.hideSMSOptIn) { @@ -464,6 +466,7 @@ export default { handleEditClicked(section) { switch (section) { case 'location': + this.pushEventToGA('order_summary', 'change', 'location', true); const scenario = this.mainStore.isMobileAppointment ? this.navigationScenarios.EDIT_SERVICE_LOCATION_MOBILE : this.navigationScenarios.EDIT_SERVICE_LOCATION_INSHOP; @@ -473,6 +476,7 @@ export default { ); break; case 'schedule': + this.pushEventToGA('order_summary', 'change', 'time', true); this.$router.navigateWithSpinner( this.navigationScenarios.EDIT_SCHEDULE, this.$route @@ -504,7 +508,7 @@ export default { closeContactDetailsWithoutSaving() { this.smsOptIn = 'No'; }, - handleAnalyticsEvents() { + handleAnalyticsEventsOnMounted() { const mobileOrInshop = this.mainStore.isMobileAppointment ? 'mobile' : 'in_shop'; const verifiedOrNotVerified = this.mainStore.isVerified ? 'verified' : 'not_verified'; const repairOrReplace = this.mainStore.isRepair ? 'repair' : 'replace'; @@ -524,6 +528,35 @@ export default { const recalibrationType = this.mainStore.lineItems.glassParts?.find((part) => part.requiresRecalibration)?.recalibrationType; this.pushEventToGA(`recalibration_added_${coverageType}`, this.mainStore.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true); } + + const hasFrontWiper = this.mainStore.lineItems.vaps.some((part) => part.partType === partTypeStrings.FRONT_WIPER); + const hasRearWiper = this.mainStore.lineItems.vaps.some((part) => part.partType === partTypeStrings.REAR_WIPER); + const wiperEventLabel = `front_${hasFrontWiper ? 'advanced' : 'none'}_rear_${hasRearWiper ? 'advanced' : 'none'}`; + this.pushEventToGA('wipers', 'attached_to_order', wiperEventLabel, true); + }, + handleAnalyticsEventsOnForwardButtonAction() { + this.pushEventToGA('order_summary', 'edit', 'contact_details', true); + let action; + let label; + switch (this.mainStore.coverageType) { + case coverageType.Deductible: + action = 'Covered'; + label = this.mainStore.currentDeductible; + break; + case coverageType.ITAC: + action = 'ITAC'; + label = this.mainStore.currentDeductible + "_" + getCartTotal(this.mainStore.order); + break; + case coverageType.NO_COMP: + action = 'NOCOMP'; + label = 'Unverified'; + break; + case coverageType.NONE: + action = 'Unverified'; + label = 'Unverified'; + break; + } + this.pushEventToGA('Submit Appointment', action, label, true, null, 1); } } }; From 746b45e37248e848bc691be1e2afa102b3088e50 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 21 Apr 2026 17:24:21 -0400 Subject: [PATCH 3/6] INSR-8884: Better null/undefined handling for analytics events --- .../payment-method-question.vue | 3 ++- src/layouts/payment-method/payment-method.vue | 21 ++++++++++--------- .../service-packages/service-packages.vue | 8 +++---- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index 38919f7b..87980750 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -44,7 +44,8 @@ export default { return this.modelValue; }, set(selectedMethod) { - this.pushEventToGA('submit_order', 'payment_type_selected', analyticsPaymentTypeMap.get(selectedMethod), true); + const paymentMethod = analyticsPaymentTypeMap.get(this.piaType) ?? 'UNKNOWN'; + this.pushEventToGA('submit_order', 'payment_type_selected', paymentMethod, true); this.$emit('update:modelValue', selectedMethod); } }, diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index b4599eb5..70196840 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -158,6 +158,7 @@ import widgetFields from '@/constants/cms-widget-fields'; import MaskaFormattedMasks from '@/constants/maska-masks'; import { containsRecalParts } from '@/helpers/recal-helper'; import coverageType from '@/constants/coverage-type'; +import partTypeStrings from '@/constants/part-type-strings'; export default { name: 'payment-method', @@ -511,26 +512,26 @@ export default { handleAnalyticsEventsOnMounted() { const mobileOrInshop = this.mainStore.isMobileAppointment ? 'mobile' : 'in_shop'; const verifiedOrNotVerified = this.mainStore.isVerified ? 'verified' : 'not_verified'; - const repairOrReplace = this.mainStore.isRepair ? 'repair' : 'replace'; + const repairOrReplace = this.mainStore.damage.isRepair ? 'repair' : 'replace'; this.pushEventToGA('order_summary', 'safelite', `${mobileOrInshop}_${repairOrReplace}_${verifiedOrNotVerified}`, true); if (containsRecalParts(this.mainStore.lineItems)) { - let coverageType = ''; + let coverageTypeForLabel = ''; if (this.mainStore.isITAC) { - coverageType = 'ITAC'; + coverageTypeForLabel = 'ITAC'; } else if (this.mainStore.isNoComp) { - coverageType = 'no_comp'; + coverageTypeForLabel = 'no_comp'; } else if (this.mainStore.isVerified) { - coverageType = 'verified'; + coverageTypeForLabel = 'verified'; } else { - coverageType = 'unverified'; + coverageTypeForLabel = 'unverified'; } const recalibrationType = this.mainStore.lineItems.glassParts?.find((part) => part.requiresRecalibration)?.recalibrationType; - this.pushEventToGA(`recalibration_added_${coverageType}`, this.mainStore.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true); + this.pushEventToGA(`recalibration_added_${coverageTypeForLabel}`, this.mainStore.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true); } - const hasFrontWiper = this.mainStore.lineItems.vaps.some((part) => part.partType === partTypeStrings.FRONT_WIPER); - const hasRearWiper = this.mainStore.lineItems.vaps.some((part) => part.partType === partTypeStrings.REAR_WIPER); + const hasFrontWiper = this.mainStore.lineItems?.vaps?.some((part) => part.partType === partTypeStrings.FRONT_WIPER); + const hasRearWiper = this.mainStore.lineItems?.vaps?.some((part) => part.partType === partTypeStrings.REAR_WIPER); const wiperEventLabel = `front_${hasFrontWiper ? 'advanced' : 'none'}_rear_${hasRearWiper ? 'advanced' : 'none'}`; this.pushEventToGA('wipers', 'attached_to_order', wiperEventLabel, true); }, @@ -538,7 +539,7 @@ export default { this.pushEventToGA('order_summary', 'edit', 'contact_details', true); let action; let label; - switch (this.mainStore.coverageType) { + switch (this.mainStore.insuranceCoverage.coverageType) { case coverageType.Deductible: action = 'Covered'; label = this.mainStore.currentDeductible; diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue index f495d7ae..12a05e8e 100644 --- a/src/layouts/service-packages/service-packages.vue +++ b/src/layouts/service-packages/service-packages.vue @@ -207,8 +207,8 @@ export default { methods: { openModalAction(eventData) { this.$refs[eventData.route].openModal(); - const packageName = analyticsServicePackageMap.get(eventData.packageName); - const modalName = analyticsVapsModalMap.get(eventData.route); + const packageName = analyticsServicePackageMap.get(eventData.packageName) ?? 'UNKNOWN_PACKAGE'; + const modalName = analyticsVapsModalMap.get(eventData.route) ?? 'UNKNOWN_MODAL'; this.pushEventToGA('service_package', 'modal_displayed', `${packageName}_${modalName}_modal_displayed`, true); }, arePagePrerequisitesValid() { @@ -239,8 +239,8 @@ export default { } store.updateVaps(this.selectedVaps); store.updateServicePackage(this.selectedPackageTier); - - const packageName = analyticsServicePackageMap.get(this.selectedPackageTier); + + const packageName = analyticsServicePackageMap.get(this.selectedPackageTier) ?? 'UNKNOWN_PACKAGE'; this.pushEventToGA('service_package', 'attached_a_package', packageName, true); const scenario = store.isMobileAppointment From 98117c328dbeb42a05f60001aade7929c9625102 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 21 Apr 2026 17:32:05 -0400 Subject: [PATCH 4/6] INSR-8884: One more fixed undefined check --- src/layouts/payment-method/payment-method.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 70196840..210f6fd4 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -539,7 +539,7 @@ export default { this.pushEventToGA('order_summary', 'edit', 'contact_details', true); let action; let label; - switch (this.mainStore.insuranceCoverage.coverageType) { + switch (this.mainStore.insuranceCoverage?.coverageType) { case coverageType.Deductible: action = 'Covered'; label = this.mainStore.currentDeductible; @@ -553,9 +553,11 @@ export default { label = 'Unverified'; break; case coverageType.NONE: + default: action = 'Unverified'; label = 'Unverified'; break; + d } this.pushEventToGA('Submit Appointment', action, label, true, null, 1); } From e168a25787dba51bd9874813dfd5b405a4116012 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Tue, 21 Apr 2026 14:35:43 -0400 Subject: [PATCH 5/6] capture bailout dataLayer event Includes Reason and Page from --- src/constants/analytics.js | 1 + src/layouts/bailout-page/bailout-page.vue | 13 ++++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/constants/analytics.js b/src/constants/analytics.js index dc023b15..ef128f13 100644 --- a/src/constants/analytics.js +++ b/src/constants/analytics.js @@ -14,6 +14,7 @@ const GaEvents = Object.freeze({ const GaCategories = Object.freeze({ API_RESPONSE: 'Api_Response', + BAILOUT: 'Bailout', CONFIRMATION_CLICKED: "confirmation clicked", CONFIRMATION_CLICKED_INSHOP: "inshop confirmation clicked", CONFIRMATION_CLICKED_MOBILE: "mobile confirmation clicked", diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue index 8617ce77..dbd250d4 100644 --- a/src/layouts/bailout-page/bailout-page.vue +++ b/src/layouts/bailout-page/bailout-page.vue @@ -88,8 +88,10 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue'; import textBlock from '@/digital-components/text-block/text-block.vue'; // Supporting files +import analyticsMixIn from '@/mixins/analytics-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { GaCategories } from '@/constants/analytics'; import globalRules from '@/constants/global-rules'; import settleAllPromises from '@/helpers/layout-helper'; import { useMainStore } from '@/store'; @@ -111,8 +113,17 @@ export default { Form, textBlock }, - mixins: [BaseFormMixin], + mixins: [BaseFormMixin, analyticsMixIn], async beforeRouteEnter(to, from, next) { + const fromPage = from?.query?.issPage || 'external'; + // Only log bailout event if user is coming from a different page. + // This ensures that we cannot get stuck in a loop, if the bailout-page ever bails out. + if (fromPage !== issPageValues.BAILOUT_PAGE) { + const bailoutCode = useMainStore().pageData(issPageValues.BAILOUT_PAGE).bailoutCode; + const bailoutString = Object.keys(BailoutCode).find(key => BailoutCode[key] === bailoutCode); + analyticsMixIn.methods.pushEventToGA(GaCategories.BAILOUT, bailoutString, fromPage, true, null, null); + } + // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); // Settle promises and get results From 70f80affec34530f889d5bbee0c81522048e7201 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Tue, 21 Apr 2026 14:46:45 -0400 Subject: [PATCH 6/6] Update Title --- src/router/router-constants/router-titles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router/router-constants/router-titles.js b/src/router/router-constants/router-titles.js index e6b8d0a6..09697588 100644 --- a/src/router/router-constants/router-titles.js +++ b/src/router/router-constants/router-titles.js @@ -9,7 +9,7 @@ const routerTitles = Object.freeze({ [issPageValues.ADDRESS_LOOKUP]: `Address Lookup ${titleSuffix}`, [issPageValues.ADDRESS_VEHICLES]: `Address Vehicles ${titleSuffix}`, - [issPageValues.BAILOUT_PAGE]: `Bailout Page ${titleSuffix}`, + [issPageValues.BAILOUT_PAGE]: `Need Help ${titleSuffix}`, [issPageValues.CAPABILITY_QUESTIONS]: `Capability Questions ${titleSuffix}`, [issPageValues.CONTACT_CONFIRMATION]: `Contact Confirmation ${titleSuffix}`, [issPageValues.CONTACT_DETAILS]: `Contact Details ${titleSuffix}`,