वेबव्यू में Analytics का इस्तेमाल करना


किसी WebView से ट्रिगर किए गए, इवेंट लॉग करने या उपयोगकर्ता प्रॉपर्टी सेट करने के कॉल को Google Analytics पर भेजने से पहले, नेटिव कोड पर फ़ॉरवर्ड करना होगा.

JavaScript हैंडलर लागू करना

WebView में Google Analytics का इस्तेमाल करने का पहला चरण, 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.");
  }
}

अपने वेबव्यू से JavaScript हैंडलर को कॉल करना

पिछले चरण में तय किए गए JavaScript फ़ंक्शन को कॉल करके, WebView में इवेंट को सही तरीके से लॉग किया जा सकता है और उपयोगकर्ता प्रॉपर्टी सेट की जा सकती हैं. इस उदाहरण में, परचेज़ इवेंट को सही तरीके से लॉग करने और उपयोगकर्ता प्रॉपर्टी को उदाहरण के तौर पर सेट करने का तरीका बताया गया है:
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 से Apple के नेटिव कोड को लागू करने के लिए, WKScriptMessageHandler प्रोटोकॉल के मुताबिक मैसेज हैंडलर क्लास बनाएं. userContentController:didReceiveScriptMessage: कॉलबैक के अंदर, Google Analytics कॉल किए जा सकते हैं:

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

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 प्रॉडक्ट, macOS टारगेट पर उपलब्ध नहीं है.
self.webView.configuration.userContentController.add(self, name: "firebase")

Objective-C

ध्यान दें: यह Firebase प्रॉडक्ट, macOS टारगेट पर उपलब्ध नहीं है.
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];

अगले चरण

WebView में Google Analytics को पूरी तरह से लागू करने के लिए, analytics-webview सैंपल देखें.