Usa Analytics en un WebView


Las llamadas para registrar eventos o establecer propiedades del usuario que se emiten desde WebView se deben reenviar al código nativo antes de enviarlas a Google Analytics.

Implementa un controlador JavaScript

El primer paso para usar Google Analytics en WebView es crear funciones de JavaScript a fin de reenviar eventos y propiedades del usuario al código nativo. En el siguiente ejemplo, se muestra cómo hacerlo de una manera compatible con el código nativo de Android y de 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

Llama al controlador de JavaScript desde tu WebView

Para registrar eventos y establecer propiedades del usuario de forma correcta desde un WebView, llama a las funciones de JavaScript que definiste en el paso anterior. En el siguiente ejemplo, se muestra cómo registrar correctamente un evento de compra y establecer una propiedad del usuario como ejemplo: 
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")    
}

Implementa una interfaz nativa

Para invocar código nativo de Apple desde JavaScript, crea una clase de controlador de mensajes conforme al protocolo WKScriptMessageHandler. Puedes hacer llamadas a Google Analytics dentro de la devolución de llamada userContentController:didReceiveScriptMessage::

Swift

Nota: Este producto de Firebase no está disponible en el segmento de 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

Por último, agrega el controlador de mensajes al controlador de contenido del usuario de WebView:

Swift

Nota: Este producto de Firebase no está disponible en el segmento de macOS. 
self.webView.configuration.userContentController.add(self, name: "firebase")
ViewController.swift

Objective-C

Nota: Este producto de Firebase no está disponible en el segmento de macOS. 
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];
ViewController.m

Registra eventos de compra directa desde la app de forma manual en un WebView en iOS

Puedes registrar manualmente eventos de IAP en un WebView con la versión 12.5.0 o posterior del SDK de Analytics.

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

Ten en cuenta que el SDK seguirá registrando automáticamente las compras directas desde la app siempre que sea posible y no quitará los duplicados de los eventos de compra directa desde la app registrados manualmente.

Próximos pasos

Para ver una implementación completamente funcional de Google Analytics en WebView, consulta el ejemplo de analytics-webview.