Triển khai trình xử lý JavaScript
Bước đầu tiên khi 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 thấy cách thực hiện việc này theo cách tương thích với cả mã gốc của 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."); } }
Gọi trình xử lý JavaScript từ WebView
Bạn có thể ghi nhật ký sự kiện và đặt thuộc tính người dùng một cách thích hợp trong WebView bằng cách gọi các hàm JavaScript mà bạn đã xác định ở bước trước. Ví dụ sau đây cho thấy cách ghi nhật ký đúng cách một sự kiện mua hàng và đặt một thuộc tính người dùng làm ví dụ: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") }
Triển khai giao diện gốc
Để gọi mã Apple gốc từ JavaScript, hãy tạo một lớp trình xử lý thông báo tuân theo giao thức WKScriptMessageHandler
. Bạn có thể thực hiện cuộc gọi Google Analytics bên trong lệnh gọi lại userContentController:didReceiveScriptMessage:
:
Swift
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"]]; } }
Cuối cùng, hãy thêm trình xử lý thông báo vào trình điều khiển nội dung người dùng của webview:
Swift
self.webView.configuration.userContentController.add(self, name: "firebase")
Objective-C
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"firebase"];
Các bước tiếp theo
Để biết cách triển khai đầy đủ chức năng của Google Analytics trong WebView, hãy xem mẫu analytics-webview.