Event Code Samples
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;
}
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;
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;
}
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;
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;
}
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;
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;
}
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;
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;
}
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;
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>;
}
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;
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[];
}
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;
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[];
}
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;
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[];
}
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;
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[];
}
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;
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>;
}
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;
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>;
}
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;
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>;
}
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;
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>;
}
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;
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[];
}
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;
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;
﻿
Code Example
ContextClosedSession Event Code Example
import  {useEffect} from 'react';
import { View , Text} from "web" ;
import Personalization from "@personalization-js-sdk/web"
import { closedSession, EventTypes } from '@personalization-js-sdk/common';

const ClosedSessionDataInitial : ClosedSessionData = {
  // You can add any key value pair within Closed Sessions as per your needs
  closedSession: { account_id: 123,
  has_cart: "t", 
  has_purchase: "f", ...}
};

const App = () => {   
  const PersonalizationInstance = new Personalization(account, user);
    
  useEffect (() => {
  PersonalizationInstance.report (
    EventTypes.ContextClosedSession, {...ClosedSessionDataInitial}
  ),
  }, []);
     
  return <View>
    <Text>Monetate SDK Purcahse Event.</Text>
  </View>
}

export default App;
import  {useEffect} from 'react';
import { View , Text} from "web" ;
import Personalization from "@personalization-js-sdk/web"
import { closedSession, EventTypes } from '@personalization-js-sdk/common';

const ClosedSessionDataInitial : ClosedSessionData = {
  // You can add any key value pair within Closed Sessions as per your needs
  closedSession: { account_id: 123,
  has_cart: "t", 
  has_purchase: "f", ...}
};

const App = () => {   
  const PersonalizationInstance = new Personalization(account, user);
    
  useEffect (() => {
  PersonalizationInstance.report (
    EventTypes.ContextClosedSession, {...ClosedSessionDataInitial}
  ),
  }, []);
     
  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 getActions﻿ method and pass a requestID as a string.
Updated 22 Oct 2024
SDK Event Details
React Native Event Code Samples