Analytics in einem WebView verwenden


Aufrufe zum Protokollieren von Ereignissen oder zum Festlegen von Nutzereigenschaften, die von einem WebView ausgelöst werden, 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.");
  }
}
index.js

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:

Swift

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)
  }
}
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

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

Swift

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

Objective-C

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

Nächste Schritte

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