Menggunakan Analytics di WebView


Panggilan untuk mencatat peristiwa ke dalam log atau menyetel properti pengguna yang diaktifkan dari dalam WebView harus diteruskan ke kode native sebelum dapat dikirimkan ke Google Analytics.

Menerapkan pengendali JavaScript

Langkah pertama dalam menggunakan Google Analytics di WebView adalah membuat fungsi JavaScript untuk meneruskan peristiwa dan properti pengguna ke kode native. Contoh berikut menampilkan cara melakukannya agar kompatibel dengan kode native Android dan 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

Memanggil handler JavaScript dari WebView

Anda dapat mencatat peristiwa ke dalam log dan menetapkan properti pengguna dengan benar dari dalam WebView dengan memanggil fungsi JavaScript yang telah ditentukan di langkah sebelumnya. Contoh berikut menunjukkan cara mencatat peristiwa pembelian dengan benar ke dalam log dengan benar dan menetapkan properti pengguna sebagai contoh: 
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")    
}

Menerapkan antarmuka native

Untuk memanggil kode native Apple dari JavaScript, buat class pengendali pesan yang sesuai dengan protokol WKScriptMessageHandler. Anda dapat melakukan panggilan Google Analytics di dalam callback userContentController:didReceiveScriptMessage::

Swift

Catatan: Produk Firebase ini tidak tersedia di target 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

Terakhir, tambahkan pengendali pesan ke pengontrol konten pengguna WebView:

Swift

Catatan: Produk Firebase ini tidak tersedia di target macOS. 
self.webView.configuration.userContentController.add(self, name: "firebase")
ViewController.swift

Objective-C

Catatan: Produk Firebase ini tidak tersedia di target macOS. 
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];
ViewController.m

Langkah Berikutnya

Untuk penerapan Google Analytics yang sepenuhnya berfungsi di WebView, lihat contoh analytics-webview.