Analytics in einem WebView verwenden


Aufrufe zum Erfassen von Ereignissen oder Festlegen von Nutzereigenschaften, die aus einer WebView heraus ausgelöst werden, müssen an 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 mit nativem 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

JavaScript-Handler über WebView aufrufen

Sie können Ereignisse richtig erfassen und Nutzereigenschaften in einer WebView festlegen, indem Sie die JavaScript-Funktionen aufrufen, die Sie im vorherigen Schritt definiert haben. Das folgende Beispiel zeigt, wie ein Kaufereignis richtig protokolliert und eine Nutzer-Property als Beispiel festgelegt wird: 
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 Schnittstelle implementieren

Wenn Sie nativen Apple-Code aus JavaScript aufrufen möchten, erstellen Sie eine Nachrichtenhandlerklasse, die dem WKScriptMessageHandler-Protokoll entspricht. Sie können Google Analytics-Anrufe innerhalb des userContentController:didReceiveScriptMessage:-Callbacks starten:

Swift

Hinweis:Dieses Firebase-Produkt ist nicht für das macOS-Ziel 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 schließlich den Message-Handler dem User Content Controller der WebView hinzu:

Swift

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

Objective-C

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

Nächste Schritte

Eine voll funktionsfähige Implementierung von Google Analytics in einem WebView finden Sie im analytics-webview-Beispiel.