Skip to content

Commit 375eaa8

Browse files
lariciamotalariciamota
committed
Feat: RC Events - HomeView, CategoryView, DepartmentView, InternalSiteSearchView, ProductView, OtherView
1 parent ef8bb65 commit 375eaa8

File tree

6 files changed

+167
-5
lines changed

6 files changed

+167
-5
lines changed

‎packages/core/src/Layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { type PropsWithChildren } from 'react'
1+
import type { PropsWithChildren, ReactElement } from 'react'
22

33
import { usePageViewEvent } from './sdk/analytics/hooks/usePageViewEvent'
44

55
function Layout({ children }: PropsWithChildren) {
6-
usePageViewEvent()
6+
usePageViewEvent((children as ReactElement)?.props)
77

88
return <>{children}</>
99
}

‎packages/core/src/sdk/analytics/hooks/usePageViewEvent.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { PageViewEvent } from '@faststore/sdk'
22
import { useRouter } from 'next/router'
33
import { useCallback, useEffect } from 'react'
44

5-
export const usePageViewEvent = () => {
5+
export const usePageViewEvent = (props?: any) => {
66
const sendPageViewEvent = useCallback(() => {
77
import('@faststore/sdk').then(({ sendAnalyticsEvent }) => {
88
sendAnalyticsEvent<PageViewEvent>({
@@ -11,10 +11,11 @@ export const usePageViewEvent = () => {
1111
page_title: document.title,
1212
page_location: location.href,
1313
send_page_view: true,
14+
...props,
1415
},
1516
})
1617
})
17-
}, [])
18+
}, [props])
1819

1920
const router = useRouter()
2021

‎packages/core/src/sdk/analytics/platform/vtex/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import type { AnalyticsEvent } from '@faststore/sdk'
22

33
import handleSearchEvent from './search'
4+
import handleRCEvent from './rc'
45

56
export default function sendEvent(event: AnalyticsEvent) {
67
// VTEX RC
7-
window?.sendrc?.(event.name, event.params)
8+
handleRCEvent(event)
89

910
// VTEX Intelligent Search
1011
handleSearchEvent(event)

‎packages/core/src/sdk/analytics/platform/vtex/rc.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { AnalyticsEvent, PageViewEvent } from '@faststore/sdk'
2+
import {
3+
CategoryView,
4+
DepartmentView,
5+
HomeView,
6+
IntelligentSearchQueryEvent,
7+
InternalSiteSearchView,
8+
OtherView,
9+
ProductView,
10+
SearchSelectItemEvent,
11+
} from '../../types'
12+
13+
const EventNames = {
14+
OTHER_VIEW: 'otherView',
15+
HOME_VIEW: 'homeView',
16+
CATEGORY_VIEW: 'categoryView',
17+
DEPARTMENT_VIEW: 'departmentView',
18+
INTERNAL_SITE_SEARCH_VIEW: 'internalSiteSearchView',
19+
PRODUCT_VIEW: 'productView',
20+
} as const
21+
22+
type EventNames = (typeof EventNames)[keyof typeof EventNames]
23+
type EventParams =
24+
| HomeView
25+
| CategoryView
26+
| DepartmentView
27+
| InternalSiteSearchView
28+
| ProductView
29+
| OtherView
30+
31+
const sendEvent = (eventName: EventNames, eventParams: EventParams) => {
32+
window?.sendrc?.(eventName, eventParams)
33+
}
34+
35+
const handleEvent = (
36+
event: AnalyticsEvent | SearchSelectItemEvent | IntelligentSearchQueryEvent
37+
) => {
38+
let eventParams
39+
switch (event.name) {
40+
//TODO: add missing events - eg 'add_to_cart' and 'view_cart'
41+
case 'page_view':
42+
eventParams = (event as PageViewEvent).params
43+
switch (eventParams.type) {
44+
case 'plp':
45+
const collection = eventParams?.data?.collection
46+
const collectionCategoryList =
47+
collection?.breadcrumbList?.itemListElement
48+
if (collectionCategoryList.length > 1) {
49+
// console.log('✨ Category View Event:', eventParams)
50+
sendEvent(EventNames.CATEGORY_VIEW, {
51+
//TODO: add missing arg - categoryId
52+
departmentId: collection?.id,
53+
departmentName: collectionCategoryList[0]?.name,
54+
categoryName:
55+
collectionCategoryList[collectionCategoryList.length - 1]?.name,
56+
})
57+
} else {
58+
// console.log('✨ Department View Event:', eventParams)
59+
sendEvent(EventNames.DEPARTMENT_VIEW, {
60+
departmentId: collection?.id,
61+
departmentName: collectionCategoryList[0]?.name,
62+
})
63+
}
64+
break
65+
case 'pdp':
66+
// console.log('✨ Product View Event: ', eventParams)
67+
const product = eventParams?.data?.product
68+
const offers = product?.offers
69+
const productCategoryList = product?.breadcrumbList?.itemListElement
70+
sendEvent(EventNames.PRODUCT_VIEW, {
71+
//TODO: add missing args - skuStockOutFromProductDetail, productReferenceId,
72+
// productEans, skuStocks, productBrandId, productDepartmentId,
73+
// productCategoryId, productListPrice, sellerIds
74+
productId: product?.isVariantOf?.productGroupID,
75+
productName: product?.isVariantOf?.name,
76+
productBrandName: product?.brand?.name,
77+
productDepartmentName: productCategoryList
78+
? productCategoryList[0]?.name
79+
: '',
80+
productCategoryName:
81+
productCategoryList.length > 1
82+
? productCategoryList[productCategoryList.length - 2]?.name
83+
: '',
84+
productPrice: offers?.price,
85+
sellerId: offers?.seller?.id,
86+
})
87+
break
88+
default:
89+
if (eventParams?.page?.type === 'home') {
90+
// console.log('✨ Home View Event:', eventParams)
91+
sendEvent(EventNames.HOME_VIEW, {})
92+
} else {
93+
// console.log('✨ Other View Event:', eventParams)
94+
sendEvent(EventNames.OTHER_VIEW, {})
95+
}
96+
}
97+
break
98+
case 'intelligent_search_query':
99+
console.log('✨ Internal Site Search View Event:', event)
100+
eventParams = (event as IntelligentSearchQueryEvent).params
101+
sendEvent(EventNames.INTERNAL_SITE_SEARCH_VIEW, {
102+
siteSearchTerm: eventParams.term,
103+
siteSearchForm: eventParams.url,
104+
siteSearchResults: eventParams.totalCount,
105+
})
106+
break
107+
default:
108+
}
109+
}
110+
111+
export default handleEvent

‎packages/core/src/sdk/analytics/types.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,51 @@ export interface IntelligentSearchAutocompleteClickEvent {
6060
name: 'intelligent_search_autocomplete_click'
6161
params: IntelligentSearchAutocompleteClickParams
6262
}
63+
/**
64+
* RC event types
65+
* Types copied from Request Capture App: https://github.com/vtex/request-capture-app/blob/1becac32c002cb03a57bf36c8a7f9400eab8b933/react/typings/rcevents.d.ts
66+
*/
67+
68+
export interface HomeView {}
69+
70+
export interface CategoryView {
71+
departmentId?: string
72+
departmentName?: string
73+
categoryId?: string
74+
categoryName?: string
75+
}
76+
77+
export interface DepartmentView {
78+
departmentId?: string
79+
departmentName?: string
80+
}
81+
82+
export interface InternalSiteSearchView {
83+
siteSearchTerm?: string // ex: "areia"
84+
siteSearchForm?: string // ex: "/gatos/ambiente--gatos/caixa-de-areia/areia?PS=20"
85+
siteSearchCategory?: string // ex: "10000283"
86+
siteSearchResults?: number // ex: 26
87+
}
88+
89+
type SkuId = string
90+
91+
export interface ProductView {
92+
skuStockOutFromProductDetail: string[]
93+
productId: string
94+
productReferenceId: string
95+
productEans: string[]
96+
skuStocks: Record<SkuId, number>
97+
productName: string
98+
productBrandId: string
99+
productBrandName: string
100+
productDepartmentId: string
101+
productDepartmentName: string
102+
productCategoryId: string
103+
productCategoryName: string
104+
productListPrice: number
105+
productPrice: number
106+
sellerId: string
107+
sellerIds: string // ex: "00443713,04412311,1"
108+
}
109+
110+
export interface OtherView {}

‎packages/sdk/src/analytics/events/page_view.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export interface PageViewParams {
22
page_title?: string,
33
page_location?: string,
44
send_page_view?: boolean,
5+
[key: string]: any
56
}
67

78
export interface PageViewEvent {

0 commit comments

Comments
 (0)