diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue index 03c1faf54..2f1e1712e 100644 --- a/src/pages/store/index.vue +++ b/src/pages/store/index.vue @@ -531,7 +531,7 @@ import { fetchBookstoreItemSearchResults, } from '~/util/api'; import { checkIsForcedInAppPage } from '~/util/client'; -import { logTrackerEvent } from '~/util/EventLogger'; +import { logPurchaseFlowEvent, logTrackerEvent } from '~/util/EventLogger'; import { parseNFTMetadataURL } from '~/util/nft'; import crispMixin from '~/mixins/crisp'; @@ -1065,6 +1065,26 @@ export default { if (this.searchQuery) { await this.fetchSearchItems(this.searchQuery); } + const listId = + (this.searchQuery + ? `search_${encodeURIComponent(this.searchQuery)}` + : this.selectedTagId) || 'listing'; + const listName = + (this.searchQuery + ? `Search: ${this.searchQuery}` + : this.selectedTagTitle) || 'All'; + logPurchaseFlowEvent(this, 'view_item_list', { + item_list_id: listId, + item_list_name: listName, + items: this.sortedBookstoreItems.map(item => ({ + classId: item.classId, + priceIndex: 0, + name: item.title, + price: item.minPrice, + })), + search_term: this.searchQuery || this.selectedTagTitle, + isNFTBook: true, + }); }, methods: { ...mapActions(['lazyFetchBookstoreCMSProductsByTagId']), @@ -1155,6 +1175,19 @@ export default { this.dialogNFTClassList = item.classIds; } logTrackerEvent(this, 'listing', 'listing_item_click', item.classId, 1); + logPurchaseFlowEvent(this, 'select_item', { + items: [ + { + name: item.title, + price: item.minPrice, + priceIndex: 0, + classId: item.classId, + }, + ], + price: item.minPrice, + currency: 'USD', + isNFTBook: true, + }); }, closeMultipleNFTClassDialog() { this.dialogNFTClassList = []; @@ -1176,6 +1209,9 @@ export default { this.isSearching = true; try { logTrackerEvent(this, 'listing', 'search_query', query, 1); + logPurchaseFlowEvent(this, 'search', { + search_term: query, + }); const { list } = await this.$api.$get( fetchBookstoreItemSearchResults(query) ); @@ -1187,6 +1223,19 @@ export default { this.searchItems = []; } finally { this.isSearching = false; + logPurchaseFlowEvent(this, 'view_item_list', { + item_list_id: `search_${encodeURIComponent(query)}`, + item_list_name: `Search: ${query}`, + items: this.sortedBookstoreItems.map(item => ({ + classId: item.classId, + priceIndex: 0, + name: item.title, + price: item.minPrice, + currency: 'USD', + })), + search_term: query, + isNFTBook: true, + }); } }, handleRecommendedItemClick(classId) { @@ -1241,6 +1290,19 @@ export default { // eslint-disable-next-line no-console console.error(error); } + logPurchaseFlowEvent(this, 'view_item_list', { + item_list_id: tag.id, + item_list_name: tag.name, + items: this.sortedBookstoreItems.map(item => ({ + classId: item.classId, + priceIndex: 0, + name: item.name, + price: item.minPrice, + currency: 'USD', + })), + search_term: tag.name, + isNFTBook: true, + }); }, }, }; diff --git a/src/util/EventLogger.js b/src/util/EventLogger.js index 7f151dd09..6ab8cd31f 100644 --- a/src/util/EventLogger.js +++ b/src/util/EventLogger.js @@ -152,12 +152,15 @@ export function logTrackerEvent( export function logPurchaseFlowEvent( vue, event, - { txHash, price, currency, items, isNFTBook, paymentId } + { txHash, price, currency, items, isNFTBook, paymentId, ...otherPayload } ) { try { if ( ![ + 'search', + 'view_item_list', 'view_item', + 'select_item', 'view_cart', 'begin_checkout', 'add_shipping_info', @@ -173,7 +176,7 @@ export function logPurchaseFlowEvent( transaction_id: paymentId || txHash, value: price, currency, - items: items.map(i => { + items: items?.map(i => { let itemId = i.productId || i.collectionId || i.classId; if (i.priceIndex !== undefined) { itemId = `${itemId}-${i.priceIndex}`; @@ -187,12 +190,13 @@ export function logPurchaseFlowEvent( quantity: i.quantity || 1, }; }), + ...otherPayload, }); if (event === 'purchase' && AD_CONVERSION_ID) { vue.$gtag.event('conversion', { send_to: AD_CONVERSION_ID, value: price, - currency: 'USD', + currency, transaction_id: paymentId || txHash, }); } @@ -203,6 +207,7 @@ export function logPurchaseFlowEvent( begin_checkout: 'InitiateCheckout', add_to_cart: 'AddToCart', purchase: 'Purchase', + search: 'Search', }; if (eventNameMapping[event]) { const eventName = eventNameMapping[event]; @@ -214,8 +219,8 @@ export function logPurchaseFlowEvent( currency, value: price, order_id: paymentId || txHash, - content_type: 'product', - contents: items.map(i => { + content_type: items ? 'product' : undefined, + contents: items?.map(i => { let id = i.productId || i.collectionId || i.classId; if (i.priceIndex !== undefined) { id = `${id}-${i.priceIndex}`; @@ -225,7 +230,7 @@ export function logPurchaseFlowEvent( quantity: i.quantity || 1, }; }), - content_ids: items.map(i => { + content_ids: items?.map(i => { let id = i.productId || i.collectionId || i.classId; if (i.priceIndex !== undefined) { id = `${id}-${i.priceIndex}`;