Edit

Launching an Embedded Placement

The Rokt SDK for React Native can be used to display a Rokt placement embedded in your app’s content. These instructions assume that the Rokt SDK for React Native has already been integrated into your application by following steps 1 to 4 here.

Step 5: Import the Rokt SDK into the JS file

Import the Rokt SDK into the JS file:

import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";

Step 6: Create a placeholder reference

Create a placeholder reference in your JS file:

 constructor(props){
    super(props);
    this.placeholder1 = React.createRef();
  }

Step 7: Add RoktEmbeddedView into your view

Add the RoktEmbeddedView into render(). The Rokt Embedded placement will be injected into this placeholder once the execute method is called:

<RoktEmbeddedView ref={this.placeholder1} placeholderName={"RoktEmbedded1"} ></RoktEmbeddedView>

Step 8: Execute the Rokt React Native SDK

Execute the SDK at the desired point by passing the appropriate consumer attributes. The Rokt Placement will then display after a short delay that is configurable via the Rokt platform.

Your app dictates which consumer attributes are passed through to Rokt. More information on the data fields that are able to be passed through the SDK can be found under the Attributes section. You can add additional code lines into the below sections containing consumer attributes in order to build up the data package that will be sent through to Rokt.

placeholders = {
      "RoktEmbedded1": findNodeHandle(this.placeholder1.current)
}

attributes = {
      "email": "j.smith@example.com",
      "firstname": "Jenny",
      "lastname": "Smith",
      "mobile": "(323) 867-5309",
      "postcode": "90210",
      "country": "US"
}
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders,  () => console.log("Placement Loaded"));

Note: The ViewName (“RoktEmbeddedExperience”) can be modified when executing the SDK in multiple locations in order to display a different experience according to the context of where in the app the SDK is being executed. If modifying the ViewName, please work with the Rokt team to ensure matching adjustments are made within the Rokt System.

Step 9: Build & Run