Add skuName in variant property

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Add skuName in variant property.
+
 ## [0.3.0] - 2019-05-14
 
 ### Fixed

react/events/enhancedCommerce.ts

@@ -1,18 +1,38 @@
 /** Product viewed event
  * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
  */
-export const productDetail = (product: any) => {
+
+interface Item {
+  itemId: string
+  name: string
+}
+
+interface Product {
+  brand: string
+  categoryId: string
+  productId: string
+  productName: string
+  selectedSku: string
+  items: Item[]
+}
+
+const getSkuName = (selectedSku: string, items: Item[]) =>
+  (items.find((item: Item) => selectedSku === item.itemId) || ({} as Item)).name
+
+export const productDetail = (product: Product) => {
   ga('ec:addProduct', {
     brand: product.brand,
     category: product.categoryId,
     id: product.productId,
     name: product.productName,
-    variant: product.variant,
+    variant: getSkuName(product.selectedSku, product.items),
   })
+
   ga('ec:setAction', 'detail')
+
   ga('send', 'event', {
-    eventAction: 'Detail -> View',
-    eventCategory: 'Ecommerce -> Product',
+    eventAction: 'Detail',
+    eventCategory: 'Ecommerce',
     nonInteraction: 1,
   })
 }
@@ -43,8 +63,8 @@ export const purchase = (order: any) => {
   })
 
   ga('send', 'event', {
-    eventAction: 'Purchase -> View',
-    eventCategory: 'Ecommerce -> OrderPlaced',
+    eventAction: 'Purchase',
+    eventCategory: 'Ecommerce',
     nonInteraction: 1,
   })
 }