New events and updates

CHANGELOG.md

@@ -6,6 +6,10 @@ 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]
+### Added
+- `firstName`, `lastName`, `fullName`, `email`, `phone` on dataLayer for userData event
+- New events: `sortProducts`, `filterProducts`
+- Information about product on `productView` event
 
 ## [3.3.1] - 2022-04-04
 

react/modules/extraEvents.ts

@@ -1,13 +1,12 @@
 import push from './push'
-import { PixelMessage } from '../typings/events'
+import { PixelMessage, FilterProductsData } from '../typings/events'
 
 
 async function emailToHash(email:string) {
-  const msgUint8 = new TextEncoder().encode(email);                           
+  const msgUint8 = new TextEncoder().encode(email);
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-  return hashHex;
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
 }
 
 export async function sendExtraEvents(e: PixelMessage) {
@@ -39,12 +38,34 @@ export async function sendExtraEvents(e: PixelMessage) {
       push({
         event: 'userData',
         userId: data.id,
-        emailHash: emailHash 
+        emailHash: emailHash,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        fullName: `${data.firstName} ${data.lastName}`,
+        email: data.email,
+        phone: data.phone
       })
 
       break
     }
 
+    case 'vtex:sortProducts': {
+      push({
+        event: 'sortProducts',
+        value: e.data.value
+      })
+      break
+    }
+
+    case 'vtex:filterProducts': {
+      const { values } = e.data as FilterProductsData
+      push({
+        event: 'filterProducts',
+        values: values
+      })
+      break
+    }
+
     default: {
       break
     }

react/modules/legacyEvents.ts

@@ -58,6 +58,7 @@ export async function sendLegacyEvents(e: PixelMessage) {
         case 'productView': {
           push({
             event: 'productView',
+            product: e.data.product
           })
           break
         }

react/typings/events.d.ts

@@ -17,6 +17,7 @@ export interface PixelMessage extends MessageEvent {
     | CartData
     | PromoViewData
     | PromotionClickData
+    | FilterProductsData
 }
 
 export interface EventData {
@@ -164,6 +165,12 @@ export interface PromotionClickData extends EventData {
   promotions: Promotion[]
 }
 
+export interface FilterProductsData {
+  event: 'filterProducts'
+  eventName: 'vtex:filterProducts'
+  values: FilterProductsValues[]
+}
+
 interface Promotion {
   id?: string
   name?: string
@@ -365,6 +372,12 @@ export interface Product {
   productName: string
   productReference: string
   selectedSku: Item
+  properties: ProductProperties[]
+}
+
+interface ProductProperties {
+  name: string
+  values: string[]
 }
 
 export interface Item {
@@ -397,6 +410,24 @@ interface ItemSummary {
   sellers: Seller[]
 }
 
+interface FilterProductsValues {
+  children: string | null
+  hidden: boolean
+  href: string
+  id: string
+  key: string
+  link: string | null
+  linkEncoded: string | null
+  map: string
+  name: string
+  newQuerySegment: string
+  quantity: number
+  range: string | null
+  selected: boolean
+  title: string
+  value: string
+}
+
 export interface Seller {
   commertialOffer: CommertialOffer
   sellerId: string