🔀 Merge #1947 into deploy/rinkeby

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,
+      });
     },
   },
 };

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}`;