Implémenter le 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 de manière compatible avec le code natif Android et Apple: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."); } }
Appeler le gestionnaire JavaScript à partir de votre WebView
Vous pouvez enregistrer correctement les événements et définir des propriétés utilisateur à partir d'une WebView en appelant les fonctions JavaScript que vous avez définies à l'étape précédente. L'exemple suivant montre comment enregistrer correctement un événement d'achat et définir une propriété utilisateur à titre d'exemple:function logEventExample() { // Log an event named "purchase" with parameters logEvent("purchase", { content_type: "product", value: 123, currency: "USD", quantity: 2, items: [{ item_id: "sample-item-id", item_variant: "232323" }], transaction_id: "1234567" }); } function logUserPropertyExample() { // Set a user property named 'favorite_genre' setUserProperty("favorite_genre", "comedy") }
Implémenter une interface native
Pour appeler du code Apple natif à partir de JavaScript, créez une classe de gestionnaire de messages conforme au protocole WKScriptMessageHandler
. Vous pouvez passer des appels Google Analytics dans le rappel userContentController:didReceiveScriptMessage:
:
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { guard let body = message.body as? [String: Any] else { return } guard let command = body["command"] as? String else { return } guard let name = body["name"] as? String else { return } if command == "setUserProperty" { guard let value = body["value"] as? String else { return } Analytics.setUserProperty(value, forName: name) } else if command == "logEvent" { guard let params = body["parameters"] as? [String: NSObject] else { return } Analytics.logEvent(name, parameters: params) } }
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.body[@"command"] isEqual:@"setUserProperty"]) { [FIRAnalytics setUserPropertyString:message.body[@"value"] forName:message.body[@"name"]]; } else if ([message.body[@"command"] isEqual: @"logEvent"]) { [FIRAnalytics logEventWithName:message.body[@"name"] parameters:message.body[@"parameters"]]; } }
Enfin, ajoutez le gestionnaire de messages au contrôleur de contenu utilisateur de la WebView:
self.webView.configuration.userContentController.add(self, name: "firebase")
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"firebase"];
Étapes suivantes
Pour obtenir une implémentation entièrement fonctionnelle de Google Analytics dans une WebView, consultez l'exemple analytics-webview.