שימוש ב-Analytics ב-WebView

כדי לשלוח ל-Google Analytics קריאות לתיעוד אירועים או להגדרת מאפייני משתמשים שהופעלו מתוך WebView, צריך להעביר אותן קודם לקוד Native.

הטמעת handler של JavaScript

השלב הראשון בשימוש ב-Google Analytics ב-WebView הוא ליצור פונקציות JavaScript כדי להעביר אירועים ומאפייני משתמשים לקוד Native. בדוגמה הבאה אפשר לראות איך לעשות את זה באופן שתואם גם לקוד Native של Android וגם לקוד Native של 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.");
  }
}

מפעילים את ה-JavaScript handler מ-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, צריך ליצור מחלקה של גורם handler להודעות שתואמת לפרוטוקול WKScriptMessageHandler. אפשר לבצע קריאות ל-Google Analytics בתוך פונקציית ה-callback של 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"]];
  }
}

לבסוף, מוסיפים את ה-message handler לבקר תוכן המשתמש של ה-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 מקורי מ-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) {
        // ...
    }

}

אחרי שיוצרים את הממשק המקורי, רושמים אותו ב-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);
}

תיעוד ידני של אירועי רכישה באפליקציה ב-WebView ב-iOS

אתם יכולים לתעד באופן ידני אירועי IAP ב-WebView באמצעות Analytics SDK בגרסה 12.5.0 ואילך.

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

חשוב לזכור שה-SDK ימשיך לתעד באופן אוטומטי רכישות באפליקציה כשאפשר, ולא יבטל כפילויות של אירועי רכישה באפליקציה שמתועדים באופן ידני.

השלבים הבאים

כדי לראות הטמעה פונקציונלית מלאה של Google Analytics ב-WebView, עיינו בדוגמה של analytics-webview.