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

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

تنفيذ معالج JavaScript

الخطوة الأولى لاستخدام Google Analytics في WebView هي إنشاء دوال JavaScript لإعادة توجيه الأحداث وخصائص المستخدِمين إلى الرموز البرمجية الأصلية. يوضّح المثال التالي كيفية إجراء ذلك بطريقة متوافقة مع الرموز البرمجية الأصلية على كلّ من 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")    
}

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

يمكنك تنفيذ واجهة أصلية لنظامَي iOS أو Android.

iOS

لاستدعاء رمز Apple الأصلي من JavaScript، أنشئ فئة معالج رسائل متوافقة مع بروتوكول WKScriptMessageHandler. يمكنك إجراء Google Analytics طلبات داخل userContentController:didReceiveScriptMessage: معاودة الاتصال:

Swift

ملاحظة: لا يتوفّر منتج Firebase هذا على هدف macOS.

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

أخيرًا، أضِف معالج الرسائل إلى وحدة التحكّم في محتوى المستخدِم في WebView:

Swift

ملاحظة: لا يتوفّر منتج Firebase هذا على هدف macOS.

self.webView.configuration.userContentController.add(self, name: "firebase")
ViewController.swift

Objective-C

ملاحظة: لا يتوفّر منتج Firebase هذا على هدف macOS.

[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];
ViewController.m

Android

لاستدعاء رمز Android الأصلي من JavaScript، نفِّذ فئة تتضمّن طرقًا تم وضع علامة @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

تسجيل أحداث الشراء داخل التطبيق يدويًا في WebView على iOS

يمكنك تسجيل أحداث الشراء داخل التطبيق يدويًا في WebView باستخدام الإصدار 12.5.0 من حزمة تطوير البرامج (SDK) أو إصدار أعلى.

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

يُرجى العِلم أنّ حزمة تطوير البرامج ستواصل تسجيل عمليات الشراء داخل التطبيق تلقائيًا حيثما أمكن، ولن تزيل الأحداث المكرّرة من أحداث الشراء داخل التطبيق التي تم تسجيلها يدويًا.

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

للاطّلاع على عملية تنفيذ كاملة الوظائف لـ Google Analytics في WebView، يمكنك الاطّلاع على نموذج analytics-webview.