Add product types

react/events/enhancedCommerce.ts

@@ -1,3 +1,5 @@
+import { getCategory } from './../utils'
+
 /** Product viewed event
  * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
  */
@@ -10,6 +12,7 @@ interface Item {
 interface Product {
   brand: string
   categoryId: string
+  categories: string[]
   productId: string
   productName: string
   selectedSku: string
@@ -37,6 +40,25 @@ export const productDetail = (product: Product) => {
   })
 }
 
+/** Product clicked event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#product-click
+ */
+export const productClick = (product: Product) => {
+  if (!product) return
+
+  const category = getCategory(product.categories)
+
+  ga('ec:addProduct', {
+    id: product.productId,
+    name: product.productName,
+    category: category,
+    brand: product.brand,
+    variant: getSkuName(product.selectedSku, product.items),
+  })
+  ga('ec:setAction', 'click')
+  ga('send', 'event', 'productClick', 'click')
+}
+
 /** Purchase event
  * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-transaction
  */

react/utils.tsx

@@ -1,11 +1,11 @@
-export const getCategory = (rawCategories: any) => {
+export const getCategory = (rawCategories: string[]) => {
   if (!rawCategories || !rawCategories.length) return
 
   const _filterEmpty = (string: string) => {
     if (string.length > 0) return string
   }
 
-  const categories = rawCategories.map(function(categoryPath: string) {
+  const categories = rawCategories.map(function (categoryPath: string) {
     let splitedPath = categoryPath.split('/').filter(_filterEmpty)
     return splitedPath[0]
   })