Analytics in einem WebView verwenden


Aufrufe zum Protokollieren von Ereignissen oder zum Festlegen von Nutzereigenschaften, die aus einem WebView stammen, müssen an den nativen Code weitergeleitet werden, bevor sie an Google Analytics gesendet werden können.

JavaScript-Handler implementieren

Der erste Schritt bei der Verwendung von Google Analytics in einer WebView besteht darin, JavaScript-Funktionen zu erstellen, um Ereignisse und Nutzereigenschaften an nativen Code weiterzuleiten. Im folgenden Beispiel wird gezeigt, wie Sie dies auf eine Weise tun, die sowohl mit nativem Android- als auch Apple-Code kompatibel ist:
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.");
  }
}

JavaScript-Handler von WebView aufrufen

Sie können Ereignisse ordnungsgemäß erfassen und Nutzereigenschaften in einer WebView festlegen, indem Sie die im vorherigen Schritt definierten JavaScript-Funktionen aufrufen. Im folgenden Beispiel wird gezeigt, wie Sie ein Kaufereignis ordnungsgemäß erfassen und eine Nutzereigenschaft als Beispiel festlegen:
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")    
}

Native Benutzeroberfläche implementieren

Wenn Sie nativen Apple-Code aus JavaScript aufrufen möchten, erstellen Sie eine Nachrichten-Handler-Klasse, die dem WKScriptMessageHandler-Protokoll entspricht. Im Callback userContentController:didReceiveScriptMessage: können Sie Google Analytics-Anrufe starten:

Hinweis:Dieses Firebase-Produkt ist für das macOS-Ziel nicht verfügbar.
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"]];
  }
}

Fügen Sie abschließend dem Controller für Nutzerinhalte der Webansicht den Message Handler hinzu:

Hinweis:Dieses Firebase-Produkt ist für das macOS-Ziel nicht verfügbar.
self.webView.configuration.userContentController.add(self, name: "firebase")

Hinweis:Dieses Firebase-Produkt ist für das macOS-Ziel nicht verfügbar.
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];

Nächste Schritte

Eine vollständig funktionsfähige Implementierung von Google Analytics in einer WebView finden Sie im Beispiel analytics-webview.