Utiliser Analytics dans une WebView


Les appels pour consigner des événements ou définir des propriétés utilisateur déclenchés depuis une WebView doivent être transférés au code natif avant de pouvoir être envoyés à Google Analytics.

Implémenter le gestionnaire JavaScript

La première étape pour utiliser 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.");
  }
}
index.js

Appeler le gestionnaire JavaScript depuis votre WebView

Vous pouvez enregistrer correctement les événements et définir les propriétés utilisateur dans 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 : 
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 l'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: :

Swift

Remarque : Ce produit Firebase n'est pas disponible sur la cible macOS. 
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)
  }
}
ViewController.swift

Objective-C

- (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"]];
  }
}
ViewController.m

Enfin, ajoutez le gestionnaire de messages au contrôleur de contenu utilisateur de la WebView :

Swift

Remarque : Ce produit Firebase n'est pas disponible sur la cible macOS. 
self.webView.configuration.userContentController.add(self, name: "firebase")
ViewController.swift

Objective-C

Remarque : Ce produit Firebase n'est pas disponible sur la cible macOS. 
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];
ViewController.m

Étapes suivantes

Pour obtenir une implémentation entièrement fonctionnelle de Google Analytics dans une WebView, consultez l'exemple analytics-webview.