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 |
- 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" }
}
}
Add the Rokt WebView SDK.
Open the
build.gradle
file for your app module and add theroktwebviewsdk
library to the dependencies section. Note thatx.x.x
should be replaced by the most recent Rokt WebView SDK.
dependencies {
``` implementation 'com.github.ROKT:rokt-webview-sdk-android:x.x.x' ```
}
Add the Rokt WebView SDK to your layout.
In your layout file, replace references to
webView
withroktWebView
.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
- Kotlin
val myWebView = RoktWebView(activityContext)
setContentView(myWebView)
WebView myWebView = new RoktWebView(activityContext);
setContentView(myWebView);
- Load a web page
To load a web page in the roktWebView
, use loadUrl()
.
- Java
- Kotlin
val myWebView: RoktWebView = findViewById(R.id.webview)
myWebView.loadUrl("https://www.rokt.com")
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 |
- Add the
RoktWebViewSDK
pod to the pod file.
use_frameworks!
pod 'RoktWebViewSDK'
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
- Objective-C
import RoktWebViewSDK
...
var roktWKWebView = RoktWKWebView(frame: self.view.frame)
#import <RoktWebViewSDK/RoktWebViewSDK-Swift.h>
...
RoktWKWebView *roktWKWebView = [[RoktWKWebView alloc] initWithFrame:self.view.frame];
- Load a web page.
To load a web page in the RoktWKWebView, use load()
for Swift orloadRequest()
for Objective-C.
- Swift
- Objective-C
roktWKWebView.load(URLRequest(url: URL(string: "https://www.rokt.com")!))
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: