Skip to main content

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 an 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#

SystemVersion
Rokt WebViewSDK1.0.0
Android Version/API Level4.3+ (API Level 18)
Package ManagerMaven / 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" }    }}
  1. 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.rokt:roktwebviewsdk:x.x.x'}
  1. 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:

WebView myWebView = new RoktWebView(activityContext);setContentView(myWebView);
  1. Load a web page

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

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

Appendix#

RoktWebViewSDK for Android is published on jCenter, the default repository used by Google. When you create a new project in Android Studio, the jcenter repository is automatically added to your top-level build.gradle file.

If for any reason the jcenter repository is missing from your project, add it to your top-level build.gradle and sync your project:

allprojects {   repositories {       google()       jcenter()   }}

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#

SystemVersion
Rokt WebViewSDK1.0.0
iOS9.0+
Package ManagerCocoaPods
  1. Add the RoktWebViewSDK pod to the pod file.
use_frameworks!pod 'RoktWebViewSDK'
  1. Add the Rokt WebView SDK to your layout.

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

CustomClass

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

import RoktWebViewSDK...var roktWKWebView = RoktWKWebView(frame: self.view.frame)
  1. Load a web page.

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

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

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:

Was this article helpful?