Last updated Nov 7, 2023

Add a placement

For Rokt partners, the Rokt SDK for React Native can be used to display overlay placements on top of your app’s content.

Before you begin

Ensure that the Rokt React Native SDK has been integrated into your application.

Overlay placements

Import the SDK

Import the SDK into your application's JavaScript/TypeScript file:

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

Execute the SDK

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

You can dictate what customer attributes are included in your Rokt integration. More information on available data fields can be found on the attributes page. If you want to integrate more attributes, you can add additional lines of code for each new attribute to the samples below.

JavaScript

const attributes = {
  email: "j.smith@example.com",
  firstname: "Jenny",
  lastname: "Smith",
  mobile: "(323) 867-5309",
  postcode: "90210",
  country: "US",
};

Rokt.execute("RoktExperience", attributes, {}, () =>
  console.log("Placement Loaded")
);

TypeScript

const attributes: Record<string, string> = {
  email: "j.smith@example.com",
  firstname: "Jenny",
  lastname: "Smith",
  mobile: "(323) 867-5309",
  postcode: "90210",
  country: "US",
};

Rokt.execute("RoktExperience", attributes, {}, () =>
  console.log("Placement Loaded");
);

note

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

Embedded placements

Import the SDK

Import the Rokt SDK into the JavaScript/TypeScript file:

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

Create a placeholder reference

Create a placeholder reference in your component:

JavaScript

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.placeholder1 = React.createRef();
    ...
  }
}

TypeScript

class MyComponent extends React.Component<MyProps, MyState> {
  constructor(props: MyProps) {
    super(props);
    this.placeholder1 = React.createRef();
    ...
  }
}

Add RoktEmbeddedView to your view

Add RoktEmbeddedView into your component's returned JSX. The Rokt embedded placement will be injected into this placeholder when the execute method is called:

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

Execute the Rokt React Native SDK

Execute the SDK at the desired point by sending the appropriate customer attributes. The Rokt placement then display after a short delay that is configurable via the Rokt platform.

You can dictate what customer attributes are included in your Rokt integration. More information on available data fields can be found on the attributes page. If you want to integrate more attributes, you can add additional lines of code for each new attribute to the samples below.

JavaScript

const placeholders = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const 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")
);

TypeScript

const placeholders: Record<string, number | null> = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const attributes: Record<string, string> = {
  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. This configuration allows you 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.