Last updated Oct 24, 2023

Mobile in-app web pages

Rokt provides a number of SDK integration solutions that enable partners to integrate the Rokt technology into their website or mobile application. This includes the Rokt Web SDK for browser-based integrations and the Rokt iOS SDK and Rokt Android SDK for native mobile integrations. However, when browser and mobile technologies are combined, there are some special considerations to account for.

When web pages are rendered inside a mobile application, the Web SDK remains the primary point of integration. In this scenario, the Web SDK renders the appropriate Rokt placements and offers on the web page just as it would in a mobile or desktop browser environment. However, special consideration within the integration is needed for how traffic links are opened in a mobile app environment to ensure an optimal user experience.

The Rokt WebView SDK, a small extension to common WebView technologies in iOS and Android, works with the Web SDK to ensure that all traffic links from a Rokt placement are successfully opened in the device’s default browser instead of disrupting the customer’s expected navigation flow. The WebView SDK only adjusts the behavior of how traffic links are opened, without affecting the behavior of any other aspect of the host application or website. This results in a seamless customer flow in-app, ensuring the customer can successfully open a link after opting in to an offer.

How does the Rokt WebView SDK work?

The WebView SDK works by altering the user agent of the browser so that Rokt can identify when a placement has been rendered on a web page inside a mobile app. Rokt then modifies the link-opening behavior so that traffic links are opened in the default browser of the device.

Note that the Rokt WebView SDK is not the primary Rokt integration but a small update to the WebView technology that is already in use within mobile applications. The Rokt Web SDK is the primary integration with Rokt while the Rokt WebView SDK ensures that traffic links are opened appropriately from within the app.

The WebView SDK can be implemented in mobile applications that are using the following technologies:

• WKWebView for iOS
• Android WebView for Android

Android applications

The instructions assume that you are replacing the Android WebView with the Rokt WebView. The exact approach depends on whether or not the WebView is initialized programmatically.

Versions

System	Version
Rokt WebViewSDK	1.0.0
Android Version/API Level	4.3+ (API Level 18)
Package Manager	Maven / Gradle

1. Add the Add the JitPack maven repository to the list of repositories in the build.gradle file for the project.

 // file => build.gradle (Project: ....)

allprojects {
    repositories {
        google()
        maven { url "https://jitpack.io" }
    }
}

2. Add the Rokt WebView SDK.

   Open the build.gradle file for your app module and add the roktwebviewsdk library to the dependencies section. Note that x.x.x should be replaced by the most recent Rokt WebView SDK.

dependencies {
   ``` implementation 'com.github.ROKT:rokt-webview-sdk-android:x.x.x' ```
}

3. Add the Rokt WebView SDK to your layout.

   In your layout file, replace references to webView with roktWebView.

   Replace:

<?xml version="1.0" encoding="utf-8"?>
  <WebView
      android:id="@+id/webView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

With:

<?xml version="1.0" encoding="utf-8"?>
  <com.rokt.roktwebviewsdk.RoktWebView
      android:id="@+id/webView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

Alternatively, the WebView SDK can be added programmatically in onCreate(). For example:

Java

val myWebView = RoktWebView(activityContext)
setContentView(myWebView)

Kotlin

WebView myWebView = new RoktWebView(activityContext);
setContentView(myWebView);

4. Load a web page

To load a web page in the roktWebView, use loadUrl().

Java

val myWebView: RoktWebView = findViewById(R.id.webview)
myWebView.loadUrl("https://www.rokt.com")

Kotlin

WebView myWebView = (RoktWebView) findViewById(R.id.webview);
myWebView.loadUrl("https://www.rokt.com");

iOS applications

The instructions below assume that you are replacing the WKWebView for iOS with the Rokt WebView. The exact approach depends on whether or not the WebView is initialized programmatically.

Versions

System	Version
Rokt WebViewSDK	2.0.0
iOS	14.0+
Package Manager	CocoaPods

1. Add the RoktWebViewSDK pod to the pod file.

use_frameworks!
pod 'RoktWebViewSDK'

2. Add the Rokt WebView SDK to your layout.

   In your Storyboard, replace WKWebView with the RoktWKWebView custom class.

Alternatively, the Rokt WebView SDK can be added programmatically in your code. For example:

Swift

import RoktWebViewSDK
...
var roktWKWebView = RoktWKWebView(frame: self.view.frame)

Objective-C

#import <RoktWebViewSDK/RoktWebViewSDK-Swift.h>
...
RoktWKWebView *roktWKWebView = [[RoktWKWebView alloc] initWithFrame:self.view.frame];

3. Load a web page.

To load a web page in the RoktWKWebView, use load()for Swift orloadRequest() for Objective-C.

Swift

roktWKWebView.load(URLRequest(url: URL(string: "https://www.rokt.com")!))

Objective-C

NSURL *nsurl=[NSURL URLWithString:@"https://www.rokt.com"];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];
[roktWKWebView loadRequest:nsrequest];

Appendix

The Rokt WebViewSDK for iOS is deployed using CocoaPods. CocoaPods is a dependency manager for iOS, supports Swift, and Objective-C. The step-by-step guide assumes that you are familiar with CocoaPod and know how to install a Pod for iOS development. If not, please refer to CocoaPod's documentation. To set up a workspace, you can follow this tutorial.

Security and performance

The SDKs for iOS and Android are both very simple and lightweight, meaning that they have minimal impact on the overall performance of an application. In addition, since the only impact of the WebView SDK is to alter the user agent, there should be no impact to any behavior outside of the link-opening behavior from Rokt placements.

To help satisfy any questions and concerns, the WebView SDKs for both iOS and Android are open source.

You can inspect the details of each SDK on GitHub:

• Rokt WebView SDK for iOS
• Rokt WebView SDK for Android