概要：アプリをインストールしたにもかかわらず、アプリではなくモバイルWebサイト上でイベントを実行したユーザーのアプリ内イベントを記録しましょう。
はじめに
アプリ内で発生したアプリ内イベントはSDKを使用して報告されます。アプリの外部で発生するイベントはどうでしょうか？
アプリの外部で発生するイベントにはいくつかのシナリオが考えられます。
- Webサイト上で発生するイベント：ピープルベースドアトリビューション (PBA) を実装して、チャネル、Webサイトとデバイスを含むプラットフォームにわたるカスタマージャーニーの全容を把握しましょう。これにより、Webからアプリへのキャンペーン、コンバージョン経路分析、ローデータが取得できます。
- バックエンドサーバー：Webサイトまたはアプリでのユーザーアクションに関係なく発生するイベントです。例えば、自動サブスクリプション更新などです。
- ハイブリッド: 本記事で説明するように、アプリを搭載したデバイス上のモバイルWebサイト上で発生します。アプリ内イベントは、Javascriptを使用してAppsFlyer SDK APIを呼び出すことで記録されます。
このガイドでは、ハイブリッドのシナリオについて説明します。アプリのHTMLモードとネイティブモードのギャップを埋め、HTMLモードでイベントを記録してアプリに送信できるようにする方法について説明します。
例
サブスクリプションを含むハイブリッドアプリを提供しています。Webサイトから読み込まれるサブスクリプションフォームをWebビューに実装します。
Webビュー上のサブスクリプションというアプリ内イベントを記録し、サブスクリプションの種類や価格など、それに関連するデータをネイティブコードに送信できます。
ネイティブコードは、このデータを収集し、AppsFlyer SDKを使用してサブスクリプションのアプリ内イベントを送信します。
ハイブリッドアプリでアプリ内イベントを記録する
このガイドでは、ハイブリッドアプリでアプリ内イベントを記録するための2つの方法について説明しています。
- [推奨] Javascriptインターフェイス：ネイティブのJavascriptインターフェイスを使用して、HTMLまたはWebビューとネイティブコード間のコミュニケーションを確立します。この方法で、Webビューからのアプリ内イベントに関するデータをネイティブコードに送信できます。ネイティブコードがデータを受信すると、SDKを使用してそれをAppsFlyerに送信します。
- URLの読み込み：この方法では、ネイティブコードがURLがイベントを読み込むのを処理します。ネイティブコードを設定して、特定のURLの読み込みイベントをリスニングし、URL パラメーターからデータを抽出できます。データはその後SDKに渡されます。
Javascriptインターフェイス
AndroidとiOSの両方に Javascriptインターフェイスがあり、これによりWebビューがネイティブコードを呼び出すことができます。
- Android: JavascriptInterface
- iOS: JavaScriptCore
URLの読み込みよりもネイティブの JavaScriptインターフェイスを使用するメリット：
- URLの読み込みをリスニングするロジックを実装する必要はありません。
- ネイティブインターフェイスは、他の実装よりも優先されます。
- URL からパラメーターを解析する必要はありません。
- コードが少なくて済むため、必要なメンテナンスが少なくて済みます。
実装には、次の手順が含まれています。
- WebビューまたはWebページのHTMLコード
- Webビューのネイティブコード実装
Android
Android向けのHTMLコード
次のHTMLコードをWebビューまたはWebページに追加してください。
<h1>Recording Event From Web View</h1>
<div id="main">
<button id="recordEvent" onclick="recordEvent()"> Record Event </button>
</div>
<script type="text/javascript">
function recordEvent(){
var eventName = "af_purchase"
var eventParams = "{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}";
app.recordEvent(eventName, eventParams)
}
</script>
イベント値を渡す際は、以下の点にご注意ください。
- イベント値は、文字列化されたJSON形式で渡すようにしてください。
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - この問題を回避するため、AppsFlyerではアプリ内イベント名に小文字の英数字（a～zおよび0～9）のみを使用することを推奨します。
WebActivity class
以下のコードを含むWeb activity class を作成してください。
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");
}
}上記のコードは、Webビューとネイティブコード間のブリッジとして機能する app と呼ばれるオブジェクトを作成します。
JavaScript インターフェイス class
MainJsInterface class を作成して、JavascriptInterface として recordEvent() を実装してください。
public class MainJsInterface {
Context mContext;
MainJsInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void recordEvent(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().logEvent(this.mContext, name, params);
}
}
上記のコードは、Javascriptを使用してWebビューで呼び出すことができる recordEvent を宣言しています。
HTMLコードで、app.recordEvent(eventName, eventParams) を使用してこのメソッドが呼び出されているのを確認できます。Webビューとネイティブコードの間のブリッジとして機能するように app を設定していることを思い出してください。このため、app が MainJsInterface class で定義した recordEvent メソッドを呼び出すことができます。
iOS
iOS向けのHTMLコード
次のHTMLコードをWebビューまたはWebページに追加してください。
<body>
<h1>Recroding Event From Web View</h1>
<div id="main">
<button id="recordEvent" onclick="recordEvent()"> Record Event </button>
</div>
<script type="text/javascript">
function recordEvent(){
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>上記のコードは、ボタンがクリックされたときにトリガーされる関数を設定します。この関数は、eventName 変数と eventParams 変数を設定し、webkit.messageHandlers を使用してネイティブコードに渡します。
イベント値を渡す際は、以下の点にご注意ください。
- イベント値は、文字列化されたJSON形式で渡すようにしてください。
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - この問題を回避するため、AppsFlyerではアプリ内イベント名に小文字の英数字（a～zおよび0～9）のみを使用することを推奨します。
注記
HTMLコードは、Objective-C と Swift の両方を対象としています。
Objective c
Webビューコントローラ
Web ビューコントローラーで、ビューコントローラーに次のコードを追加してください。
-(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 recordEvent:eventName eventValue:eventValue];
}
- (void)recordEvent:(NSString*)eventName eventValue:(NSString*)eventValue{
NSData *eventValuedata = [eventValue dataUsingEncoding:(NSUTF8StringEncoding)];
NSDictionary *eventValueDict = [NSJSONSerialization JSONObjectWithData:eventValuedata options:NSJSONReadingMutableContainers error:nil];
[[AppsFlyerLib shared] logEvent:eventName withValues:eventValueDict];
}上記のコードは、Webビューからメッセージを受信します。メッセージには、イベント名とイベント値が含まれます。コードは、受信メッセージを検出すると、値を解析する recordEvent メソッドに渡し、ネイティブSDKの logEvent メソッドを呼び出します。
Swift
Webビューコントローラ
Webビューコントローラで、viewDidLoad メソッドに次のコードを追加してください。
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]
recordEvent(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 recordEvent(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)
}
AppsFlyerLib.shared().logEvent(eventName as String?, withValues: eventValueDict)
}
}上記のコードは、Webビューからメッセージを受信します。メッセージには、イベント名とイベント値が含まれます。コードが受信メッセージを検出すると、値を解析する recordEvent メソッドに渡し、AppsFlyer SDKの logEvent メソッドを呼び出します。
URLの読み込み
AndroidとiOSはどちらも、URL読み込みイベントをリスニングするネイティブメソッドを実装しています。このメソッドを使用すると、以下のことが実行できます。
- 特定の URL の読み込みイベントをリスニングする
- URL に追加されるパラメーターを抽出する
- これらのパラメーターをネイティブコードで使用する
以下の実装は、次の2つの手順で構成されています。
- WebビューまたはWebページのHTMLコード
- Webビューのネイティブコード実装
Webビュー実装
HTMLコード (Android WebViewと iOS WKWebView の両方)
<html>
<head>
</head>
<body>
<h1>Recording From Web View</h1>
<div id="main">
<input id="button" type="button" value="Record Event" />
</div>
<script type="text/javascript">
function recordEvent(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\"}";
recordEvent(eventName, eventValue);
}
</script>
</body>
</html>上記のコードは、実際のWebページの一部にすることも、Webビューにネイティブでロードすることもできます。
このコードは、ボタンがクリックされたときにトリガーされる関数を定義します。この関数はカスタムURLを読み込む iframe 要素を作成します。この URL の読み込みによって、ネイティブの Android メソッドまたは iOS メソッドがトリガーされ、AppsFlyer SDK logEvent メソッドが呼び出されます。
すべての必須パラメーター (イベント名とイベント値) が URL に追加されます。以下の Android および iOS のコード例は、これらのパラメーターを抽出して AppsFlyer SDKの logEvent メソッドに渡す方法を示しています。
イベント値を渡す際は、以下の点にご注意ください。
- イベント値は、文字列化されたJSON形式で渡すようにしてください。
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - この問題を回避するため、AppsFlyerではアプリ内イベント名に小文字の英数字（a～zおよび0～9）のみを使用することを推奨します。
ネイティブ実装
Android実装
Android WebView は、Webビューから通知を受信する WebViewClient を使用します。shouldOverrideUrlLoading では、WebビューからのURL読み込みイベントを処理できます。
@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().logEvent(getApplicationContext(),eventName,eventValue);
}
return true;
}
view.loadUrl(url);
return true;
}iOS実装
Webビューコントローラで、shouldStartLoadWithRequest メソッドに次のコードを追加してください。
- (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 recordEvent:(url)];
}
}
- (void)recordEvent:(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){
[[AppsFlyerLib shared] logEvent:eventName withValues:eventValue];
}
}
上記のコードは、URLの読み込みをリスニングします。「af-event」を含む URL が読み込まれると、ネイティブの recordEvent メソッドがトリガーされます。ネイティブの recordEvent メソッドは、必要なパラメーター (eventName と eventValue) を抽出し、ネイティブ SDK logEvent メソッドに渡します。
Webビューコントローラで、webView メソッドに次のコードを追加してください。
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 {
// record event
AppsFlyerLib.shared().logEvent(eventName as String?, withValues: eventValue)
}
}
}
}
}上記のコードは、URLの読み込みを処理します。「af-event」を含む URL が読み込まれると、必要なパラメーター (eventName と eventValue) が抽出され、ネイティブSDKの logEvent メソッドに渡されます。