Sử dụng Analytics trong WebView


Các lệnh gọi để ghi lại sự kiện hoặc đặt thuộc tính người dùng được kích hoạt từ bên trong WebView phải được chuyển tiếp đến mã gốc thì mới có thể gửi đến Google Analytics.

Triển khai trình xử lý JavaScript

Bước đầu tiên để sử dụng Google Analytics trong WebView là tạo các hàm JavaScript để chuyển tiếp sự kiện và thuộc tính người dùng đến mã gốc. Ví dụ sau đây cho biết cách thực hiện việc này theo cách tương thích với cả mã gốc Android và 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

Triển khai giao diện gốc

Để gọi mã gốc của Apple từ JavaScript, hãy tạo một lớp trình xử lý thông báo tuân thủ giao thức WKScriptMessageHandler. Bạn có thể thực hiện các lệnh gọi Google Analytics bên trong lệnh gọi lại userContentController:didReceiveScriptMessage::

Swift

Lưu ý: Sản phẩm Firebase này không có trên mục tiêu 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

Cuối cùng, hãy thêm trình xử lý thông báo vào trình kiểm soát nội dung người dùng của webview:

Swift

Lưu ý: Sản phẩm Firebase này không có trên mục tiêu macOS. 
self.webView.configuration.userContentController.add(self, name: "firebase")
ViewController.swift

Objective-C

Lưu ý: Sản phẩm Firebase này không có trên mục tiêu macOS. 
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];
ViewController.m

Các bước tiếp theo

Để triển khai đầy đủ chức năng của Google Analytics trong WebView, hãy xem mẫu analytics-webview.