Introduction
Hybrid apps combine native views and HTML content. If you have a hybrid app, you can track in-app events by calling AppsFlyer's SDK API using Javascript.
This guide explains how to bridge the gap between the HTML view and the native view, effectively allowing you to track in-app events from HTML or web view.
Example
You have a hybrid app that offers subscriptions. You implement the subscription form in a web view which actually loads from your website.
You can track the subscription in-app event in the web view and send data related to it (such as type of subscription, price etc.) to the native code.
The native code collects the data and uses AppsFlyer's SDK to send the subscription in-app event.
Tracking In-App Events in Hybrid Apps
In this guide we provide two methods for tracking in-app events in hybrid apps:
Native Javascript Interface
The native javascript method is the recommended one. It uses the native javascript interface in order to establish communication between the HTML or web view and the native code.
This way you can send in-app event related data from the web view to the native code. Once the native code obtains the data it sends it to AppsFlyer using AppsFlyer's SDK.
URL Loading Method
In the url loading method, the native code listens to url loading events.
You can set the native code to listen to loading events of specific urls and extract data from the url parameters. The data is then is passed to AppsFlyer's SDK.
Rich In-App Events
Rich in-app events give you comprehensive data about user activity. You can use this data to determine the value and quality of your users, as well as determine the success of your campaigns.
You can use rich in-app events in hybrid apps as well. It's only a matter of formatting the event data according to requirements. To learn more, see our guide on rich in-app events.
Both Android and iOS have native Javascript interfaces that allow web views to call native code.
- Android - JavascriptInterface
- iOS - JavaScriptCore
There are several advantages for using the native Javascript interface over URL loading:
- It doesn't require implementing logic that tracks URL loading
- Native interfaces are preferable to other implementations
- There is no need to parse parameters from the URL
- There is less code and therefore less maintenance required
The implementation below consists of two steps:
- HTML code for webview or webpage
- Native code implementation for webview
Android
HTML Code for Android
Add the following HTML code to the web view or web page:
<h1>Tracking From Web View</h1>
<div id="main">
<button id="trackEvent" onclick="trackEvent()"> Track Event </button>
</div>
<script type="text/javascript">
function trackEvent(){
var eventName = "af_purchase"
var eventParams = "{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}";
app.trackEvent(eventName, eventParams)
}
</script>
Web Activity Class
Create a web activity class with the following code:
public class WebActivity extends AppCompatActivity {
WebView web;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
web = (WebView) findViewById(R.id.webView);
web.getSettings().setJavaScriptEnabled(true);
web.addJavascriptInterface(new MainJsInterface(getApplicationContext()), "app");
web.loadUrl("https://yourwebsite.com");
}
}The code above creates an object called app that acts as the bridge between the web view and the native code.
Javascript Interface Class
Create a MainJsInterface class to implement trackEvent() as JavascriptInterface
public class MainJsInterface {
Context mContext;
MainJsInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void trackEvent(String name, String json){
Map<String, Object> params = null;
if(json!=null) {
try {
JSONObject jsonObject = new JSONObject(json);
params = new HashMap<>();
Iterator keys = jsonObject.keys();
while (keys.hasNext()) {
String key = keys.next();
Object value = jsonObject.opt(key);
params.put(key, value);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
AppsFlyerLib.getInstance().trackEvent(this.mContext, name, params);
}
}
The code above declares a trackEvent method that can be called in the web view using Javascript.
app.trackEvent(eventName, eventParams). Recall that we set app to act as the bridge between the web view and native code. This is why app can call the trackEvent method that we define in MainJsInterface class.iOS
HTML Code for iOS
Add the following HTML code to the web view or web page:
<body>
<h1>Tracking From Web View</h1>
<div id="main">
<button id="trackEvent" onclick="trackEvent()"> Track Event </button>
</div>
<script type="text/javascript">
function trackEvent(){
var eventName = "af_purchase"
var eventParams = "{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}";
webkit.messageHandlers.event.postMessage(eventName + "+" + eventParams);
}
</script>
</body>The code above sets a function to be triggered when a button is clicked. The function sets the eventName and eventParams variables and passes them to the native code using webkit.messageHandlers.
Note
The HTML code is for both Objective C and Swift
Objective C
Web View Controller
In your web view controller, add the following code in the view controller.
-(void)loadView{
[super loadView];
WKWebViewConfiguration *configuration =
[[WKWebViewConfiguration alloc] init];
[configuration.userContentController
addScriptMessageHandler:self name:@"event"];
_webView = [[WKWebView alloc] initWithFrame:self.view.frame
configuration:configuration];
[self.view addSubview:_webView];
}
- (void)viewDidLoad {
[super viewDidLoad];
NSString* page = @"https://yourwebsite.com";
NSURL *url = [NSURL URLWithString:page];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_webView loadRequest:request];
}
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
NSString* messageBody = message.body;
NSString* eventName = [messageBody componentsSeparatedByString:@"+"][0];
NSString* eventValue = [messageBody componentsSeparatedByString:@"+"][1];
[self trackEvent:eventName eventValue:eventValue];
}
- (void)trackEvent:(NSString*)eventName eventValue:(NSString*)eventValue{
NSData *eventValuedata = [eventValue dataUsingEncoding:(NSUTF8StringEncoding)];
NSDictionary *eventValueDict = [NSJSONSerialization JSONObjectWithData:eventValuedata options:NSJSONReadingMutableContainers error:nil];
[[AppsFlyerTracker sharedTracker] trackEvent:eventName withValues:eventValueDict];
}The code above receives the message from the web view. The message contains the event name and event value. When the code detects the incoming message, it passes it on to the trackEvent method which parses the values and calls the AppsFlyer's SDK trackEvent method.
Swift
Web View Contoller
In your web view controller, add the following code in the viewDidLoad method.
import WebKit
import UIKit
import AppsFlyerLib
import JavaScriptCore
class JSViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
let messageBody = message.body as? String
let eventName = messageBody?.components(separatedBy: "+")[0]
let eventValue = messageBody?.components(separatedBy: "+")[1]
trackEvent(eventName: eventName!, eventValue: eventValue!)
}
var webView: WKWebView!
override func loadView(){
webView = WKWebView()
webView.navigationDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let url = URL(string: "https://yourwebsite.com")!
webView.load(URLRequest(url: url))
webView.configuration.userContentController.add(self, name:"event")
}
func trackEvent(eventName: String, eventValue: String) {
var eventValueDict = [String: String]()
let eventValuesData = eventValue.data(using: String.Encoding.utf8)
do {
eventValueDict = try (JSONSerialization.jsonObject(with: eventValuesData!, options:[]) as? [String: String])!
} catch let error as NSError{
print(error)
}
AppsFlyerTracker.shared().trackEvent(eventName as String?, withValues: eventValueDict)
}
}The code above receives the message from the web view. The message contains the event name and event value. When the code detects the incoming message, it passes it on to the trackEvent method which parses the values and calls the AppsFlyer's SDK trackEvent method.
Both Android and iOS implement a native method that listens to url loading events. This method enables you to do the following:
- Listen to a loading event of a specific url
- Extract parameters that are appended to the url
- Use these parameters in native code
The implementation below consists of two steps:
- HTML code for webview or webpage
- Native code implementation for URL loading
Webview Implementation
HTML Code (for both Android WebView and iOS UIWebview)
<html>
<head>
</head>
<body>
<h1>Tracking From Web View</h1>
<div id="main">
<input id="button" type="button" value="Track Event" />
</div>
<script type="text/javascript">
function trackEvent(eventName,eventValue){
var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "af-event://inappevent?eventName="+eventName+"&eventValue="+eventValue);
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
}
var button = document.getElementById("button");
button.onclick = function(event) {
var eventName = "af_purchase";
var eventValue = "{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}";
trackEvent(eventName, eventValue);
}
</script>
</body>
</html>The code above sets a function to be triggered when a button is clicked. The function itself creates an iframe element that loads a custom URL. It is this URL loading that triggers the native Android or iOS method that then calls AppsFlyer's SDK trackEvent method.
All the required parameters (event name and event values) are appended to the URL. The Android and iOS code examples below demonstrate how to extract these parameters and pass them to AppsFlyer's SDK trackEvent method.
Note
The code above can be part of an actual webpage, or loaded natively into the webview.
Important!
Make sure to pass the event value as a stringified JSON.
Example
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}"
Native Implementation
Android Implementation
Android WebView uses a WebViewClient that receives notifications from the web view. In the shouldOverrideUrlLoading, you can handle URL loading events that come from the web view:
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("af-event://")) {
String[] urlParts = url.split("\\?");
if (urlParts.length > 1) {
String query = urlParts[1];
String eventName = null;
HashMap<String, Object> eventValue = new HashMap<>();
for (String param : query.split("&")) {
String[] pair = param.split("=");
String key = pair[0];
if (pair.length > 1) {
if ("eventName".equals(key)){
eventName = pair[1];
} else if ("eventValue".equals(key)){
JSONObject event;
JSONArray keys;
try {
event = new JSONObject(pair[1]);
keys = event.names();
for (int i = 0; i < keys.length(); i++){
eventValue.put(keys.getString(i), event.getString(keys.getString(i)));
}
} catch (JSONException e) {
e.printStackTrace();
}
}
}
}
AppsFlyerLib.getInstance().trackEvent(getApplicationContext(),eventName,eventValue);
}
return true;
}
view.loadUrl(url);
return true;
}iOS Implementation
In your web view controller, add the following code in the shouldStartLoadWithRequest method.
- (void)viewDidLoad {
[super viewDidLoad];
NSString *page = @"https://yourwebsite.com";
NSURL *url = [NSURL URLWithString:page];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
_webView = [[WKWebView alloc] initWithFrame:self.view.frame];
_webView.navigationDelegate = self;
[_webView loadRequest:request];
_webView.frame = CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y, self.view.frame.size.width, self.view.frame.size.height);
[self.view addSubview:_webView];
}
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction* )navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
decisionHandler(WKNavigationActionPolicyAllow);
NSString *url = navigationAction.request.URL.absoluteString;
if([url containsString:(@"af-event")]){
[self trackEvent:(url)];
}
}
- (void)trackEvent:(NSString*)url{
NSString *eventNameAndEventValueString = [url componentsSeparatedByString: @"?"][1];
NSArray *eventNameAndEventValueArray = [eventNameAndEventValueString componentsSeparatedByString: @"&"];
NSString *eventName = [eventNameAndEventValueArray[0] componentsSeparatedByString: @"="][1];
NSString *eventValueParams = [eventNameAndEventValueArray[1] componentsSeparatedByString: @"="][1];
NSString *decodedValueParams = [eventValueParams stringByRemovingPercentEncoding];
NSData *eventValuedata = [decodedValueParams dataUsingEncoding:(NSUTF8StringEncoding)];
NSDictionary *eventValue = [NSJSONSerialization JSONObjectWithData:eventValuedata options:NSJSONReadingMutableContainers error:nil];
if (eventName != nil){
[[AppsFlyerTracker sharedTracker] trackEvent:eventName withValues:eventValue];
}
}
The code above listens to any URL loading. If a URL with "af-event" in it loads, it triggers the native trackEvent method. The native trackEvent method extracts the necessary parameters (eventName and eventValue) and passes them on to AppsFlyer's SDK trackEvent method.
In your web view controller, add the following code in the webView method.
import WebKit
import UIKit
import AppsFlyerLib
class WebViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func loadView(){
webView = WKWebView()
webView.navigationDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let url = URL(string: "https://yourwebsite.com")!
webView.load(URLRequest(url: url))
}
func webView(_ view: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: ((WKNavigationActionPolicy) -> Void)) {
decisionHandler(.allow)
let pageUrl = navigationAction.request.url?.absoluteString
if(pageUrl?.hasPrefix("af-event://") ?? false){
let scanner = Scanner(string: pageUrl!)
scanner.charactersToBeSkipped = CharacterSet(charactersIn: "&?")
scanner.scanUpTo("?", into: nil)
var tempString, eventName : NSString?
var eventValue: [String: String] = Dictionary()
while(scanner.scanUpTo("&", into: &tempString)){
if let tempString = tempString {
if(tempString.hasPrefix("eventName=") && tempString.length > 10){
eventName = tempString.substring(from: 10) as NSString
}
if(tempString.hasPrefix("eventValue=") && tempString.length > 11){
let eventValues = tempString.components(separatedBy: "=")[1].removingPercentEncoding
let eventValuesData = eventValues?.data(using: String.Encoding.utf8)
do {
eventValue = try (JSONSerialization.jsonObject(with: eventValuesData!, options:[]) as? [String: String])!
} catch let error as NSError{
print(error)
}
}
}
}
if(eventName != nil){
if let eventName = eventName {
// track event
AppsFlyerTracker.shared().trackEvent(eventName as String?, withValues: eventValue)
}
}
}
}
}The code above listens to any URL loading. If a URL with "af-event" in it loads, it extracts the necessary parameters (eventName and eventValue) and passes them on to AppsFlyer's SDK trackEvent method.