Merge pull request #279 from vtex-apps/fix/gtm-major-compatibility

Fixing GTM events to follow Google's defined patterns

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- GTM events to follow Google's defined patterns
 
 ## [2.59.0] - 2021-04-22
 ### Added

react/ProductList.tsx

@@ -28,15 +28,34 @@ const ProductList: FC<Props> = ({ renderAsChildren, classes }) => {
 
   const handleQuantityChange = useCallback(
     (uniqueId: string, quantity: number, item: OrderFormItem) => {
-      const adjustedItem = {
-        ...mapCartItemToPixel(item),
-        quantity,
+      if (quantity === item.quantity) {
+        return
+      }
+
+      const quantityIncreased = quantity > item.quantity
+
+      if (quantityIncreased) {
+        const adjustedItem = {
+          ...mapCartItemToPixel(item),
+          quantity: quantity - item.quantity,
+        }
+
+        push({
+          event: 'addToCart',
+          items: [adjustedItem],
+        })
+      } else {
+        const adjustedItem = {
+          ...mapCartItemToPixel(item),
+          quantity: item.quantity - quantity,
+        }
+
+        push({
+          event: 'removeFromCart',
+          items: [adjustedItem],
+        })
       }
 
-      push({
-        event: 'addToCart',
-        items: [adjustedItem],
-      })
       updateQuantity({ uniqueId, quantity }, options)
     },
     [push, updateQuantity]