استفاده از 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"]];
  }
}

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

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

}

وقتی میانای بومی را ایجاد کردید، آن را در WebView خود ثبت کنید تا برای کد جاوا اسکریپت درحال اجرا در 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);
}

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

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