Analytics in einem WebView verwenden

Aufrufe zum Protokollieren von Ereignissen oder Festlegen von Nutzereigenschaften, die aus einer WebView 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. Das folgende Beispiel zeigt, wie Sie dies so tun, dass es mit nativem Android- und 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 aus Ihrer WebView aufrufen

Sie können Ereignisse ordnungsgemäß protokollieren und Nutzereigenschaften aus einer WebView festlegen, indem Sie die JavaScript-Funktionen aufrufen, die Sie im vorherigen Schritt definiert haben. Das folgende Beispiel zeigt, wie Sie ein Kaufereignis ordnungsgemäß protokollieren und eine Nutzereigenschaft 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 Schnittstelle implementieren

Sie können eine native Schnittstelle für iOS oder Android implementieren.

iOS

Wenn Sie nativen Apple-Code aus JavaScript aufrufen möchten, erstellen Sie eine Nachrichtenhandlerklasse, die dem WKScriptMessageHandler-Protokoll entspricht. Sie können Google Analytics Aufrufe im userContentController:didReceiveScriptMessage: Callback ausführen:

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 schließlich den Nachrichtenhandler dem User Content Controller der WebView 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

Android

Wenn Sie nativen Android-Code aus JavaScript aufrufen möchten, implementieren Sie eine Klasse mit Methoden, die mit @JavaScriptInterface gekennzeichnet sind:

public class AnalyticsWebInterface {

    public static final String TAG = "AnalyticsWebInterface";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }

    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        LOGD("logEvent:" + name);
        mAnalytics.logEvent(name, bundleFromJson(jsonParams));
    }

    @JavascriptInterface
    public void setUserProperty(String name, String value) {
        LOGD("setUserProperty:" + name);
        mAnalytics.setUserProperty(name, value);
    }

    private void LOGD(String message) {
        // Only log on debug builds, for privacy
        if (BuildConfig.DEBUG) {
            Log.d(TAG, message);
        }
    }

    private Bundle bundleFromJson(String json) {
        // ...
    }

}
AnalyticsWebInterface.java

Nachdem Sie die native Schnittstelle erstellt haben, registrieren Sie sie in Ihrer WebView, damit sie für JavaScript-Code sichtbar ist, der in der WebView ausgeführt wird:

// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    mWebView.addJavascriptInterface(
            new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
    Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}
MainActivity.java

In-App-Kaufereignisse manuell in einer WebView unter iOS protokollieren

Sie können IAP-Ereignisse in einer WebView mit dem Analytics SDK v12.5.0 oder höher manuell protokollieren.

function logManualPurchaseEvent() {
  // For manually tracking in-app purchases within a WebView, log the in-app purchase event:
  logEvent("in_app_purchase", {
    currency: "USD",
    price: 0.99,
    product_id: "prod_123",
    product_name: "Product 123",
    quantity: 1,
    value: 0.99,
  });
}

Das SDK protokolliert In-App-Käufe weiterhin automatisch, sofern möglich, und entfernt keine manuell protokollierten In-App-Kaufereignisse.

Nächste Schritte

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