שימוש ב-Analytics ב-WebView

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

הטמעה של JavaScript handler

השלב הראשון בשימוש ב-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.");
  }
}
index.js

התקשרות ל-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")    
}

הטמעה של ממשק מקורי

אפשר להטמיע ממשק Native ל-iOS או ל-Android.

iOS

כדי להפעיל קוד מקורי של אפל מ-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

לבסוף, מוסיפים את handler ההודעות לבקר התוכן של המשתמש ב-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 באמצעות 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.