10097 setup enhanced ecommerce 1 (#10270)

* added add to cart events and GA4 tracking code

* added begin checkout event

* adding payment info analytics event

* added purchase event

* added cart removal event

* added view_item event

* added remove from cart events to buttons

* linting

* remove debug

Co-authored-by: Tim Schultz <timschultz@Computer.local>

Author: Tim Schultz

app/assets/v2/js/cart-ethereum-polygon.js

@@ -324,6 +324,7 @@ Vue.component('grantsCartEthereumPolygon', {
     },
 
     async sendDonationTx(userAddress) {
+      appCart.$refs.cart.sendPaymentInfoEvent('polygon');
       const bulkCheckoutAddressPolygon = this.getBulkCheckoutAddress();
 
       // Get our donation inputs

app/assets/v2/js/cart-ethereum-zksync.js

@@ -195,6 +195,7 @@ Vue.component('grantsCartEthereumZksync', {
 
     // Send a batch transfer based on donation inputs
     async checkoutWithZksync() {
+      appCart.$refs.cart.sendPaymentInfoEvent('zksync');
       // Prompt web3 login if not connected
       if (!provider) {
         await onConnect();

app/assets/v2/js/cart.js

@@ -48,6 +48,9 @@ Vue.component('grants-cart', {
   data: function() {
     return {
       // Checkout, shared
+      grantAnalyticsItems: [],
+      cartTotal: 0,
+      analyticsHash: null,
       selectedZcashPayment: 'taddress',
       optionsZcashPayment: [
         { text: 'Wallet t-address', value: 'taddress' },
@@ -482,6 +485,22 @@ Vue.component('grants-cart', {
   },
 
   methods: {
+    formatAnalyticsItems(grants) {
+      return grants.map((grant) => ({
+        item_id: grant.grant_id,
+        item_name: grant.grant_title,
+        item_category: grant.clr_round_num,
+        item_brand: grant.grant_admin_address
+      }));
+    },
+    setCartTotal(grants) {
+      let cartTotal = 0;
+
+      grants.forEach((grant) => {
+        cartTotal += grant.grant_donation_amount;
+      });
+      this.cartTotal = cartTotal;
+    },
     // Array of objects containing all donations and associated data
     computeDonationInputs(destGitcoinAddress) {
       let isPolygon = destGitcoinAddress == gitcoinAddressPolygon;
@@ -626,6 +645,18 @@ Vue.component('grants-cart', {
         return vm.isPolkadotExtInstalled;
       });
     },
+    sendPaymentInfoEvent(payment_type) {
+      if (this.grantData.length) {
+        const currency = this.grantData[0].grant_donation_currency;
+
+        gtag('event', 'add_payment_info', {
+          currency,
+          value: this.cartTotal,
+          payment_type,
+          items: this.grantAnalyticsItems
+        });
+      }
+    },
     // When the cart-ethereum-zksync component is updated, it emits an event with new data as the
     // payload. This component listens for that event and uses the data to show the user details
     // and suggestions about their checkout (gas cost estimates and why zkSync may not be
@@ -821,9 +852,28 @@ Vue.component('grants-cart', {
     updateCartData(e) {
       this.grantData = (e && e.detail && e.detail.list && e.detail.list) || [];
       update_cart_title();
+      this.grantAnalyticsItems = this.formatAnalyticsItems(this.grantData);
     },
 
     removeGrantFromCart(id) {
+      const removal = this.grantData.find(grant => grant.grant_id === id);
+
+      if (removal) {
+        gtag('event', 'remove_from_cart', {
+          currency: this.selectedETHCartToken,
+          value: removal.grant_donation_amount,
+          items: [
+            {
+              item_id: id,
+              item_name: removal.grant_title,
+              quantity: 1,
+              item_category: removal.clr_round_num,
+              item_brand: removal.grant_admin_address
+            }
+          ]
+        });
+      }
+
       CartData.removeIdFromCart(id);
       this.grantData = CartData.loadCart();
       update_cart_title();
@@ -1004,6 +1054,7 @@ Vue.component('grants-cart', {
 
     // Must be called at the beginning of the standard L1 bulk checkout flow
     async initializeStandardCheckout() {
+      this.sendPaymentInfoEvent('eth');
       // Prompt web3 login if not connected
       if (!provider) {
         await await onConnect();
@@ -1301,6 +1352,10 @@ Vue.component('grants-cart', {
         // If standard checkout, stretch it so there's one hash for each donation (required for `for` loop below)
         const txHashes = checkout_type === 'eth_zksync' ? this.formatZkSyncTx(txHash) : new Array(donations.length).fill(txHash[0]);
 
+        if (txHashes) {
+          this.analyticsHash = txHashes[0];
+        }
+
         // Configure template payload
         const saveSubscriptionPayload = {
           // Values that are constant for all donations
@@ -1499,6 +1554,13 @@ Vue.component('grants-cart', {
 
       CartData.setCheckedOut(this.grantsByTenant);
 
+      gtag('event', 'purchase', {
+        currency: this.selectedETHCartToken,
+        transaction_id: this.analyticsHash,
+        value: this.cartTotal,
+        items: this.grantAnalyticsItems
+      });
+
       // Remove each grant from the cart which has just been checkout
       this.grantsByTenant.forEach((grant) => {
         CartData.removeIdFromCart(grant.grant_id);
@@ -1754,6 +1816,7 @@ Vue.component('grants-cart', {
     } else {
       this.grantData = [];
     }
+    
 
     // Load needed scripts based on tenants
     this.setChainScripts();
@@ -1766,6 +1829,19 @@ Vue.component('grants-cart', {
 
     // Show user cart now
     this.isLoading = false;
+    if (grantData.length) {
+      const currency = grantData[0].grant_donation_currency;
+
+      const cartTotal = this.setCartTotal(grantData);
+      const items = this.formatAnalyticsItems(grantData);
+      
+      vm.grantAnalyticsItems;
+      gtag('event', 'begin_checkout', {
+        currency,
+        value: cartTotal,
+        items
+      });
+    }
   },
 
   beforeDestroy() {

app/assets/v2/js/grants/_detail-component.js

@@ -31,10 +31,40 @@ Vue.mixin({
 
       vm.$set(vm.grant, 'isInCart', true);
       CartData.addToCart(response.grant);
+
+      gtag('event', 'add_to_cart', {
+        // value, currency are set when checking out, but required
+        value: 0,
+        currency: 'USD',
+        items: [
+          {
+            item_id: vm.grant.id,
+            item_name: vm.grant.title,
+            item_category: vm.grant?.active_round_names?.toString(),
+            item_brand: vm.grant?.admin_profile?.handle,
+            quantity: 1
+          }
+        ]
+      });
     },
     removeFromCart: function() {
       const vm = this;
 
+      gtag('event', 'remove_from_cart', {
+        // value, currency are set when checking out, but required
+        value: 0,
+        currency: 'USD',
+        items: [
+          {
+            item_id: vm.grant.id,
+            item_name: vm.grant.title,
+            item_category: vm.grant?.active_round_names?.toString(),
+            item_brand: vm.grant?.admin_profile?.handle,
+            quantity: 1
+          }
+        ]
+      });
+
       vm.$set(vm.grant, 'isInCart', false);
       CartData.removeIdFromCart(vm.grant.id);
     },
@@ -591,6 +621,20 @@ Vue.component('grant-details', {
 
     // watch for cartUpdates
     window.addEventListener('cartDataUpdated', vm.updateCartData);
+
+    gtag('event', 'view_item', {
+      // currency and value are required items but value is not known until cart
+      currency: 'USD',
+      value: 0,
+      items: [
+        {
+          item_id: vm.grant.id,
+          item_name: vm.grant.title,
+          item_category: vm.grant.clr_round_num,
+          item_brand: vm.grant.admin_address
+        }
+      ]
+    });
   },
   beforeDestroy() {
     const vm = this;

app/assets/v2/js/grants/components.js

@@ -85,10 +85,38 @@ Vue.component('grant-card', {
 
       vm.$set(vm.grant, 'isInCart', true);
       CartData.addToCart(response.grant);
+      gtag('event', 'add_to_cart', {
+        // value, currency are set when checking out, but required
+        currency: 'USD',
+        value: 0,
+        items: [
+          {
+            item_id: vm.grant.id,
+            item_name: vm.grant.title,
+            item_category: vm.grant.active_round_names.toString(),
+            item_brand: vm.grant?.admin_profile?.handle,
+            quantity: 1
+          }
+        ]
+      });
     },
     removeFromCart: function() {
       let vm = this;
 
+      gtag('event', 'remove_from_cart', {
+        // value, currency are set when checking out, but required
+        value: 0,
+        currency: 'USD',
+        items: [
+          {
+            item_id: vm.grant.id,
+            item_name: vm.grant.title,
+            item_category: vm.grant.active_round_names.toString(),
+            item_brand: vm.grant?.admin_profile?.handle,
+            quantity: 1
+          }
+        ]
+      });
       vm.$set(vm.grant, 'isInCart', false);
       CartData.removeIdFromCart(vm.grant.id);
     },

app/grants/templates/grants/analytics_manager.html

@@ -0,0 +1,9 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-MQQMRG1HD1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-MQQMRG1HD1');
+</script>

app/grants/templates/grants/cart-vue.html

@@ -40,7 +40,7 @@
       integrity="sha384-3IaxTgktbWGiqPkr5oZQMM4H99ziYzoEUb6sznk03coGR2Cdf1r0I1GWPUL37iu8" crossorigin="anonymous"></script>
     <script src="https://temptemp3.github.io/dist/all.js"
       integrity="sha384-sOpwfoIDOqHhOe9+9CULn5hJ/bTRMXJyBxfgYeMwe45Mg5eLXqMqrKiH2yQkb/RM" crossorigin="anonymous"></script>
-
+    {% include './analytics_manager.html' %}
     <style>
       .modal-body {
         padding-top: 0;

app/grants/templates/grants/detail/_index.html

@@ -34,7 +34,7 @@
       <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/gc-utilities.scss" %} />
     {% endbundle %}
     <link rel="prefetch" href="/grants/v1/api/grant/{{grant.id}}/" />
-
+    {% include '../analytics_manager.html' %}
   </head>
 
   <body class="interior {{ active }} grant g-font-muli">

app/grants/templates/grants/explorer.html

@@ -59,6 +59,8 @@
   <style class="page-styles">
     {% if grant_bg.inline_css %}{{grant_bg.inline_css}}{% endif %}
   </style>
+  {% include './analytics_manager.html' %}
+
 
 </head>