استخدام "إحصاءات Google" في WebView

iOS والإصدارات الأحدث Android

يجب توجيه المكالمات لتسجيل الأحداث أو ضبط خصائص المستخدِمين التي يتم تشغيلها من داخل WebView إلى الرمز البرمجي الأصلي قبل أن يتم إرسالها إلى Google Analytics.

تنفيذ معالِج JavaScript

الخطوة الأولى لاستخدام Google Analytics في WebView هي إنشاء functionsJavaScript لإعادة توجيه الأحداث وخصائص المستخدِمين إلى الرمز البرمجي الأصلي. يوضّح المثال التالي كيفية إجراء ذلك بطريقة متوافقة مع الرمز البرمجي الأصلي لكل من Android وApple:

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 من WebView

يمكنك تسجيل الأحداث بشكلٍ صحيح وضبط خصائص المستخدِمين من داخل WebView من خلال استدعاء دوال JavaScript التي حدّدتها في الخطوة السابقة. يوضِّح المثال التالي كيفية تسجيل حدث شراء بشكلٍ صحيح وإعداد سمة مستخدِم على سبيل المثال:

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

تنفيذ واجهة أصلية

لاستدعاء رمز Android الأصلي من JavaScript، نفِّذ فئة تحتوي على methods تم وضع علامة @JavaScriptInterface عليها:

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

بعد إنشاء الواجهة الأصلية، سجِّلها في WebView لكي تكون مرئية لرمز JavaScript الذي يتم تنفيذه في WebView:

// 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

الخطوات التالية

للحصول على تطبيق Google Analytics يعمل بكامل طاقته في WebView، اطّلِع على نموذج analytics-webview.