Dispatch addToCart and removeFromCart events

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Dispatch `addToCart` and `removeFromCart` events.
+
 ## [0.6.1] - 2019-05-17
 
 ### Fixed

react/events/enhancedCommerce.ts

@@ -13,6 +13,7 @@ interface Product {
   productName: string
   selectedSku: string
   items: Item[]
+  variant: string
 }
 
 const getSkuName = (selectedSku: string, items: Item[]) =>
@@ -60,7 +61,6 @@ export const productClick = (product: Product) => {
   ga('send', 'event', {
     eventAction: 'Click',
     eventCategory: 'Product',
-    nonInteraction: 1,
   })
 }
 
@@ -92,6 +92,48 @@ export const productImpression = (
   })
 }
 
+/** Addition to cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+export const addToCart = (
+  product: Product,
+  price: number,
+  quantity: number
+) => {
+  if (!product) return
+
+  ga('ec:addProduct', {
+    name: product.productName,
+    brand: product.brand,
+    variant: product.variant,
+    price,
+    quantity,
+  })
+  ga('ec:setAction', 'add')
+  ga('send', 'event', {
+    eventAction: 'Click',
+    eventCategory: 'Add to cart',
+  })
+}
+
+/** Removal from cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+export const removeFromCart = (product: Product, price: number) => {
+  if (!product) return
+
+  ga('ec:addProduct', {
+    id: product.productId,
+    name: product.productName,
+    price,
+  })
+  ga('ec:setAction', 'remove')
+  ga('send', 'event', {
+    eventAction: 'Click',
+    eventCategory: 'Remove from cart',
+  })
+}
+
 /** Purchase event
  * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-transaction
  */

react/index.tsx

@@ -1,9 +1,11 @@
 import { orderPlaced } from './events/commonEvents'
 import {
+  addToCart,
   productDetail,
   productClick,
   productImpression,
   purchase,
+  removeFromCart,
 } from './events/enhancedCommerce'
 
 const gaId = window.__SETTINGS__.gaId
@@ -92,6 +94,22 @@ function listener(e: MessageEvent) {
     pageView(e.origin, e.data)
     return
   }
+
+  if (e.data.event === "addToCart") {
+    e.data.items.forEach((product: any) => {
+      product.productName = product.name
+      addToCart(product, product.price, product.quantity)
+    })
+  }
+
+  if (e.data.event === "removeFromCart") {
+    e.data.items.forEach((product: any) => {
+      product.productId = product.id
+      product.productName = product.name
+      removeFromCart(product, product.sellingPrice)
+    })
+  }
+
 }
 
 // Event listener for pageview