React Native Event Code Samples

The following events are available to use.

Metadata Event

Imports LanguageData from @kibo-personalization-js-sdk/common.

interface LanguageData {
    language: string;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  LangaugeData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const LangaugeDataInitial: LangaugeData = {
  language: "en-GB"
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect = () =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextMetadata,
      {
        metadata: LangaugeDataInitial
      }
    ),
  }, [])
return <View>
    <Text> KIBO SDK Metadata Event. </Text> 
  </View>
}
export default App;

Screen Size Event

Imports ScreenSizeData from @kibo-personalization-js-sdk/common.

interface ScreenSizeData {
    height: number;
    width: number;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import
{
  ScreenSizeData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';
import KiboPersonalization from "@kibo-personalization-js-sdk/web"

const ScreenSizeDataInitial: ScreenSizeData = {
  height: 250;
  width: 500;
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    // "auto" in event data parameter  will automatically calulate and send the screen size data.
    kiboPersonalizationInstance.report(
        EventTypes.ContextScreenSize, 'auto'
      ),

      // for manually.
      kiboPersonalizationInstance.report(
        EventTypes.ContextScreenSize, screenSize:
        {
          ...ScreenSizeDataInitial
        }
      ),
  }, []);

  return <View>
    <Text> KIBO SDK ScreenSize Event. </Text> 
    </View>
}
export default App;

User Agent Event

Imports UserAgentData from @kibo-personalization-js-sdk/common.

interface UserAgentData {
    userAgent: string;
}

Example usage:

import React, {useEffect} from 'react';
import { View , Text} from "react-native";
import DeviceInfo from 'react-native-device-info';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"
import { UserAgentData, EventTypes } from '@kibo-personalization-js-sdk/common';

const UserAgentDataDataInitial : UserAgentData = {
  userAgent: "userAgent as string"
};

const App = () => {  
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap); 
    
  useEffect(() => {
    const deviceName = await DeviceInfo.getDeviceName();
    const userAgent = `${DeviceInfo.getApplicationName()}/${DeviceInfo.getVersion()}/${DeviceInfo.getSystemName()}/${DeviceInfo.getSystemVersion()}/${DeviceInfo.getBuildNumber()}/${DeviceInfo.getModel()}/${deviceName}`;
  };   
  kiboPersonalizationInstance.report (
    EventTypes.ContextUserAgent, {userAgent: userAgent} 
  ),
},[])
  
  return <View>
      <Text> KIBO SDK User Agent event.</Text>
    </View> 

export default App;

Coordinates Event

Reports the coordinates of the user.

interface CoordinatesData {
    latitude: string;
    longitude: string;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  CoordinatesData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const CoordinatesInitialData: CoordinatesData = {
  latitude: "11.2734",
  longitude: "45.2734"
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    // "auto" in event data parameter  will automatically calulate and send the Coordinates data to engine API.
    kiboPersonalizationInstance.report(
        EventTypes.ContextCoordinates, 'auto'
      ),

      // for manually use  
      kiboPersonalizationInstance.report(
        EventTypes.ContextCoordinates,
        {
          coordinates: CoordinatesInitialData
        }
      ),
  }, []);

  return <View>
    <Text> KIBO SDK Coordinate event. </Text> 
    </View>
}
export default App;

Referrer Event

Reports the referrer.

interface ReferrerData {
    referrer: string;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import
{
  ReferrerData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";

const UserAgentDataDataInitial: ReferrerData = {
  referrer: "refer"
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextReferrer, 'auto'
    )

    // for manually case
    kiboPersonalizationInstance.report(
      EventTypes.ContextReferrer,
      {
        referrer: referrer
      }
    )
  }, []);

  return <View>
    <Text> KIBO SDK Referrer event. </Text>
    </View>
}
export default App;

Context Variable Event

Imports ContextVariablesData from @kibo-personalization-js-sdk/common, and reports custom variables.

interface ContextVariablesData {
    variable: string;
    value: string;
}


interface CustomVariablesData {
    customVariables: Array<ContextVariablesData>;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  CustomVariablesData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const customVariablesInitialData: CustomVariablesData = {
  customVariables = [
  {
    variable: "x",
    value: "0.1"
  }]
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextCustomVariables,
      {
        customVariables: customVariablesInitialData
      }
    ),
  }.[]);

  return <View>
    <Text> KIBO SDK Custom Variables Event. </Text>
    </View>
}
export default App;

Page Event

Reports any events on the page.

interface PageEventsData {
    pageEvents: string[];
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  PageEventsData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const PageEventsDataInitial: PageEventsData = {
  pageEvents: ["MyEvent"]
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.RecordPageEvents,
      {
        pageEvents: PageEventsDataInitial
      }
    );
  }, []);

  return <View>
    <Text> KIBO SDK Page Event </Text>
    </View>
}
export default App;

Page View Event

Reports when a user views a specified page.

interface PageViewData {
    url: string;
    pageType: string;
    categories: string[];
    breadcrumbs: string[];
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  PageViewData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const PageViewDataInitial: PageViewData = {
  url: "www.monetate.com";
  pageType: "cart";
  categories: ["category"];
  breadcrumbs: ["breadcrumbs"];
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextPageView,
      {
        ...PageViewDataInitial
      }
    ),
  }, []);

  return <View>
    <Text> KIBO SDK Page View Event </Text>
    </View>
}
export default App;

Product Thumbnail Event

Reports when a user views a product thumbnail.

interface ProductThumbnailViewData {
    products: string[];
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  ProductThumbnailViewData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const ProductThumbnailViewDataInitial: ProductThumbnailViewData = {
  products: ["product-1", Product - 2];
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextProductThumbnailView,
      {
        ...ProductThumbnailViewDataInitial
      }
    ),
  }, []);

  return <View>
    <Text> KIBO SDK Product Thumbnail View Event </Text>
    </View>
}
export default App;

Product Detail View Event

Reports when a user views a product detail page.

interface Product {
    productId: string;
    sku: string;
}

interface ProductDetailViewData {
    products: Product[];
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  ProductDetailViewData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const ProductDetailViewDataInitial: ProductDetailViewData = {
  products: [
  {
    productId: "",
    sku: ""
  }]
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextProductDetailView,
      {
        ...ProductDetailViewDataInitial
      }
    ),
  }, []);

  return <View>
    <Text> KIBO SDK Product Detail View Event </Text>
    </View>
}
export default App;

Recommendation Clicks Event

Reports recommendation click events.

interface RecClicksData {
    recClicks: Array<string>;
}

Example usage:

import React,
{
  useEffect,
  useState
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  RecClicksData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const RecClicksInitialData: RecClicksData = {
  recClicks: [],
};

const RecClickScreen = () =>
  {
    const kiboPersonalizationInstance = new KiboPersonalization(account, user, ContextMap);
    const [recState, updateRecState] = useState(RecClicksInitialData);

    const handleRecClicks = (recClick: string) =>
    {
      updateRecState(prevState =>
      {
        return {
          ...prevState,
          recClicks: [...recState.recClicks, recClick]
        }
      });
    };

    const reportRecClicks = () =>
    {
      kiboPersonalizationInstance.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 recommendation impression events.

interface RecClicksData {
     recImpressions: Array<string>;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  RecClicksData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const RecImpressionsDataInitial: RecImpressionsData = {
  recImpressions: [],
};

const RecImpressionsScreen = () =>
  {
    const kiboPersonalizationInstance = new KiboPersonalization(account, user, ContextMap);
    const [recState, updateRecState] = useState(RecImpressionsDataInitial);

    const handleRecrecImpressions = (recImpressions: string) =>
    {
      updateRecState(prevState =>
      {
        return {
          ...prevState,
          recImpressions: [...recState.recImpressions, recImpressions]
        }
      });
    };

    const reportRecImpressions = () =>
    {
      kiboPersonalizationInstance.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.

interface ImpressionsData {
    impressionIds: Array<string>;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  ImpressionsData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const ImpressionsDataInitial: ImpressionsData = {
  impressionIds: ["1", "2", "3"] // Array of strings Impression IDs is required
};

const App = () =>
{
  const kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.RecordImpressions,
      {
        impressionIds: ImpressionsDataInitial
      }
    ),
  }, []);

  return <View>
    <Text> KIBO SDK Impression Event </Text>
    </View>
}
export default App;

Add to Cart Event

Reports when a user adds an item to their cart. Import and use the CartLinesData interface for this event. CartLine is the data structure used by this interface.

interface CartLine {
    sku: string;
    pid: string;
    quantity: number;
    currency: string;
    value: string;
}

interface CartLinesData {
    cartLines: Array<CartLine>;
}

Example usage:

import React,
{
  useState,
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  CartLinesData,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

const CartLinesInitialData: CartLinesData = {
  cartLines: []
};

const App = () =>
{
  const [CartState, updateCartState] = useState(CartLinesInitialData);

  useEffect = () =>
  {
    AddToCartItemsDetails:
    {
      sku: "T-shirt",
      pid: "1",
      quantity: 1,
      currency: "usd",
      value: "30"
    }
    updateCartState(prevState =>
    {
      return {
        ...prevState,
        cartLines: [...updateCartState.cartLines, AddToCartItemsDetails]
      }
    });
  }
  const reportAddToCart = () =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextCart,
      {
        cartLines: [...this.state.CartState]
      }
    ),
  }

  return <div>
    <View>
    /* Product Details... */
    </View>
    <Button title = "Add to cart " onPress ={()=>reportAddToCart() }/>
    </View>
}
export default App;

Purchase Event

Reports when a user purchases items. Import and use the PurchaseData interface for this event. PurchaseLine is the data structure used by this interface.

interface PurchaseLine {
    sku: string;
    pid: string;
    quantity: number;
    currency: string;
    value: string;
}


interface PurchaseData {
    account?: string;
    domain?: string;
    instance?: string;
    purchaseId: string;
    purchaseLines: PurchaseLine[];
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  PurchaseData,
  EventTypes
}
from '@kibo-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 kiboPersonalizationInstance = new KiboPersonalization(account, user, contextMap);

  useEffect(() =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextPurchase,
      {
        ...PurchaseDataInitial
      }
    ),
  }, []);

  return <View>
    <Text> KIBO SDK Purcahse Event. </Text>
    </View>
}
export default App;

Closed Session Event

Imports ClosedSessionData from @kibo-personalization-js-sdk/common.

interface ClosedSessionData {
    closedSession?: object;
}

Example usage:

import React,
{
  useEffect
}
from 'react';
import KiboPersonalization from "@kibo-personalization-js-sdk/react-native"; 
import { View , Text} from "react-native";
import
{
  closedSession,
  EventTypes
}
from '@kibo-personalization-js-sdk/common';

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

const App = () =>
{
  useEffect = () =>
  {
    kiboPersonalizationInstance.report(
      EventTypes.ContextClosedSession,
      {
        ...ClosedSessionDataInitial
      }
    ),
  }
  return <View>
    <Text> KIBO SDK Purcahse Event </Text>
    </View>
}
export default App;

Decision Event

This event does not need to be created. Pass a requestID as a string in a call to the getActions method and the SDK automatically creates a decision event.