שימוש ב-Analytics ב-WebView


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

הטמעה של handler ב-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 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")    
}

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

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

רישום ידני של אירועי רכישה באפליקציה ב-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.