Analytics in einem WebView verwenden

Aufrufe zum Protokollieren von Ereignissen oder zum Festlegen von Nutzereigenschaften, die innerhalb 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 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.");
  }
}

JavaScript-Handler über die WebView aufrufen

Sie können Ereignisse ordnungsgemäß protokollieren 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 richtig 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 Oberfläche 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 Nachrichten-Handler-Klasse, die dem WKScriptMessageHandler-Protokoll entspricht. Sie können im Callback userContentController:didReceiveScriptMessage: Google Analytics-Aufrufe ausführen:

Swift

Hinweis:Dieses Firebase-Produkt ist für watchOS 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)
  }
}

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"]];
  }
}

Fügen Sie schließlich den Nachrichten-Handler dem Nutzerinhalts-Controller der Webansicht hinzu:

Swift

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

Objective-C

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

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) {
        // ...
    }

}

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

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

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

Mit dem Analytics SDK v12.5.0 oder höher können Sie IAP-Ereignisse in einer WebView 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. Manuell protokollierte In-App-Kaufereignisse werden nicht dedupliziert.

Nächste Schritte

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