استفاده از Analytics در «وب‌نما»

تماس‌های مربوط به ثبت رویدادها یا تنظیم دارایی‌های کاربر که از داخل WebView راه‌اندازی می‌شوند باید قبل‌از ارسال به Google Analytics به کد بومی بازارسال شوند.

پیاده‌سازی مدیریت‌کننده جاوا اسکریپت

اولین گام در استفاده از Google Analytics در «وب‌نما» ایجاد توابع جاوا اسکریپت برای ارسال رویدادها و دارایی‌های کاربر به کد بومی است. مثال زیر نشان می‌دهد که چگونه این کار را به روشی سازگار با کد بومی 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.");
  }
}

فراخوانی مدیریت‌کننده جاوا اسکریپت از «وب‌نما»

با فراخوانی توابع جاوااسکریپت که در مرحله قبلی تعریف کردید، می‌توانید رویدادها را به‌درستی ثبت کنید و مشخصه‌های کاربر را از درون «وب‌نما» تنظیم کنید. مثال زیر نشان می‌دهد که چگونه رویداد خرید را به‌درستی ثبت کنید و دارایی کاربر را به‌عنوان مثال تنظیم کنید:
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 از جاوا اسکریپت، کلاس مدیریت پیام سازگار با پروتکل WKScriptMessageHandler ایجاد کنید. می‌توانید Google Analytics تماس در userContentController:didReceiveScriptMessage: بازخوانی برقرار کنید:

Swift

توجه: این محصول Firebase در هدف watchOS دردسترس نیست.
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"]];
  }
}

در آخر، مدیریت پیام را به کنترل‌کننده محتوای کاربر نمای وب اضافه کنید:

Swift

توجه: این محصول Firebase در هدف watchOS دردسترس نیست.
self.webView.configuration.userContentController.add(self, name: "firebase")

Objective-C

توجه: این محصول Firebase در هدف watchOS دردسترس نیست.
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];

Android

برای فراخوانی کد بومی Android از جاوااسکریپت، کلاسی را با روش‌های نشان‌گذاری‌شده @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) {
        // ...
    }

}

پس‌از ایجاد کردن میانای بومی، آن را در «وب‌نما» ثبت کنید تا برای کد جاوا اسکریپت درحال اجرا در «وب‌نما» نمایان شود:

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

ثبت دستی رویدادهای خرید درون‌برنامه‌ای در WebView در iOS

می‌توانید رویدادهای IAP را به‌صورت دستی در «وب‌نما» بااستفاده از Analytics 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 در «وب‌نما»، نمونه analytics-webview را ببینید.