4 files changed, 48 insertions, 6 deletions
diff --git a/src/core/utils/googleTag.js b/src/core/utils/googleTag.js
new file mode 100644
index 00000000..9faea39e
--- /dev/null
+++ b/src/core/utils/googleTag.js
@@ -0,0 +1,32 @@
+export const gtagAddToCart = (variant, quantity) => {
+  gtag('event', 'add_to_cart', {
+    currency: 'IDR',
+    value: variant.price.priceDiscount * quantity,
+    items: [
+      {
+        item_id: variant.id,
+        item_name: variant.name,
+        discount: variant.price.price - variant.price.priceDiscount,
+        item_brand: variant.manufacture?.name,
+        item_variant: variant.code || variant.id,
+        price: variant.price.price,
+        quantity
+      }
+    ]
+  })
+}
+
+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
+    })
+  }
+  gtag('event', 'view_item', { items })
+}
diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..351c07c1 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -5,6 +5,8 @@ import ProductDesktop from './ProductDesktop'
 import useAuth from '@/core/hooks/useAuth'
 import ProductMobile from './ProductMobile'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { gtagViewItem } from '@/core/utils/googleTag'
 
 const Product = ({ product }) => {
   const auth = useAuth()
@@ -26,6 +28,10 @@ const Product = ({ product }) => {
     wishlist.refetch()
   }
 
+  useEffect(() => {
+    gtagViewItem(product.variants)
+  }, [product])
+
   return (
     <>
       <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..4a584761 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +14,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -52,11 +53,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     return isValid
   }
 
-  const handleAddToCart = (variantId) => {
-    const quantity = variantQuantityRefs.current[variantId].value
+  const handleAddToCart = (variant) => {
+    const quantity = variantQuantityRefs.current[variant.id].value
     if (!validQuantity(quantity)) return
+    gtagAddToCart(variant, quantity)
     updateItemCart({
-      productId: variantId,
+      productId: variant.id,
       quantity,
       selected: true
     })
@@ -247,14 +249,14 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 />
                 <button
                   type='button'
-                  onClick={() => handleAddToCart(product.variants[0].id)}
+                  onClick={() => handleAddToCart(product.variants[0])}
                   className='flex-1 py-2 btn-yellow'
                 >
                   Keranjang
                 </button>
                 <button
                   type='button'
-                  onClick={() => handleBuy(product.variants[0].id)}
+                  onClick={() => handleBuy(product.variants[0])}
                   className='flex-1 py-2 btn-solid-red'
                 >
                   Beli
@@ -345,7 +347,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                       <td className='flex gap-x-3'>
                         <button
                           type='button'
-                          onClick={() => handleAddToCart(variant.id)}
+                          onClick={() => handleAddToCart(variant)}
                           className='flex-1 py-2 btn-yellow'
                         >
                           Keranjang
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..667a4ba1 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -85,6 +86,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
   const handleClickCart = () => {
     if (!validAction()) return
+    gtagAddToCart(activeVariant, quantity)
     updateItemCart({
       productId: activeVariant.id,
       quantity,