Analytics in einem WebView verwenden

iOS+ Android

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.");
  }
}
index.js

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 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 Benutzeroberfläche erstellt haben, registrieren Sie sie bei 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

Nächste Schritte

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