Visão geral: grave eventos in-app de usuários que têm seu aplicativo instalado, mas realizam um evento no seu site mobile, e não no aplicativo.
Introdução
Eventos in-app que ocorrem dentro do aplicativo são reportados usando o SDK. E os eventos que ocorrem fora do aplicativo?
Existem alguns cenários nos quais os eventos ocorrem fora do contexto do aplicativo:
- Eventos que ocorrem no seu site: implemente o people-based attribution (PBA) para obter uma visão unificada das jornadas do cliente em todos os canais, plataformas, incluindo o site e dispositivos. Isso fornece análises de Web-to-App, caminhos de conversão e dados brutos.
- Servidores de back-end: os eventos ocorrem independentemente da ação do usuário no site ou no aplicativo. Por exemplo, renovação automática de assinatura
- Híbrido: o evento ocorre em seu site mobile em um dispositivo com o aplicativo, conforme descrito neste artigo. Os eventos in-app são registrados chamando a API do SDK da AppsFlyer usando Javascript.
Este guia está relacionado ao cenário híbrido. Saiba como preencher a lacuna entre a visualização HTML e as visualizações nativas, permitindo que você grave eventos na visualização HTML e os envie para o aplicativo.
Exemplo
Você tem um aplicativo híbrido que oferece inscrições. Você implementa o formulário de inscrição em uma exibição da web que na verdade carrega a partir do seu site.
Você pode gravar o evento in-app de inscrição na visualização da web e enviar dados relacionados a ele, como tipo de assinatura ou preço, para o código nativo.
O código nativo coleta os dados e usa o SDK da AppsFlyer para enviar o evento in-app de inscrição.
Registro de eventos in-app em aplicativos híbridos
Neste guia, oferecemos dois métodos para registrar eventos in-app em aplicativos híbridos:
- [Recomendado] Interface JavaScript: usa a interface JavaScript nativa para estabelecer comunicação entre o HTML ou Web View e o código nativo. Dessa forma, você pode enviar dados relacionados a eventos in-app do web view para o código nativo. Depois que o código nativo obtém os dados, ele os envia para a AppsFlyer usando o SDK.
- Carregamento de URL: nesse método, o código nativo ouve os eventos de carregamento de URL. Você pode definir o código nativo para ouvir eventos de carregamento de URLs específicos e extrair dados dos parâmetros de URL. Em seguida, os dados são passados para o SDK.
Interface Javascript
Tanto o Android quanto o iOS têm interfaces Javascript nativas que permitem que as exibições da web façam chamadas para o código nativo.
- Android: JavascriptInterface
- iOS: JavaScriptCore
Vantagens de usar a interface JavaScript nativa em relação ao carregamento de URL:
- Não requer a implementação de lógica para o carregamento de URL.
- Interfaces nativas são preferíveis a outras implementações.
- Não há necessidade de analisar os parâmetros do URL.
- Há menos código e, portanto, menos manutenção necessária.
A implementação consiste nas seguintes etapas:
- Código HTML para visualização da web ou página da web
- Implementação de código nativo para webview
Android
Código HTML para Android
Adicione o seguinte código HTML à exibição da web ou página da 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>
Ao transferir o valor do evento, lembre-se do seguinte:
- Certifique-se de transferir o valor do evento como JSON em string.
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - Para evitar eventuais problemas o AppsFlyer recomenda usar apenas caracteres alfanuméricos minúsculos (a-z e 0-9) para nomes de eventos no aplicativo.
Classe WebActivity
Crie uma classe de atividade da web com o seguinte código:
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");
}
}O código acima cria um objeto chamado app que atua como a ponte entre a exibição da web e o código nativo.
Classe de interface JavaScript
Crie uma classe MainJSInterface para implementar recordEvent() como JavaScriptInterface
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);
}
}
O código acima declara um método recordEvent que pode ser chamado na exibição da web usando Javascript.
No código HTML, você pode ver que o método é chamado usando app.recordEvent(EventName, EventParams). Lembre-se de que configuramos o aplicativo para atuar como a ponte entre a visualização da web e o código nativo. É por isso que o app pode chamar o método recordEvent que definimos na classe MainJsInterface.
iOS
Código HTML para iOS
Adicione o seguinte código HTML à exibição da web ou página da 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>O código acima define uma função a ser acionada quando um botão é clicado. A função define as variáveis eventName e eventParams e as transmite para o código nativo usando webkit.messageHandlers.
Ao transferir o valor do evento, lembre-se do seguinte:
- Certifique-se de transferir o valor do evento como JSON em string.
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - Para evitar eventuais problemas o AppsFlyer recomenda usar apenas caracteres alfanuméricos minúsculos (a-z e 0-9) para nomes de eventos no aplicativo.
Nota
O código HTML é para Objective C e Swift.
Objetivo c
Controlador de exibição da web
Em seu controlador de exibição da web, adicione o seguinte código no controlador de exibição.
-(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];
}O código acima recebe a mensagem da visualização da web. A mensagem contém o nome e o valor do evento. Quando o código detecta a mensagem recebida, ele a transmite para o método recordEvent, que analisa os valores e chama o método logEvent do SDK nativo.
Controlador WebView Swift
Em seu controlador de exibição da web, adicione o seguinte código no método 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)
}
}O código acima recebe a mensagem da visualização da web. A mensagem contém o nome e o valor do evento. Quando o código detecta a mensagem recebida, ele a transmite para o método recordEvent, que analisa os valores e chama o método logEvent do SDK da AppsFlyer.
Carregamento de URL
Tanto o Android quanto o iOS implementam um método nativo que escuta eventos de carregamento de URL. Este método permite que você faça o seguinte:
- Ouça um evento de carregamento de uma URL específica
- Extraia parâmetros que são anexados à URL
- Use esses parâmetros no código nativo
A implementação a seguir consiste em duas etapas:
- Código HTML para visualização da web ou página da web
- Implementação de código nativo para carregamento de URL
Implementação do WebView
Código HTML (tanto para o Android WebView quanto para o 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>O código acima pode ser parte de uma página da web real ou carregado nativamente na visualização da web.
O código define uma função a ser acionada quando um botão é clicado. A função em si cria um elemento iframe que carrega uma URL personalizada. É esse carregamento de URL que aciona o método nativo do Android ou iOS que chama o método logEvent do SDK da AppsFlyer.
Todos os parâmetros necessários (nome do evento e valores do evento) são anexados à URL. Os exemplos de código Android e iOS abaixo demonstram como extrair esses parâmetros e passá-los para o método logEvent do SDK da AppsFlyer.
Ao transferir o valor do evento, lembre-se do seguinte:
- Certifique-se de transferir o valor do evento como JSON em string.
"{\"af_revenue\":\"6.72\", \"af_content_type\": \"wallets\", \"af_content_id\": \"15854\"}" - Para evitar eventuais problemas o AppsFlyer recomenda usar apenas caracteres alfanuméricos minúsculos (a-z e 0-9) para nomes de eventos no aplicativo.
Implementação nativa
Implementação do Android
O Android WebView usa um WebViewClient que recebe notificações da exibição da web. Em shouldOverrideUrlLoading, você pode manipular eventos de carregamento de URL que vêm da exibição da web:
@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;
}Implementação iOS
No seu controlador de exibição da web, adicione o seguinte código no método 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];
}
}
O código acima ouve qualquer carregamento de URL. Se uma URL com "af-event" for carregada, ela acionará o método recordEvent nativo. O método nativo recordEvent extrai os parâmetros necessários (eventName e eventValue) e os transmite para o método nativo SDK logEvent.
No controlador de exibição da web, adicione o seguinte código no método 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)
}
}
}
}
}O código acima ouve qualquer carregamento de URL. Se uma URL com "af-event" for carregada, ela extrairá os parâmetros necessários (eventName e eventValue) e os transmitirá para o método nativo do SDK logEvent.