Guía de integración del SDK web para la PBA

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

Consideraciones y acciones requeridas

Antes de empezar:

• Verifica con el marketer que haya creado el paquete de marca. 
• Para obtener orientación adicional, consulta la Guía de onboarding de PBA.
• Consideración: Si ya tienes el SDK web independiente de Smart Banners, elimínalo y reemplázalo con el SDK web tanto para los Smart Banners como para la atribución people-based; no agregues solo el SDK web independiente para PBA. 

Haz lo siguiente:

• Obtén la clave de desarrollador web del SDK web. ¡Nota! Esta no es la misma clave que utilizan las aplicaciones móviles.
  • Para obtener la clave de desarrollador web: 
    1. En AppsFlyer, en el menú superior, selecciona la pestaña Mis aplicaciones.
    2. Haz clic en Ver paquetes de marca.
    3. Copia la clave de desarrollador web requerida (WEB_DEV_KEY).
• Si implementas Smart Banners, obtén la clave del Smart Banner. 
  • Para obtener la clave del Smart Banner:
    1. En AppsFlyer, desde el menú lateral, ve a Engage > Web-to-App > Smart Banners.
    2. Copia la clave del Smart Banner requerida. 
• Obtén los permisos para agregar scripts a etiquetas de encabezado en el sitio web.
• Si utilizas Google Tag Manager, deberá estar integrado en el sitio web.

A continuación, integra el SDK web utilizando una de las siguientes opciones. 

Una vez instalado, comprueba que el navegador del visitante llame al SDK web de AppsFlyer y que se envíen mensajes. Esto se hace examinando la conexión de red de mensajes reportada en el navegador.

Para comprobar que el SDK se carga y funciona:

1. Ve al sitio web.

2. Abre las herramientas para desarrolladores del navegador.

   

3. Ve a la pestaña (A) Red. 
4. Actualiza la página.
5. Filtra por (B) wa.appsflyer.
6. Selecciona el mensaje de eventos (C).
7. En la pestaña Encabezados (D), asegúrate de que:
   • La URL de solicitud es wa.appsflyer.com/events.
   • site_id query parameter= WEB_DEV_KEY.
   • (E) El estado del código es 200.
8. Verifica que el valor de site_id sea igual al valor de WEB_DEV_KEY en la configuración del paquete de marca:
   1. En AppsFlyer, en el menú lateral, selecciona Configuración > Paquetes de marca.
   2. Haz clic en la Clave de desarrollador web; al hacerlo, se copia la clave.
   3. Pega la clave en cualquier ubicación (nueva pestaña del navegador, bloc de notas) para mostrar la clave.
   4. Verifica que el site_id y WEB_DEV_KEY coincidan. 
9. Asegúrate de que el SDK se cargue solo una vez. La carga múltiple del SDK puede hacer que el SDK deje de funcionar.

El SDK web envía datos de los eventos de los visitantes a AppsFlyer. Puedes controlar, detener o iniciar el envío de eventos como se describe en esta sección. 

Consideración:

• Configuración del estado inicial del SDK: Determina si el SDK envía eventos al cargar inicialmente la página web o si el SDK debe esperar hasta que des un comando explícito para comenzar a enviar eventos. La configuración está incluida en el fragmento web.
• Control explícito: úsalo para detener o iniciar el envío de eventos. Por ejemplo, si implementas banners de aceptación/exclusión voluntaria de datos (también conocidos como banners de consentimiento de cookies), integra los comandos explícitos en los controles de tu banner para iniciar y detener el envío de eventos. El control explícito tiene prioridad sobre la configuración del estado inicial del SDK y utiliza cookies propias persistentes que tienen las siguientes características:
  • Se establecen en el dominio del sitio web.
  • Caducan después de un período establecido por el SDK web o según lo determine el navegador. Después de que caduquen las cookies, el SDK web vuelve a la configuración del estado inicial.
  • La cookie del SDK web no interfiere y siempre está sujeta a la configuración de cookies específica del navegador.
     

Configuración del estado inicial del SDK

Control explícito

Si tu sitio web requiere estrictos protocolos de seguridad o privacidad de datos, utiliza los siguientes mecanismos para configurar cómo interactúa el SDK web con tu entorno y tus datos.

Política de Seguridad de Contenido (CSP)

Si tu sitio web requiere que JavaScript esté protegido por un CSP, el SDK web admite dos enfoques según la configuración de tu CSP.

• CSP usando self: Agrega https://websdk.appsflyersdk.com a tu lista script-src de permitidos. Esto funciona tanto para el Standard Web SDK como para Advanced SDK Verification.
• CSP usando nonce: Si tu política utiliza script-src 'nonce-...', puedes utilizar la variante nonce-extended de Advanced SDK Verification. Esto reenvía el nonce a las tres etiquetas de script requeridas por el proceso de verificación. Reemplaza {{CSP_NONCE}} con tu valor nonce generado por el servidor, por solicitud.

La siguiente tabla muestra qué políticas de CSP son compatibles con la variante nonce-extended.

Advanced SDK Verification con fragmentos de CSP nonce

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

Si los parámetros de consulta contienen datos que no deseas que AppsFlyer registre, puedes indicar a la plataforma de AppsFlyer que descarte algunos o todos los parámetros de consulta. Al hacerlo, no estarán disponibles en el raw data ni en los reportes. 

Puedes implementar los métodos descritos en relación con URL, referentes y header_referer.

Opciones de descarte de consultas

• Los eventos de usuario son registrados por el SDK, que envía el evento a la plataforma AppsFlyer.
• Utilizando la lista de eventos de conversión establecida por el marketer, AppsFlyer divide los eventos en eventos estándar y de conversión.
• Los datos de los eventos de conversión están disponibles en los paneles de control de la PBA.
• Los datos de los eventos estándar y de conversión están disponibles en los reportes de raw data.

Eventos de conversión

• Los eventos de conversión brindan insights sobre tus esfuerzos comerciales y de marketing. Los eventos de conversión incluyen compras, descargas, registros y suscripciones.
• La PBA atribuye los eventos de conversión a la fuente de medios que llevó al usuario a visitar el sitio web.
• Al identificar la fuente de medios atribuida, puedes medir y diferenciar la calidad de los usuarios aportados por diferentes fuentes de medios.
• Los eventos de conversión se utilizan para registrar los ingresos y calcular el ROI.
• Utilízalos para comparar el presupuesto de los anuncios de fuentes de medios específicas con los ingresos generados por los usuarios que provienen de estas fuentes de medios.

Eventos estándar

• Los eventos estándar se utilizan para validar la trayectoria del usuario y los embudos que generan conversiones.
• Utilízalos para medir la actividad de los usuarios y resaltar las fuentes de medios que atraen a los usuarios comprometidos.
• Registra la actividad de los usuarios para marcarlos para campañas de reengagement.

Registro de eventos

Activa el SDK web para registrar eventos cuando se cumplan ciertas condiciones, por ejemplo, cuando se carga una página de aterrizaje o cuando los usuarios interactúan con los elementos del sitio web. Consulta los ejemplos de registro de eventos.

• Los usuarios web se identifican en AppsFlyer mediante el CUID único que les asignas. Normalmente, el CUID lo administran los servidores backend. 
• Utiliza el mismo valor CUID que utilizas en el entorno móvil. Hacerlo te permitirá tener una visión holística de la actividad de los usuarios en múltiples plataformas. La función en el SDK móvil es setCustomerUserId (iOS, Android, Unity).
• Para establecer el CUID en el SDK web:
  • Establece el CUID tan pronto como tengas acceso a él. La mayoría de las veces, esto significa que debes esperar a que el usuario se identifique iniciando sesión o registrándose.
  • Activa la llamada de JavaScript a setCustomerUserId() como se muestra en el siguiente ejemplo.
    Nota: Envía el CUID como una cadena incluso si es un número. Para ello, ponlo entre comillas.
• Si implementas S2S web, ten en cuenta que es posible que debas notificar a la PBA cuando asocies un CUID con un ID de visitante web en tu backend. 
• Los CUID no deben contener información personal directamente identificable,como un número de teléfono o una dirección de correo electrónico.

Ejemplo: establecer el CUID

// Associate all current user web events to distinct ID 663274 
AF('pba', 'setCustomerUserId' , '663274')

Evento de ejemplo

// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

Los eventos que envías dependen de la naturaleza de tu aplicación web. Por ejemplo, una aplicación de tienda en línea requiere un conjunto de eventos diferentes a los de un medio de comunicación. Mira los escenarios siguientes para tener una idea de los eventos que debes enviar y cuándo.

Tienda en línea

Supongamos que administras una tienda en línea. Algunos eventos estándar que quizás quieras registrar serían: 

• Buscar: evento estándar
• Agregar al carrito: evento estándar
• Quitar del carrito: evento estándar
• Comprar: evento de conversión

Medio informativo

Supongamos que estás administrando un medio informativo. Algunos eventos que quizás quieras registrar serían:

• Registro: evento de conversión
• Compra de suscripción: evento de conversión

Esta parte está destinada a desarrolladores web.

Prueba la integración del SDK web para la PBA: consulta los eventos de prueba en tiempo real.

Para garantizar que los eventos se envíen a AppsFlyer:

1. Abre el sitio web.
2. Abre las herramientas para desarrolladores del navegador.
   • Cómo abrir las herramientas para desarrolladores en Chrome
   • Cómo abrir las herramientas para desarrolladores en Safari
3. Cambia a la pestaña Network (Red).
4. Activa el evento.

5. Filtro por mensaje.

   

6. Busca una solicitud de red que comience con el destino wa.appsflyer.com (observa la captura de pantalla a continuación).
7. Asegúrate de que:
   1. El código de estado es 200.
   2. La carga útil de solicitud se alinea con los parámetros del evento.

El código proporcionado es solo para fines ilustrativos. No utilices este código tal como está. 

• Supuestos: la página ya ha cargado el SDK web en el momento en que se envía el evento.
• Los escenarios de ejemplo contienen el código para registrar eventos cuando: 
  • se carga una página de aterrizaje.
  • los usuarios interactúan con el sitio web.

<html>
    <head>
        <!-- Assume that the server returns a response with details about the newly subscribed user -->
        <!-- Alternatively, you can extract data from localStorage or cookies,
            in case data was set in either of them during the subscription process
        -->
        <script>window.onload = function(){
            AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'}, eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>

<html>
<head>
    <!-- Assume that data about products in the shopping cart
    is stored in localStorage -->
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <h2>Shirt</h2>
    <p>
        <ul>
            <li>Color: Blue</li>
            <li>Quantity: 2</li>
            <li>Price: $20</li>
        </ul>
    </p>
    <h2>Pants</h2>
    <p>
        <ul>
            <li>Color: Black</li>
            <li>Quantity: 3</li>
            <li>Price: $15</li>
        </ul>
    </p>
    <button id='checkout'>Checkout</button>
</body>
</html>

• Asegúrate de que la etiqueta de funciones del SDK web esté cargada antes de que se active el evento.
• No envíes caracteres especiales en los valores de los eventos, como símbolos de moneda en el valor de los ingresos.
• Las cadenas de valores deben tener menos de 50 caracteres.

El código proporcionado en estos ejemplos es solo de referencia. No utilices este código tal como está. Si no estás seguro de cómo utilizar este código, consulta a tu desarrollador web. 

Supuesto: La página carga el SDK web antes de enviar el evento; no cargues el SDK nuevamente.

Situación del usuario:

• Un usuario se registra en tu sitio web.
• El código del sitio web recopila los datos del usuario y los envía a tu servidor.
• El servidor genera un CUID único para el usuario.
• En la página de agradecimiento después del registro, consultas al servidor el nuevo CUID.
• Mediante la respuesta del servidor, configuras el CUID de AppsFlyer mediante el método setCustomerUserId() del SDK web.

<html>
<head>
    <!-- The Web SDK script loads first -->
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        };
    // This function stores the user email sent to the server after the user reaches the thank you page
    // The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
        function storeUserEmail (){
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label>
            <input type="text" name="name" id="name"></div>
        <br />
        <div> <label>Email</label>
            <input type="email" name="email" id="email"></div>
        <br />
        <input type="submit" id="submit">
    </form>
</body>
</html>

<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        // Using the fetch API to send the user email to the server
        // and get the unique user id in return	
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                   res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }  </script> 
     </head> 
     <body> 
        <h1>Thank You for Signing Up!</h1> 
     </body> 
</html>

La función setCustomerUserId se puede enviar en cualquier etapa del flujo del usuario, por ejemplo, después de iniciar sesión y registrarse. AppsFlyer utiliza el CUID más reciente enviado para actualizar al usuario observado actual para puntos de contacto y eventos pasados ​​o futuros.

Utiliza el mismo valor CUID que utilizas en la función setCustomerUserId en la aplicación móvil (consulta el setCustomerUserId móvil para: iOS, Android, Unity)

Las cookies enumeradas en la siguiente tabla son configuradas o utilizadas por el SDK web en tu sitio web. 

En la tabla se utilizan las siguientes abreviaturas:

• AMP: Páginas móviles aceleradas 
• CDN: Red de entrega de contenido
• 3PC: Cookies de terceros

• Un aviso de entrada en desuso proporciona un aviso de nuestra intención de dejar de admitir una función o método. La función o el método continúa funcionando hasta su fecha de vencimiento.
• Considera los avisos de entrada en desuso como una oportunidad para realizar cambios en tu código.