1. Introduction
Dernière mise à jour : 2022-02-03
Ce que vous apprendrez
- Comment créer une vue Web très simple sous Android
- Comment envoyer des événements WebView à Firebase
Ce dont vous aurez besoin
- Projet Firebase avec SDK Analytics implémenté
- Android Studio version 4.2+.
- Un émulateur Android avec Android 5.0+.
- Familiarité avec le langage de programmation Java.
- Familiarité avec le langage de programmation Javascript.
2. Créez une vue Web simple sous Android
Ajout de Webview dans la présentation de l'activité
Pour ajouter une WebView à votre application dans la mise en page, ajoutez le code suivant au fichier XML de mise en page de votre activité :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WebActivity"
>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>;
Ajout d'une WebView dans onCreate()
Pour charger une page Web dans WebView, utilisez loadUrl(). La Webview doit être créée sur l'activité noire. Par exemple, je vais implémenter ceci sur la méthode onCreate :
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
Cependant, avant que cela fonctionne, votre application doit avoir accès à Internet. Pour accéder à Internet, demandez l’autorisation INTERNET dans votre fichier manifeste. Par exemple:
<uses-permission android:name="android.permission.INTERNET" />
C'est tout ce dont vous avez besoin pour une WebView de base qui affiche une page Web.
Utiliser Javascript dans les vues Web
si la page Web que vous prévoyez de charger dans votre WebView utilise JavaScript, vous devez activer JavaScript pour votre WebView. Une fois JavaScript activé, vous pouvez également créer des interfaces entre le code de votre application et votre code JavaScript.
JavaScript est désactivé dans une WebView par défaut. Vous pouvez l'activer via les WebSettings attachés à votre WebView. Vous pouvez récupérer WebSettings avec getSettings(), puis activer JavaScript avec setJavaScriptEnabled().
Par exemple:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Activité mise à jour :
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
WebView myWebView = (WebView) findViewById(R.id.webview);
if(myWebView != null) {
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
}
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
3. Implémentation de l'interface pontée Javascript
Gestionnaire Javascript
La première étape de l'utilisation de Google Analytics dans une WebView consiste à créer des fonctions JavaScript pour transférer les événements et les propriétés utilisateur vers le code natif. L'exemple suivant montre comment procéder d'une manière compatible avec le code natif d'Android et d'Apple :
Dans cet exemple, j'ai créé un fichier Javascript nommé script.js qui comprend les éléments suivants :
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
Interface native
Pour appeler du code Android natif à partir de JavaScript, implémentez une classe avec des méthodes marquées @JavaScriptInterface : Dans l'exemple ci-dessous, j'ai créé une nouvelle classe Java appelée : AnalyticsWebInterfcae.java :
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// ...
}
}
Once you have created the native interface, register it with your WebView so that it is visible to JavaScript code running in the WebView:
// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
mWebView.addJavascriptInterface(
new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}
Code final :
// [START analytics_web_interface]
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// [START_EXCLUDE]
if (TextUtils.isEmpty(json)) {
return new Bundle();
}
Bundle result = new Bundle();
try {
JSONObject jsonObject = new JSONObject(json);
Iterator<String> keys = jsonObject.keys();
while (keys.hasNext()) {
String key = keys.next();
Object value = jsonObject.get(key);
if (value instanceof String) {
result.putString(key, (String) value);
} else if (value instanceof Integer) {
result.putInt(key, (Integer) value);
} else if (value instanceof Double) {
result.putDouble(key, (Double) value);
} else {
Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
}
}
} catch (JSONException e) {
Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
return new Bundle();
}
return result;
// [END_EXCLUDE]
}
Vous avez maintenant configuré l'interface Javascript, vous êtes maintenant prêt à commencer à envoyer des événements analytiques.
4. Envoi d'événements via l'interface
Comme vous pouvez le voir ici, ma Webview est très simple, elle comporte trois boutons, deux qui enregistreront un événement et l'autre qui enregistrera une propriété utilisateur :
Une fois que je clique sur les boutons, il appellera mon fichier "script.js" et exécutera le code suivant :
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
Fichier script.js final :
/* If you're feeling fancy you can add interactivity
to your site with Javascript */
// prints "hi" in the browser's dev tools console
console.log("hi");
// [START log_event]
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END log_event]
// [START set_user_property]
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END set_user_property]
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
Il s'agit de la méthode de base pour envoyer des événements dans Analytics
5. Déboguer les événements Webview dans Firebase
Le débogage des événements Webview dans votre application fonctionne de la même manière que le débogage de n'importe quelle partie native de votre SDK :
Pour activer le mode débogage, veuillez utiliser les commandes suivantes dans votre console de studio Android :
adb shell setprop debug.firebase.analytics.app package_name
Une fois cela fait, vous pouvez tester et voir vos événements Webview prendre vie :
6. Félicitations
Félicitations, vous avez créé avec succès une vue Web dans votre application Android. Vous pouvez envoyer et mesurer les événements clés de l'entonnoir dans votre application qui se déroulent via des vues Web. Afin d'en tirer le meilleur parti, nous vous suggérons également de vous connecter à Google Ads et d'importer ces événements en tant que conversions.
Vous avez appris
- Comment envoyer des événements Webview à Firebase
- Comment configurer et créer une simple vue Web sous Android