React Web Event Code Samples

the following events are available to use in the react web version of the monetate sdk metadata event imports languagedata from @personalization js sdk/common metadata event code interface languagedata { language string; } code example contextmetadata event code example import react, {useeffect} from 'react'; import personalization from "@personalization js sdk/web" import { view , text} from "web" ; import { langaugedata ,eventtypes } from '@personalization js sdk/common'; const langaugedatainitial langaugedata = { language "en gb" }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect = () => { personalizationinstance report ( eventtypes contextmetadata, {metadata langaugedatainitial} ), },\[]; return \<view> \<text> monetatesdk metadata event \</text> \</view> } export default app; screen size event imports screensizedata from @personalization js sdk/common screensize event code interface screensizedata { height number; width number; } code example contextscreensize event code example import react, {useeffect} from 'react'; import { view , text} from "web"; import { screensizedata, eventtypes} from '@personalization js sdk/common'; import personalization from "@personalization js sdk/web"; const screensizedatainitial screensizedata = { height 250; width 500; }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes contextscreensize, screensize { screensizedatainitial} ), },\[]; return \<view> \<text> monetatesdk screen size event \</text> \</view> } export default app; user agent event imports useragentdata from @personalization js sdk/common useragent event code interface useragentdata { useragent string; } code example contextuseragent event code example import react, {useeffect} from 'react'; import { view , text} from "web"; import deviceinfo from 'web device info'; import personalization from "@personalization js sdk/web" import { useragentdata, eventtypes } from '@personalization js sdk/common'; const useragentdatadatainitial useragentdata = { useragent "useragent as string" }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { const devicename = await deviceinfo getdevicename(); const useragent = `${deviceinfo getapplicationname()}/${deviceinfo getversion()}/${deviceinfo getsystemname()}/${deviceinfo getsystemversion()}/${deviceinfo getbuildnumber()}/${deviceinfo getmodel()}/${devicename}`; }; personalizationinstance report ( eventtypes contextuseragent, {useragent useragent} ), },\[]) return \<view> \<text> monetatesdk user agent event \</text> \</view> } export default app; coordinates event reports the coordinates of the customer coordinates event code interface coordinatesdata { latitude string; longitude string; } code example contextcoordinates event code example import react, {useeffect} from 'react'; import { view , text} from "web"; import personalization from "@personalization js sdk/web" import { coordinatesdata, eventtypes } from '@personalization js sdk/common'; const coordinatesinitialdata coordinatesdata = { latitude "11 2734", longitude "45 2734" }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(()=> { // for manual use personalizationinstance report ( eventtypes contextcoordinates, {coordinates coordinatesinitialdata} ), },\[]); return \<view> \<text> monetatesdk coordinate event \</text> \</view> } export default app; referrer event reports the referrer referrer event code interface referrerdata { referrer string; } code example contextreferrer event code example import react, {useeffect} from 'react'; import { view , text} from "web"; import personalization from "@personalization js sdk/web" import { referrerdata,eventtypes } from '@personalization js sdk/common'; const useragentdatadatainitial referrerdata = { referrer "refer" }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(()=> { personalizationinstance report ( eventtypes contextreferrer, { referrer referrer} ) }, \[]); return \<view> \<text> monetatesdk referrer event \</text> \</view> } export default app; context variable event imports contextvariablesdata from @personalization js sdk/common , and reports custom variables customvariables event code interface contextvariablesdata { variable string; value string; } interface customvariablesdata { customvariables array\<contextvariablesdata>; } code example contextcustomvariables event code example import {useeffect} from 'react'; import { view , text} from "web"; import personalization from "@personalization js sdk/web"; import { customvariablesdata, eventtypes } from '@personalization js sdk/common'; const customvariablesinitialdata customvariablesdata = { customvariables = \[{ variable "x", value "0 1" }] }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes contextcustomvariables, {customvariables customvariablesinitialdata} ), } \[]); return \<view> \<text> monetatesdk custom variables event \</text> \</view> } export default app; page event reports any events on the page pageevents event code interface pageeventsdata { pageevents string\[]; } code example recordpageevents event code example import react,{useeffect} from 'react'; import { view , text} from "web"; import personalization from "@personalization js sdk/web" import { pageeventsdata, eventtypes} from '@personalization js sdk/common'; const pageeventsdatainitial pageeventsdata = { pageevents \["myevent"] }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes recordpageevents, {pageevents pageeventsdatainitial} ); }, \[]); return \<view> \<text> monetatesdk page event \</text> \</view> } export default app; page view event reports when a customer views a specified page pageview event code interface pageviewdata { url string; pagetype string; categories string\[]; breadcrumbs string\[]; } code example contextpageview event code example import react, {useeffect} from 'react'; import { view , text} from "web" ; import personalization from "@personalization js sdk/web" import { pageviewdata, eventtypes } from '@personalization js sdk/common'; const pageviewdatainitial pageviewdata = { url "www monetate com"; pagetype "cart"; categories \["category"]; breadcrumbs \["breadcrumbs"]; }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(()=> { personalizationinstance report ( eventtypes contextpageview, { pageviewdatainitial} ), },\[]); return \<view> \<text> monetatesdk page view event \</text> \</view> } export default app; product thumbnail event reports when a customer views a product thumbnail productthumbnailview event code interface productthumbnailviewdata { products string\[]; } code example contextproductthumbnailview event code example import react, {useeffect} from 'react'; import { view , text} from "web" ; import personalization from "@personalization js sdk/web" import { productthumbnailviewdata,eventtypes } from '@personalization js sdk/common'; const productthumbnailviewdatainitial productthumbnailviewdata = { products \["product 1" ,product 2]; }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes contextproductthumbnailview, { productthumbnailviewdatainitial} ), },\[]); return \<view> \<text>monetatesdk product thumbnail view event \</text> \</view> } export default app; product detail view event reports when a customer views a product detail page productdetailview event code interface product { productid string; sku string; } interface productdetailviewdata { products product\[]; } code example contextproductdetailview event code example import react, {useeffect} from 'react'; import { view , text} from "web" ; import personalization from "@personalization js sdk/web" import { productdetailviewdata, eventtypes } from '@personalization js sdk/common'; const productdetailviewdatainitial productdetailviewdata = { products \[{ productid "", sku "" }] }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes contextproductdetailview, { productdetailviewdatainitial} ), },\[]); return \<view> \<text> monetatesdk page view event \</text> \</view> } export default app; recommendation clicks event reports recommendations click events recclicks event code interface recclicksdata { recclicks array\<string>; } code example recordrecclicks event code example import react, {usestate} from 'react'; import { view , text} from "web"; import personalization from "@personalization js sdk/web"; import { recclicksdata, eventtypes } from '@personalization js sdk/common'; const recclicksinitialdata recclicksdata = { recclicks \[], }; const recclickscreen = () => { const personalizationinstance = new personalization(account, user); const \[recstate, updaterecstate] = usestate(recclicksinitialdata); const handlerecclicks = (recclick string) => { updaterecstate(prevstate => { return { prevstate, recclicks \[ recstate recclicks, recclick] } }); }; const reportrecclicks = () => { personalizationinstance report( eventtypes recordrecclicks, {recclicks recstate recclicks} ), } return \<view> \<view> \<touchablenativefeedback onpress={() => handlerecclicks("sjscjcffuedscldm")}> // show list of products \<image src={// enter image source }/> \<text> {// show title}\</text> \</touchablenativefeedback> \</view> \<button title = "report clicks" onpress ={()=>reportrecclicks() }/> \</view> } export default recclicksscreen; recommendation impressions event reports recommendations impression events recimpressions event code interface recclicksdata { recimpressions array\<string>; } code example recordrecimpressions event code example import react, {usestate} from 'react'; import { view, text, image, touchablenativefeedback, button } from 'web'; import personalization from "@personalization js sdk/web"; import { recclicksdata, eventtypes } from '@personalization js sdk/common'; const recimpressionsdatainitial recimpressionsdata = { recimpressions \[], }; const recimpressionsscreen = () => { const personalizationinstance = new personalization(account, user); const \[recstate, updaterecstate] = usestate(recimpressionsdatainitial); const handlerecrecimpressions = (recimpressions string) => { updaterecstate(prevstate => { return { prevstate, recimpressions \[ recstate recimpressions, recimpressions] } }); }; const reportrecimpressions = () => { personalizationinstance report( eventtypes recordrecimpressions, {recimpressions recstate recimpressions} ), } return \<view> \<view> \<touchablenativefeedback onpress={() => handlerecimpressions("sjscjcffffkdfnkduedscldm")}> // show list of products \<image src={// enter image source }> \<text> {// show title}\</text> \</touchablenativefeedback> \</view> \<button title = "report impressions" onpress ={()=>reportrecimpressions() }/> \</view> } export default recimpressionsscreen; impressions event reports impression events impressions event code interface impressionsdata { impressionids array\<string>; } code example recordimpressions event code example import react, {useeffect} from 'react'; import { view , text} from "web" ; import personalization from "@personalization js sdk/web" import { impressionsdata, eventtypes } from '@personalization js sdk/common'; const impressionsdatainitial impressionsdata = { impressionids \["1","2","3"] // array of strings impression ids is required }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes recordimpressions, {impressionids impressionsdatainitial} ), } ,\[]); return \<view> \<text> monetatesdk impression event \</text> \</view> } export default app; add to cart event reports when a customer adds a product to their cart import and use the cartlinesdata interface for this event cartline is the data structure used by this interface cartlines event code interface cartline { sku string; pid string; quantity number; currency string; value string; } interface cartlinesdata { cartlines array\<cartline>; } code example contextcart event code example import react,{ usestate, useeffect} from 'react'; import personalization from "@personalization js sdk/web" import { cartdata, eventtypes } from '@personalization js sdk/common'; import { view , text} from "web" ; const cartlinesinitialdata cartdata = { cartlines \[] }; const app = () => { const \[cartstate, updatecartstate] = usestate(cartlinesinitialdata); const personalizationinstance = new personalization(account, user); useeffect = () => { addtocartitemsdetails { sku "t shirt", pid "1", quantity 1, currency "usd", value "30" } updatecartstate(prevstate => { return { prevstate, cartlines \[ updatecartstate cartlines, addtocartitemsdetails] } }); } const reportaddtocart = () => { personalizationinstance report( eventtypes contextcart, { cartlines \[ this state cartstate] } ), } return \<view> \<view> // product details \</view> \<button title = "add to cart " onpress ={()=>reportaddtocart() }/> \</view> } export default app; purchase event reports when a customer purchases products import and use the purchasedata interface for this event purchaseline is the data structure used by this interface purchaselines event code interface purchaseline { sku string; pid string; quantity number; currency string; value string; } interface purchasedata { account? string; domain? string; instance? string; purchaseid string; purchaselines purchaseline\[]; } code example contextpurchase event code example import {useeffect} from 'react'; import { view , text} from "web" ; import personalization from "@personalization js sdk/web" import { purchasedata, eventtypes } from '@personalization js sdk/common'; const purchasedatainitial purchasedata = { account "monetate", domain "localhost", instance "p", purchaseid "abc1c", purchaselines \[{ sku "t shirt", pid "0302", quantity "1", currency "usd", value "23", }] }; const app = () => { const personalizationinstance = new personalization(account, user); useeffect(() => { personalizationinstance report ( eventtypes contextpurchase, { purchasedatainitial} ), }, \[]); return \<view> \<text> monetate sdk purcahse event \</text> \</view> } export default app; decision event this event doesn't need to be created the sdk automatically creates a decision event when you use the sdk methods method and pass a requestid as a string