feat: add tracking events to typage components

kiva · Nov 14, 2024 · 261fb3d · 261fb3d
1 parent 09e9877
commit 261fb3d
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 22 deletions.
diff --git a/src/components/Forms/GuestAccountCreation.vue b/src/components/Forms/GuestAccountCreation.vue
@@ -79,6 +79,14 @@ export default {
 			type: String,
 			default: 'create-guest-account'
 		},
+		eventProperty: {
+			type: String,
+			default: ''
+		},
+		eventValue: {
+			type: Number,
+			default: 0
+		}
 	},
 	data() {
 		return {
@@ -93,7 +101,13 @@ export default {
 			this.serverError = false;
 			this.v$.$touch();
 			if (!this.v$.$invalid) {
-				this.$kvTrackEvent(this.eventCategory, 'click', this.eventLabel);
+				this.$kvTrackEvent(
+					this.eventCategory,
+					'click',
+					this.eventLabel,
+					this.eventProperty,
+					this.eventValue ? this.eventValue : null
+				);
 
 				// will end up redirecting to password reset page.
 				this.apollo.mutate({

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -28,23 +28,13 @@
 					<kv-button
 						class="tw-w-full btn"
 						@click="() => updateOptIn(true)"
-						v-kv-track-event="[
-							'thanks',
-							'click',
-							'accept-opt-in-request',
-						]"
 					>
 						Yes, keep me updated
 					</kv-button>
 					<kv-button
 						@click="() => updateOptIn(false)"
 						variant="ghost"
 						class="tw-w-full btn ghost"
-						v-kv-track-event="[
-							'thanks',
-							'click',
-							'reject-opt-in-request',
-						]"
 					>
 						No, I don’t want to receive updates
 					</kv-button>
@@ -82,10 +72,19 @@ const props = defineProps({
 	optedIn: {
 		type: Boolean,
 		default: false
+	},
+	isGuest: {
+		type: Boolean,
+		default: false,
+	},
+	numberOfBadgesEarned: {
+		type: Number,
+		default: 0,
 	}
 });
 
 const apollo = inject('apollo');
+const $kvTrackEvent = inject('$kvTrackEvent');
 const newConsentAnswered = ref(false);
 const receiveNews = ref(false);
 
@@ -140,6 +139,14 @@ const getMarginLeft = index => {
 };
 
 const updateOptIn = value => {
+	$kvTrackEvent(
+		'post-checkout',
+		'click',
+		`${value ? 'accept' : 'reject'}-opt-in-request`,
+		props.isGuest ? 'guest' : 'signed-in',
+		props.numberOfBadgesEarned,
+	);
+
 	if (value) {
 		try {
 			apollo.mutate({

diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -3,7 +3,6 @@
 		<!-- Opt In module -->
 		<OptInModule
 			v-if="!isGuest && !isOptedIn"
-			:selected-loan="selectedLoan"
 			:loans="loans"
 			:is-guest="isGuest"
 		/>
@@ -36,7 +35,16 @@
 			</BadgeContainer>
 			<h3>{{ badgeLevelName }} unlocked</h3>
 			<p>{{ badgeFunFact }}{{ badgeFunFactFootnote ? '*' : '' }}</p>
-			<KvButton class="continue-button tw-w-full tw-my-0.5" @click="handleContinue">
+			<KvButton
+				class="continue-button tw-w-full tw-my-0.5" @click="handleContinue"
+				v-kv-track-event="[
+					'post-checkout',
+					'click',
+					'create-new-account',
+					isGuest ? 'guest' : 'signed-in',
+					numberOfBadgesEarned,
+				]"
+			>
 				{{ continueButtonText }}
 				<KvMaterialIcon :icon="mdiArrowRight" class="tw-ml-0.5" />
 			</KvButton>
@@ -50,7 +58,7 @@
 				<div
 					class="option-box"
 					:class="{ 'open' : openCreateAccount }"
-					@click="openCreateAccount = !openCreateAccount"
+					@click="handleClickCreateAccount"
 				>
 					<p class="tw-font-medium">
 						Create your account
@@ -70,8 +78,10 @@
 						<p>Finish setting up your account to track and relend your money as you are paid back.</p>
 						<GuestAccountCreation
 							class="tw-pt-3"
-							event-category="thanks"
-							event-label="open-account-creation-drawer"
+							event-category="post-checkout"
+							event-label="create-new-account-from-drawer"
+							event-property="guest"
+							:event-value="numberOfBadgesEarned"
 						/>
 					</div>
 				</KvExpandable>
@@ -80,7 +90,7 @@
 				<div
 					class="option-box"
 					:class="{ 'open' : openOrderConfirmation }"
-					@click="openOrderConfirmation = !openOrderConfirmation"
+					@click="handleClickOrderConfirmation"
 				>
 					<p class="tw-font-medium">
 						Show confirmation
@@ -133,13 +143,19 @@
 			title="Finish creating your account to see what's next"
 			@lightbox-closed="showGuestAccountModal = false"
 		>
-			<GuestAccountCreation />
+			<GuestAccountCreation
+				event-label="create-new-account"
+				event-property="guest"
+				:event-value="numberOfBadgesEarned"
+			/>
 		</KvLightbox>
 	</div>
 </template>
 
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import {
+	onMounted, ref, computed, inject
+} from 'vue';
 import confetti from 'canvas-confetti';
 import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
 import KvExpandable from '#src/components/Kv/KvExpandable';
@@ -183,9 +199,9 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
-	selectedLoan: {
-		type: Object,
-		default: () => ({})
+	numberOfBadgesEarned: {
+		type: Number,
+		default: 0
 	}
 });
 
@@ -196,6 +212,8 @@ const openOrderConfirmation = ref(false);
 const openShareModule = ref(false);
 const showGuestAccountModal = ref(false);
 
+const $kvTrackEvent = inject('$kvTrackEvent');
+
 const numberOfBadges = computed(() => props.badgesAchieved.length);
 
 const loansToDisplay = computed(() => props.loans.slice(0, 3));
@@ -233,14 +251,53 @@ const badgeFunFactFootnote = computed(() => badgeData.value.contentfulData?.shar
 const handleContinue = () => {
 	if (props.isGuest) {
 		showGuestAccountModal.value = true;
+		$kvTrackEvent(
+			'post-checkout',
+			'click',
+			'open-account-creation-drawer',
+			'guest',
+			props.numberOfBadgesEarned,
+		);
 	} else {
 		const hasBadges = numberOfBadges.value > 0;
 		const sectionToScrollTo = numberOfBadges.value === 1 ? MY_IMPACT_JOURNEYS_ID : MY_ACHIEVEMENTS_ID;
+		$kvTrackEvent(
+			'post-checkout',
+			'click',
+			'continue-to-my-kiva',
+			'guest',
+			props.numberOfBadgesEarned,
+		);
+
 		// eslint-disable-next-line vue/no-mutating-props
 		props.router?.push(`/portfolio${hasBadges ? `#${sectionToScrollTo}` : ''}`);
 	}
 };
 
+const handleClickCreateAccount = () => {
+	$kvTrackEvent(
+		'post-checkout',
+		'click',
+		'open-account-creation-drawer',
+		'guest',
+		props.numberOfBadgesEarned,
+	);
+
+	openCreateAccount.value = !openCreateAccount.value;
+};
+
+const handleClickOrderConfirmation = () => {
+	$kvTrackEvent(
+		'post-checkout',
+		'click',
+		'open-order-confirmation-drawer',
+		props.isGuest ? 'guest' : 'signed-in',
+		props.numberOfBadgesEarned,
+	);
+
+	openOrderConfirmation.value = !openOrderConfirmation.value;
+};
+
 onMounted(() => {
 	confetti({
 		origin: {