Add gtag begin_checkout and purchase event

4 files changed, 73 insertions, 18 deletions

diff --git a/src/core/utils/googleTag.js b/src/core/utils/googleTag.js
index 6b2c9dc2..6d7476bd 100644
--- a/src/core/utils/googleTag.js
+++ b/src/core/utils/googleTag.js
@@ -1,5 +1,40 @@
+const mapVariants = (variants) => {
+  return variants.map((variant) => {
+    const res = {
+      item_id: variant.id,
+      item_name: variant.parent.name,
+      discount: variant.price.price - variant.price.priceDiscount,
+      item_brand: variant.manufacture?.name,
+      item_variant: variant.code || variant.id,
+      price: variant.price.price
+    }
+    if (variant?.quantity > 0) {
+      res.quantity = variant.quantity
+    }
+    return res
+  })
+}
+
+const sumTotal = (variants) => {
+  let totalPurchase = variants.reduce((total, x) => total + x.price.price, 0)
+  let totalDiscount = variants.reduce(
+    (total, x) => total + (x.price.price - x.price.priceDiscount),
+    0
+  )
+  let subtotal = totalPurchase - totalDiscount
+  let tax = Math.round(subtotal * 0.11)
+  let grandTotal = subtotal + tax
+  return {
+    totalPurchase: totalPurchase,
+    totalDiscount: totalDiscount,
+    subtotal: subtotal,
+    tax: tax,
+    grandTotal: Math.round(grandTotal)
+  }
+}
+
 export const gtagAddToCart = (variant, quantity) => {
-  gtag('event', 'add_to_cart', {
+  const param = {
     currency: 'IDR',
     value: variant.price.priceDiscount * quantity,
     items: [
@@ -13,20 +48,32 @@ export const gtagAddToCart = (variant, quantity) => {
         quantity
       }
     ]
-  })
+  }
+  gtag('event', 'add_to_cart', param)
 }
 
 export const gtagViewItem = (variants) => {
-  let items = []
-  for (const variant of variants) {
-    items.push({
-      item_id: variant.id,
-      item_name: variant.parent.name,
-      discount: variant.price.price - variant.price.priceDiscount,
-      item_brand: variant.manufacture?.name,
-      item_variant: variant.code || variant.id,
-      price: variant.price.price
-    })
+  const items = mapVariants(variants)
+  const param = { currency: 'IDR', value: variants[0].price.priceDiscount, items }
+  gtag('event', 'view_item', param)
+}
+
+export const gtagBeginCheckout = (variants) => {
+  const items = mapVariants(variants)
+  const { subtotal } = sumTotal(variants)
+  const param = { currency: 'IDR', value: subtotal, items }
+  gtag('event', 'begin_checkout', param)
+}
+
+export const gtagPurchase = (variants, shipping, transactionId) => {
+  const items = mapVariants(variants)
+  const { grandTotal } = sumTotal(variants)
+  const param = {
+    currency: 'IDR',
+    value: grandTotal,
+    transactionId,
+    shipping,
+    items
   }
-  gtag('event', 'view_item', { currency: 'IDR', value: variants[0].price.priceDiscount, items })
+  gtag('event', 'purchase', param)
 }
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 907d1267..8c4e7d42 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -17,6 +17,7 @@ import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagBeginCheckout } from '@/core/utils/googleTag'
 
 const Cart = () => {
   const router = useRouter()
@@ -134,6 +135,11 @@ const Cart = () => {
     toast.success('Berhasil menghapus barang dari keranjang')
   }
 
+  const handleCheckout = () => {
+    gtagBeginCheckout(products)
+    router.push('/shop/checkout')
+  }
+
   return (
     <>
       <BottomPopup
@@ -465,7 +471,7 @@ const Cart = () => {
                   type='button'
                   className='btn-solid-red flex-1'
                   disabled={selectedProduct().length == 0}
-                  onClick={() => router.push('/shop/checkout')}
+                  onClick={handleCheckout}
                 >
                   Checkout
                 </button>
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 525a641b..07d9acb6 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -22,8 +22,8 @@ import DesktopView from '@/core/components/views/DesktopView'
 import ExpedisiList from '../api/ExpedisiList'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
-import { Button, Modal } from 'flowbite-react'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { gtagPurchase } from '@/core/utils/googleTag'
 
 const SELF_PICKUP_ID = 32
 
@@ -233,6 +233,8 @@ const Checkout = () => {
       return
     }
 
+    gtagPurchase(products, biayaKirim, isCheckouted.name)
+
     const midtrans = async () => {
       for (const product of products) deleteItemCart({ productId: product.id })
       const payment = await axios.post(
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 4a584761..6a87d022 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -65,10 +65,10 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     setAddCartAlert(true)
   }
 
-  const handleBuy = (variantId) => {
-    const quantity = variantQuantityRefs.current[variantId].value
+  const handleBuy = (variant) => {
+    const quantity = variantQuantityRefs.current[variant.id].value
     if (!validQuantity(quantity)) return
-    router.push(`/shop/checkout?productId=${variantId}&quantity=${quantity}`)
+    router.push(`/shop/checkout?productId=${variant.id}&quantity=${quantity}`)
   }
 
   const variantSectionRef = useRef(null)