From ad053149170af8d5ce497d5666756a8658f91eab Mon Sep 17 00:00:00 2001
From: Bruno Dias <bruno.dias@vtex.com.br>
Date: Tue, 14 May 2019 14:57:02 -0300
Subject: [PATCH] Add skuName in variant property

---
 CHANGELOG.md                     |  4 ++++
 react/events/enhancedCommerce.ts | 32 ++++++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e18327..3751312 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/react/events/enhancedCommerce.ts b/react/events/enhancedCommerce.ts
index ccafd14..f589ecc 100644
--- a/react/events/enhancedCommerce.ts
+++ b/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,
   })
 }