Rokt Documentation
  • Documentation
  • User Guide
  • SDK
  • API
  • Third-Party Integrations
  • Help

›Integrating the SDK

Getting Started

  • Introduction

Web SDK

  • Overview
  • Architecture
  • Integrating the Web SDK
  • Integration Examples

    • Confirmation Page Integration
    • Preparative Iframe
    • Page Identifier
    • Single Page Applications
    • Brand Conversion Integration
    • In Transaction/Cart Integration
    • Event-based Integration
    • Sandbox Integration
  • Integration Best Practices
  • Attributes
  • Security
  • Mobile In-App Web Pages
  • API

    • README
    • Globals

    Enumerations

    • FailureReason

    Interfaces

    • Attributes
    • Cart
    • CartItem
    • PlacementCloseEvent
    • Rokt
    • RoktConfiguration
    • Widget

iOS SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration
  • Attributes
  • Security

Android SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security

React Native SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security
Edit

Integrating and Initializing the SDK

The Rokt SDK for React Native Applications can be used by Rokt Partners to display overlay or embedded placements or by Rokt Brands to record conversions for their campaigns. All use cases of the SDK will follow the same initial steps to integrate and initialize the SDK in-app. At a high level, these steps are:

  1. Initialize the SDK into your React Native App
  2. Setting up the Android Configuration
  3. Setting up the iOS Configuration
  4. Initializing the Rokt SDK

Following these steps, the execute method of the SDK can then be used in various ways to suit the required use case.

Step 1: Integrate the SDK into your React Native App

To integrate the SDK into your React Native app, you can will need to:

  1. Run the following command to install the Rokt SDK:

    $ npm install @rokt/react-native-sdk --save
    
  2. Run the following command to install the packages and dependencies:

    $ npm install
    

Step 2: Setting up the Android Configuration

To configure the Rokt React Native SDK for Android applications, you will need to:

  1. Add the Rokt SDK into your Maven Repository:
allprojects {
    repositories {
        ...
        maven {
            url  "https://rokt-eng-us-west-2-mobile-sdk-artefacts.s3.amazonaws.com"
        }
    }
}
  1. In your ReactApplication class, make sure you add the RoktEmbeddedViewPackage to the getPackages method:
       @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();

          //Add the RoktEmbeddedViewPackage
          packages.add(new RoktEmbeddedViewPackage());
          return packages;
        }
  1. Check that multiDexEnabled is True and you are targeting Mind SDK version 18 or higher:
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 18
    }
}

Step 3: iOS Configuration

To configure the Rokt React Native SDK for iOS applications, go to the iOS folder and run the command:

cd ios && pod install

Step 4: Initialize the SDK

The Rokt Module provides two methods:

  • Initialize(string ROKT_TAG_ID, string AppVersion)
  • Execute(string TemplateVersion, object UserAttributes, object placements, function onLoad)

The initialize method will fetch API results that are required by the execute method. Therefore it’s best to not put both calls immediately next to each other. It is recommended to call the Initialize method within the first few views of the app. To initialize the SDK, you will need to:

  1. Import the Rokt SDK into the JS file:
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
  1. Initialize the Rokt SDK:
// The following will reveal a demo integration. To view your integration:
// 1) Replace the integration test tag ID (222) with your unique Rokt Tag ID 
// 2) Replace Y.Y.Y with the application version 

Rokt.initialize( "222" , "Y.Y.Y");

The subsequent steps will depend on the use case of the integration. More details can be found here:

  • Launching an Overlay Placement
  • Launching an Embedded Placement
  • Recording a Brand Conversion
← VersionLaunching an Overlay Placement →
  • Step 1: Integrate the SDK into your React Native App
  • Step 2: Setting up the Android Configuration
  • Step 3: iOS Configuration
  • Step 4: Initialize the SDK
RESOURCES
DocumentationUser GuideSDKAPIIntegration PartnersHelp
COMPANY
About UsContact UsCareersEngineering Blog
Rokt Documentation
Copyright © Rokt 2021 - All Rights Reserved