In-App Events from a Native Web View

Introduction

Sometimes, apps use web views containing HTML content. It is possible to call AppsFlyer's APIs for tracking events from Javascript code in the web view.

The following code shows an example for tracking an In-App Event:

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>

 Note

The code above can be part of an actual webpage, or loaded natively into the webview.

Make sure to pass the event value as a stringifed JSON. See the HTML code for reference.

The web view must call the native app which, in turn, calls AppsFlyer's SDK.

Android Implementation iOS Implementation

 Note

The code snippet below makes use of the json.org java library. To import the library, add

implementation 'org.json:json:20180813'

in your app level build.gradle file.

Android WebView uses a WebViewClient that receives notification from the web view.  In the shouldOverrideUrlLoading, you can handle events coming from the WebView as follows:

@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 false;
            }
            view.loadUrl(url);
            return true;

        }
Was this article helpful?
0 out of 2 found this helpful