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

1. Ve a Google Tag Manager.
2. Crea una nueva etiqueta para el SDK web de AppsFlyer.
   

   

3. Selecciona el tipo de etiqueta Custom HTML (HTML personalizado).
4. Dale a la etiqueta un nombre significativo.
5. Realiza una de las siguientes acciones:
   • Si vas a integrar el SDK web sin Smart Banners:
     1. Pega el fragmento de código que sigue en la ventana Tag Configuration (Configuración de etiquetas).
     2. En el fragmento de código, reemplaza WEB_DEV_KEY utilizando la clave mencionada en los requisitos previos.
        

        <!-- AppsFlyer web SDK -->
        <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.appsflyer.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>

   • Si vas a integrar el SDK web con Smart Banners:
     1. Pega el fragmento de código que sigue en la ventana Tag Configuration (Configuración de etiquetas).
     2. En el fragmento de código, reemplaza WEB_DEV_KEY y YOUR_BANNER_KEY utilizando las claves mencionadas en los requisitos previos.
        

        <!-- AppsFlyer web SDK -->
        <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.appsflyer.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,banners",{pba: {webAppId: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
        AF('banners', 'showBanner');
        </script>

6. Haz clic en Save (Guardar). 
7. Realiza una de las siguientes acciones:
   • Para agregar el activador a todas las páginas:
     1. Haz clic en Add Trigger (Agregar activador).

        

     2. Selecciona All Pages (Todas las páginas).

     3. Haz clic en Save (Guardar).
        
     4. Escribe un nombre de etiqueta y haz clic en Save (Guardar).
        Has completado el procedimiento. 

   • Para agregar el activador a páginas específicas: 

     1. Haz clic en Save Tag (Guardar etiqueta).
     2. En la ventana principal de GTM, selecciona Triggers (Activadores). Haz clic en New (Nuevo).
     3. Haz clic en el icono de lápiz. 
     4. Elige el tipo de activador Page View (Vista de página).
        
     5. Selecciona Some Page Views (Algunas vistas de página).
     6. Configura la página y las condiciones de activación según sea necesario.
     7. Haz clic en Save (Guardar).
     8. Asocia el activador a la etiqueta AppsFlyer Web SDK. Para ello:
        1. En la ventana principal de GTM, selecciona Triggers (Activadores).
        2. Selecciona la etiqueta que creaste anteriormente.
        3. En el panel de activación, haz clic en el lápiz.
        4. Seleccione el activador de vista de página que creaste anteriormente.
           

           

        5. Haz clic en Save (Guardar).

1. Crear una propiedad en Adobe Experience Cloud
2. Agregar el SDK web a la propiedad de Adobe Launch
3. Agregar la etiqueta de Adobe Launch al sitio web
4. Publicar el entorno de Adobe Launch 

Cuando el sitio web se carga en un dispositivo móvil, la creatividad activa se muestra en el banner. Para mostrar el banner en páginas específicas o según las acciones del usuario, consulta las Reglas de Adobe Launch.

Registro de eventos cuando se carga una página de aterrizaje

• Tienes una página de suscripción para boletines informativos y deseas registrar las suscripciones realizadas correctamente.
• Configuras una página de agradecimiento a la que se redirige a los usuarios después de suscribirse correctamente.

1. Configurar una página de agradecimiento
   

   <html>
   <head>
       <script>
            // Google Tag Manager loads the Web SDK
           <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>
        <script>
           // Assume that the server returns a response with details about the newly subscribed user
           function getResponseFromServer() {
               return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
           }
           //Alternatively, you can extract data from localStorage or cookies,
           //in case data was set in either of them during the subscription process
           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>

   El código anterior carga GTM, que a su vez carga el SDK web. A partir de entonces, otras dos acciones tienen lugar en el script. Una es una función que obtiene una respuesta del servidor con los detalles del usuario. La otra establece los datos en el almacenamiento local. GTM tiene acceso tanto a la función como a localStorage. Puedes llamar a la función y acceder a localStorage usando GTM.

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

   

3. Dale a la etiqueta un nombre distintivo y selecciona la opción de tipo de etiqueta Custom HTML (HTML personalizado).
4. Pon el siguiente código en Custom HTML (HTML personalizado).
   

   <script> 
   AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'subscription'}); </script> 

   

5. Expande el control Advanced Settings (Configuración avanzada) y luego el control Tag Sequencing (Secuenciación de etiquetas) debajo del área de texto y asegúrate de que esté configurado para activar la conversión después de ejecutar la etiqueta.
   

   

6. Para activar la etiqueta de conversión, configura un activador. En el ejemplo, el activador se dispara al cargar la página de agradecimiento.
   

   

Registro de eventos cuando los usuarios interactúan con el sitio web

• Tienes un sitio web de eCommerce y deseas registrar los eventos de checkout.
• Después de que el usuario hace clic en el botón de checkout, el SDK web envía un evento a AppsFlyer.

1. Configurar una página de checkout
   

   <html>
   <head>
       <script>
           // Google Tag Manager loads the Web SDK
           <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>
       <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>

   El código anterior carga el SDK web usando GTM. El resto es simplemente HTML que imita una página de carrito de compras. Observa el botón Checkout que tiene el ID de checkout. Es necesario al configurar GTM para manejar un clic en ese botón.

2. En GTM, haz clic en Variables, haz clic en Configure (Configurar) y marca Click Element (Elemento de clic) en la lista de Built-In Variables (Variables incorporadas).
   
   
3. Crea una nueva variable, dale un nombre significativo y elige el tipo de All elements (Todos los elementos).
   
   
4. En la configuración del activador, elige Some Clicks (Algunos clics), y elige un Click Element (Elemento de clic) que coincida con el Selector CSS de #checkout.
   
   
5. Crea una nueva etiqueta para la acción de checkout, elige el tipo Custom HTML (HTML personalizado) y configura el activador en el activador de checkout.
   

   <script>
    AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'}); </script>

   

1. Configura una página de registro:

   <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-5VJ6C7R');
   
       // This function stores the user email to be sent to the server after the user reaches the thank you page
       // the response from the server is a unique CUID that should be used in 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>

   El código anterior es un formulario de registro sencillo. 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 del usuario se envía al servidor para obtener el CUID único para ese correo electrónico.

2. Configura una página de agradecimiento para los usuarios que se registren:

   (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.appsflyer.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>    

   El código anterior es una página de agradecimiento que tiene un activador GTM que envía al servidor la dirección de correo electrónico proporcionada por el usuario en el formulario de registro.
   Suponiendo que, al momento del registro, el servidor crea un usuario con un CUID único.
   El correo electrónico se envía al servidor con el propósito de recibir un CUID único.
   El servidor responde con un CUID único que se envía mediante el método setCustomerUserId().
   Continúa con este procedimiento para crear el activador y la pestaña.

3. Agrega una nueva etiqueta para atribuir las suscripciones después de que se cargue la página de agradecimiento.
4. Dale a la etiqueta un nombre distintivo y selecciona la opción de tipo de etiqueta Custom HTML (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 el control Advanced Settings (Configuración avanzada) y luego el control Tag Sequencing (Secuenciación de etiquetas) debajo del área de texto y asegúrate de que esté configurado para activar la conversión después de ejecutar la etiqueta.
   

   

6. Establece un activador para que la etiqueta de conversión indique cuándo se debe activar la etiqueta de conversión (en el siguiente ejemplo, se activa al cargar la página de agradecimiento).