Merge pull request #1196 from Safelite/feature/humphries/INSR-8884
INSR-8884: service-package and payment-method events
This commit is contained in:
commit
5991fb52ba
6 changed files with 91 additions and 6 deletions
|
|
@ -58,4 +58,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 };
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
linkType="text"
|
||||
text="Remove"
|
||||
href="javascript:void(0)"
|
||||
@clickEvent="removeVap(item.partType)">
|
||||
@clickEvent="removeVap(item.partType, item?.name ?? '')">
|
||||
<template #after-text>
|
||||
<span class="sr-only">{{ item?.name ?? '' }}</span>
|
||||
</template>
|
||||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,8 @@ export default {
|
|||
return this.modelValue;
|
||||
},
|
||||
set(selectedMethod) {
|
||||
const paymentMethod = analyticsPaymentTypeMap.get(this.piaType) ?? 'UNKNOWN';
|
||||
this.pushEventToGA('submit_order', 'payment_type_selected', paymentMethod, true);
|
||||
this.$emit('update:modelValue', selectedMethod);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -156,6 +156,9 @@ 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';
|
||||
import coverageType from '@/constants/coverage-type';
|
||||
import partTypeStrings from '@/constants/part-type-strings';
|
||||
|
||||
export default {
|
||||
name: 'payment-method',
|
||||
|
|
@ -197,6 +200,9 @@ export default {
|
|||
vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.handleAnalyticsEventsOnMounted();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paymentMethod: null,
|
||||
|
|
@ -411,6 +417,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) {
|
||||
|
|
@ -460,6 +467,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;
|
||||
|
|
@ -469,6 +477,7 @@ export default {
|
|||
);
|
||||
break;
|
||||
case 'schedule':
|
||||
this.pushEventToGA('order_summary', 'change', 'time', true);
|
||||
this.$router.navigateWithSpinner(
|
||||
this.navigationScenarios.EDIT_SCHEDULE,
|
||||
this.$route
|
||||
|
|
@ -499,6 +508,58 @@ export default {
|
|||
},
|
||||
closeContactDetailsWithoutSaving() {
|
||||
this.smsOptIn = 'No';
|
||||
},
|
||||
handleAnalyticsEventsOnMounted() {
|
||||
const mobileOrInshop = this.mainStore.isMobileAppointment ? 'mobile' : 'in_shop';
|
||||
const verifiedOrNotVerified = this.mainStore.isVerified ? 'verified' : 'not_verified';
|
||||
const repairOrReplace = this.mainStore.damage.isRepair ? 'repair' : 'replace';
|
||||
this.pushEventToGA('order_summary', 'safelite', `${mobileOrInshop}_${repairOrReplace}_${verifiedOrNotVerified}`, true);
|
||||
|
||||
if (containsRecalParts(this.mainStore.lineItems)) {
|
||||
let coverageTypeForLabel = '';
|
||||
if (this.mainStore.isITAC) {
|
||||
coverageTypeForLabel = 'ITAC';
|
||||
} else if (this.mainStore.isNoComp) {
|
||||
coverageTypeForLabel = 'no_comp';
|
||||
} else if (this.mainStore.isVerified) {
|
||||
coverageTypeForLabel = 'verified';
|
||||
} else {
|
||||
coverageTypeForLabel = 'unverified';
|
||||
}
|
||||
const recalibrationType = this.mainStore.lineItems.glassParts?.find((part) => part.requiresRecalibration)?.recalibrationType;
|
||||
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 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.insuranceCoverage?.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:
|
||||
default:
|
||||
action = 'Unverified';
|
||||
label = 'Unverified';
|
||||
break;
|
||||
d
|
||||
}
|
||||
this.pushEventToGA('Submit Appointment', action, label, true, null, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -115,7 +115,8 @@ export default {
|
|||
},
|
||||
textLinkEmit(copy) {
|
||||
this.$parent.$emit('link-event', {
|
||||
args: getRouterLinkRouteFromCopy(copy)
|
||||
route: getRouterLinkRouteFromCopy(copy),
|
||||
packageName: this.value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,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();
|
||||
|
||||
|
|
@ -205,8 +206,11 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
openModalAction(eventData) {
|
||||
this.$refs[eventData.route].openModal();
|
||||
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() {
|
||||
return (
|
||||
|
|
@ -238,6 +242,9 @@ export default {
|
|||
store.updateVaps(this.selectedVaps);
|
||||
store.updateServicePackage(this.selectedPackageTier);
|
||||
|
||||
const packageName = analyticsServicePackageMap.get(this.selectedPackageTier) ?? 'UNKNOWN_PACKAGE';
|
||||
this.pushEventToGA('service_package', 'attached_a_package', packageName, true);
|
||||
|
||||
const scenario = store.isMobileAppointment
|
||||
? this.navigationScenarios.CLICKED_FORWARD_MOBILE
|
||||
: this.navigationScenarios.CLICKED_FORWARD_INSHOP;
|
||||
|
|
|
|||
Loading…
Reference in a new issue