A React Sitecore Personalize NPM module

The React Sitecore Personalize npm module is a wrapper for Sitecore CDP/Personalize Direct Client Script allowing you to easily add the script to react-based apps. The goal of this project is to make it even easier for those developers who might be new to React or Next.js and are learning how to integrate Sitecore Personalize by providing a simple wrapper for the direct client script. Allowing you to easily add the script to your projects and send events to Sitecore Personalize to track user behavior with just a few lines of code. The project is available on GitHub so please use it to help you get up-to-speed quickly, and contribute to the project if you have any suggestions for improvement.

Installation

npm install react-sitecore-personalize

yarn add react-sitecore-personalize

initClientScript

The initClientScript function is used to initialize the Direct Client Script adding the script within the body of your app. Parameters:

clientKey – Your unique sandbox Client Key.
cookieDomain – Your top-level cookie domain of the website that is being integrated e.g “.example.com” and not “www.example.com“.
apiEndpoint – Your API target endpoint specific to your data center region. Europe, United States, Asia Pacific
clientVersion – Client Versions the Release Notes JS Library provides the available versions.
pointOfSale – This is the pointOfSale configured for the tenant.
webFlowTarget – This is the path for the Amazon CloudFront Content Delivery Network (CDN) for Sitecore Personalize.
eventSettings – Common Event properties
- LogEvents: enable/disable console logs,
- Currency: Currency used in POS ex ‘USD’,
- Language: Language in use ex ‘EN’,
- Channel: The channel captured ex ‘WEB’.

import { useEffect } from 'react'
import { initClientScript } from 'react-sitecore-personalize'

export default function MyApp({ Component, pageProps }: AppProps) {
...
    useEffect(()=>{
        initClientScript('[Your api clientKey]','[your domain]','https://api.boxever.com/v1.2','1.4.6','[your point of sale]','https://d35vb5cccm4xzp.cloudfront.net', {LogEvents:true,Currency:'USD',Language:'EN',Channel:'WEB'})
    })
...
}

sendViewEvent

The sendViewEvent function allows you to send the VIEW event to capture the guest’s action of viewing a page. You can capture View events on all pages where you want to track guest behavior. Parameters:

page – string the name of the page the guest viewed.
trackingData – bool. Setting to true enables you to capture tracking data when sending the View event.

sendAddEvent

The sendAddEvent function allows you send the the details of the products a user has added to their cart. You would call this method when a user ADD a product to their cart. Parameters:

page – The name of the webpage the guest visited. Required.
productType – The type of product added to cart. Required
itemId – The item id of the product added to cart. Required.
productName – The name of the product added to the cart. Required.
productId – The product ID of the product added. Used in analytics for reporting. Required.
orderDate – The date and time the product was ordered. Required.
qty – The number of unit added. Total price of the product is calculated by unit price multiplied by quantity. Required
price – The unit price of the product.

sendConfirmEvent

The sendConfirmEvent function is used to confirm the products in the cart before payment is made. Parameters:

page – The name of the webpage the guest visited. Required.
orderItems – array containing a list of item_id objects to be confirmed, where item_id maps to the productId to be confirmed, for example: lineItems.map(lineitem => ({item_id:lineitem.productId}). Required

sendCheckoutEvent

The sendCheckoutEvent is used to capture the order CHECKOUT event. Parameters:

page – The name of the webpage the guest visited. Required.
orderReferenceId – The reference of the order. Required.
orderStatus – The status of the order, for example “PURCHASED”, “PAYMENT_PENDING”, “CONFIRMED”, “CANCELLED”, “REFUNDED”. Required.

sendPaymentEvent

The PAYMENT event is an optional event you can send to capture a guest’s payment method. Parameters:

page – The name of the webpage the guest visited.
paymentType – The method of payment associated with a checkout, for example “Card”, “PayPal”, “Voucher”, “Other”.

Note: Sitecore Personalize does not capture payment details, so there are no concerns with sending Personally Identifiable Information (PII) data.

sendIdentityEventByEmail

Anytime the user provides sufficient data to help identify them you can call the Identity Event. This function enables you to easily call the Identity event using the Email provider. Parameters:

page – The name of the webpage the guest visited. Required
email – The email address of the guest. Required
title – The title of the guest. Optional
firstName – The first name of the guest. Optional
lastName – The last name of the guest. Optional
gender – The gender of the guest. Optional
dob – The date of birth of the guest. Optional
mobile – The mobile number of the guest. Optional
phone – The phone number of the guest. Optional
street – The street address of the guest. Optional
city – The city address of the guest. Optional
state – The state address of the guest. Optional
country – The country address of the guest. Optional
postalCode – The postal code of the guest. Optional

sendSearchEvent

When the user searches for a product you can track this event with the sendSearchEvent which sends the captured details of the SEARCH event. Parameters:

page – The name of the webpage the guest visited.
productName – The product name the guest searched for.
productType – The product type the guest searched for.

Useful Info

Hope this is helpful!

Neil Killen

Asp.Net, C# & Sitecore MVP