[Beta] Integrar AppsFlyer Web SDK

<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>

Repite esto en todas las páginas:

1. En el snippet del Paso 2, reemplaza WEB_DEV_KEY por tu Web SDK ID (y YOUR_BANNER_KEY si corresponde).
2. Pega el snippet cerca de la parte superior de la etiqueta del sitio web.

Asegúrate de que el SDK se cargue una sola vez por carga de página y configúralo para que se cargue tan pronto como la página se cargue utilizando la priorización de GTM.

1. Abre Google Tag Manager.
2. Crea una nueva etiqueta para AppsFlyer Web SDK.
3. Selecciona el tipo de etiqueta HTML personalizado.
4. Asigna un nombre descriptivo a la etiqueta.
5. Pega el snippet del Paso 2 en Configuración de la etiqueta.
6. Haz clic en Guardar.
7. Agrega un activador:
   • Para todas las páginas:
     1. Haz clic en Agregar activador.
     2. Selecciona Todas las páginas.
     3. Haz clic en Guardar.
     4. Ingresa un nombre para la etiqueta y luego haz clic en Guardar.
   • Para páginas específicas:
     1. Haz clic en Guardar etiqueta.
     2. En la ventana principal de GTM, selecciona Activadores. Haz clic en Nuevo.
     3. Haz clic en el ícono de lápiz.
     4. Selecciona el tipo de activador Vista de página.
     5. Selecciona Algunas vistas de página.
     6. Configura las condiciones de página y activación según sea necesario.
     7. Haz clic en Guardar.
     8. Asocia el activador a la etiqueta de AppsFlyer Web SDK:
        1. En la ventana principal de GTM, selecciona Etiquetas.
        2. Selecciona la etiqueta que creaste anteriormente.
        3. En el panel de activación, haz clic en el ícono de lápiz.
        4. Selecciona el activador de vista de página que creaste anteriormente.
        5. Haz clic en Guardar.

Crear una propiedad en Adobe Experience Cloud

1. Abre Adobe Experience Cloud > Lanzar.
2. En Adobe Experience Cloud Launch, haz clic en Ir al lanzamiento.
3. Haz clic en Nueva propiedad.
4. Asigna un nombre a la propiedad.
5. En Plataforma, selecciona Web.
6. Ingresa el dominio de tu sitio web.
7. Haz clic en Guardar.

Agregar el snippet a la propiedad de Adobe Launch

1. En la página Mi propiedad web, selecciona la pestaña Reglas.
2. Asigna un nombre a la regla. Recomendación: Cargar Web SDK.
3. En la sección SI, dentro de Eventos, haz clic en Agregar.
   • En Tipo de evento, selecciona Core – DOM Ready.
   • Haz clic en Conservar cambios.
4. En la sección ENTONCES, dentro de Acciones, haz clic en Agregar.
   • En Tipo de acción, selecciona Código personalizado.
   • Selecciona JavaScript > Abrir editor y pega el snippet del Paso 2 (sin líneas contenedoras).
   • Haz clic en Conservar cambios para cerrar el editor de código.
5. Haz clic en Guardar.

Agregar la etiqueta de Adobe Launch al sitio web

1. En la página Mi propiedad web, selecciona la pestaña Entornos.
2. Busca la fila correspondiente al entorno que deseas publicar (desarrollo o producción).
3. En la columna Instalar, haz clic en el ícono de cuadro de la fila correspondiente.
4. En el cuadro de diálogo Instrucciones de instalación web, copia el snippet de código y cierra el cuadro de diálogo.
5. Pega el snippet de código en la sección head del sitio web.

Publicar el entorno de Adobe Launch

1. En la página Mi propiedad web, ve a la pestaña Publicación.
2. En la sección Desarrollo, haz clic en Agregar nueva biblioteca.
   • Asigna un nombre a la biblioteca y selecciona un entorno.
   • En CAMBIOS DE RECURSOS, haz clic en Agregar un recurso.
   • Haz clic en Reglas > Cargar Web SDK > Última versión > Seleccionar y crear una nueva revisión.
   • Haz clic en Guardar.
3. En la sección Desarrollo:
   • Junto a la biblioteca recién creada, haz clic en el menú de acciones (3 puntos) > selecciona Compilar para desarrollo.
   • Haz clic nuevamente en el menú de acciones > selecciona Enviar para aprobación.
4. En la sección Enviado:
   • Haz clic en el menú de acciones > selecciona Compilar para staging.
   • Haz clic nuevamente en el menú de acciones > selecciona Aprobar para publicación.
5. En la sección Aprobado:
   • Haz clic en el menú de acciones > selecciona Compilar y publicar en producción.

Los eventos son los componentes fundamentales de la medición web y representan acciones específicas de los usuarios que tienen valor para tu negocio. Para registrar estas interacciones, debes definir la lógica y los parámetros de cada evento, asegurándote de que los parámetros correctos, como ingresos y metadatos personalizados, se envíen a la plataforma de AppsFlyer.

Evento de ejemplo (evento de compra con ingresos asociados)

AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

Este es el enfoque estándar para conversiones que terminan con una redirección, como una página de Gracias o de confirmación.

Puedes implementar este activador agregando un método de carga de ventana en tu JavaScript nativo o configurando un activador de vista de página dentro de Google Tag Manager.

window.onload = function(){
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion'}, eventName: 'subscription'});
}

<html>
<head>
    <script>
        // Google Tag Manager loads the Web SDK
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
    <script>
        function getResponseFromServer() {
            return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
        }
        localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' }));
    </script>
</head>
<body>
    <h1>Thank You for Subscribing to Our Newsletter</h1>
</body>
</html>

Utiliza esto para rastrear acciones sin recargar la página (clics en botones, descargas, agregar al carrito).

Estas interacciones generalmente se gestionan vinculando un listener de clics a un elemento HTML nativo o utilizando variables de Google Tag Manager para identificar y medir IDs de elementos o selectores CSS específicos.

<html>
<head>
    <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>
    <button id='checkout'>Checkout</button>
</body>
</html>

<html>
<head>
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

Para garantizar la precisión de los datos y una transmisión exitosa, ten en cuenta los siguientes requisitos técnicos:

• Orden de carga: Asegúrate de que la etiqueta de funciones de Web SDK esté completamente cargada en el ámbito de la página antes de realizar cualquier llamada de evento.
• Formato de datos: No incluyas caracteres especiales en los valores de los eventos. Por ejemplo, utiliza valores numéricos para los ingresos en lugar de incluir símbolos de moneda (usa 10.50 en lugar de $10.50).
• Límites de longitud de texto: Mantén tus cadenas event_value concisas; los valores superiores a 4000 caracteres serán truncados.

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

Supuesto: Web SDK ya está cargado en la página antes de enviar el evento; no lo cargues nuevamente.

Escenario 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 posterior al registro, consultas al servidor para obtener el nuevo CUID.
• Utilizando la respuesta del servidor, configuras el CUID de AppsFlyer mediante el método setCustomerUserId() de Web SDK.

Ejemplo de formulario de registro

El siguiente código es un formulario de registro simple. Cuando se envía el formulario, la dirección de correo electrónico se almacena en localStorage. Cuando el usuario llega a la página de agradecimiento, la dirección de correo electrónico se envía al servidor para obtener el CUID único asociado a ese correo.

<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>
        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>

Ejemplo de página de agradecimiento

El código utiliza la API Fetch. Envía al servidor la dirección de correo electrónico ingresada por el usuario. Suponiendo que el servidor crea un usuario con un CUID único al registrarse, enviar la dirección de correo electrónico al servidor devuelve un CUID único. El servidor responde con un CUID único, y este CUID es el valor que se envía mediante el método setCustomerUserId.

<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>
        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>

1. Configura una página de registro.

   El ejemplo de código a continuación es un formulario de registro simple. Cuando se envía el formulario, la dirección de correo electrónico se almacena en localStorage. Cuando el usuario llega a la página de agradecimiento, la dirección de correo electrónico se envía al servidor para obtener el CUID único asociado a ese correo.

   <html>
   <head>
       <script>
           (function (w, d, s, l, i) {
               w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
               var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
                   dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true;
               j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
               f.parentNode.insertBefore(j, f);
           })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
           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>

2. Configura una página de agradecimiento para los usuarios que se registran. El siguiente código corresponde a una página de agradecimiento con un activador de GTM que envía al servidor la dirección de correo electrónico proporcionada por el usuario en el formulario de registro. Suponiendo que el servidor crea un usuario con un CUID único al registrarse, enviar el correo electrónico al servidor devuelve un CUID único. El servidor responde con un CUID único, que se envía utilizando el método setCustomerUserId().

   <script>
       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>

3. Agrega una nueva etiqueta para atribuir suscripciones después de que se cargue la página de agradecimiento.

   

4. Asigna un nombre distintivo a la etiqueta y selecciona la opción de tipo de etiqueta HTML personalizado.

   

   <script>
       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>

5. Expande Configuración avanzada y luego Secuenciación de etiquetas debajo del área de texto, y asegúrate de que esté configurado para activar la conversión después de que se ejecute la etiqueta.

   

6. Configura un activador para la etiqueta de conversión que indique cuándo debe ejecutarse (en el ejemplo siguiente, se ejecuta al cargar la página de "Gracias").

   

Puedes controlar la medición de dos maneras:

Configuración del estado inicial del SDK (en el snippet)

Determina si el SDK envía eventos cuando la página web se carga por primera vez o si espera hasta que le indiques explícitamente que comience a enviarlos. Esta configuración se define en el snippet web.

• Enviar eventos: {pba: {webAppId: "...", measurementStatus:true}}
• No enviar eventos: {pba: {webAppId: "...", measurementStatus:false}}

Control explícito

El control explícito tiene prioridad sobre la configuración del estado inicial y utiliza cookies persistentes de first-party:

• Se establecen en el dominio del sitio web.
• Expiran después de un período definido por Web SDK o por el navegador.
• Siempre están sujetas a la configuración de cookies del navegador.

Comandos

• Comenzar a enviar eventos (opt-in): window.AF_SDK.PLUGINS.PBA.enableMeasurement()
• Dejar de enviar eventos (opt-out): window.AF_SDK.PLUGINS.PBA.disableMeasurement()

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 mediante una CSP, Web SDK admite dos enfoques según tu configuración de CSP y el snippet que seleccionaste en el Paso 2.

• CSP usando self: Agrega https://websdk.appsflyersdk.com a tu lista script-src de permitidos. Esto funciona tanto para Standard Web SDK como para Advanced SDK Verification.
• CSP utilizando nonce: Si tu política utiliza script-src 'nonce-...', usa la variante de Advanced SDK Verification extendida con nonce que aparece a continuación. Esto reenvía el nonce a las tres etiquetas script que requiere 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>

Descartar parámetros de consulta

Si los parámetros de consulta de tu URL contienen información sensible, indica a AppsFlyer que los descarte (URLs, referrers y header_referer).

• Descartar todos los parámetros de consulta: agrega af_url=true
• Descartar parámetros específicos: utiliza af_url_mask=param (separa varios parámetros con ;)

Ejemplo:

• Original: param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3
• Resultado: param1=value1&af_url_mask=param2;param3