Implementación de código de sitio web de Banners inteligentes para desarrolladores

Para:
Desarrolladores
Última actualización:

De un vistazo: Agrega el SDK de Banners inteligentes a tu sitio web para que los marketers puedan convertir a los visitantes de tu sitio web en usuarios de aplicaciones móviles.

 Lectura relacionada:

Para obtener un panorama completo de cómo trabajar con banners inteligentes, consulta estos artículos:

 Nota

A partir del 1 de octubre de 2023, el SDK web de AppsFlyer para Smart Banners v1 quedará en desuso. Aprender más

Información general

AppsFlyer proporciona un SDK de Smart Banner que los anunciantes integran en sus sitios web. El objetivo del SDK es extraer todos los datos necesarios para mostrar dinámicamente los Smart Banners. El SDK de Smart Banners también crea automáticamente los enlaces de atribución adecuados, por lo que no necesitas crearlos manualmente.

Por lo tanto, el SDK de Smart Banner debe ser accesible desde todas las páginas que muestran tus banners móviles.

El SDK de Smart Banner se autentifica utilizando la clave web única, que puedes obtener en el espacio de trabajo del sitio web.

Fragmento de código

 Nota

A partir del 1 de enero de 2020, el SDK para banners inteligentes te permite usar tanto banners inteligentes como atribución basada en personas en tu sitio web. Los siguientes fragmentos de SDK contienen dos ejemplos:

Si ya tienes el SDK web de PBA independiente, elimínalo y reemplázalo por el SDK web tanto para banners inteligentes como para la atribución basada en personas; no agregues solo el SDK web independiente para banners inteligentes. 

Incluye este fragmento de código en la etiqueta <head> de cada página que muestre tus banners móviles.

Fragmento de código SDK Fragmento SDK antiguo: en desuso

SDK web de AppsFlyer solo para Smart Banners

  1. Reemplaza el marcador de posición YOUR_WEB_KEY en la secuencia de comandos con tu clave web. La clave web se crea al crear un nuevo espacio de trabajo del sitio web.
  2. Pega este fragmento de código en la etiqueta de encabezado de tu sitio web. Asegúrate de pegarlo cerca de la parte superior de la etiqueta de encabezado.
<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","banners",{banners: {key: "YOUR_WEB_KEY"}});

// Los Banners inteligentes están configurados por defecto con el valor max z-index, de modo que serán ocultados por los elementos del sitio web. Esto se puede cambiar si deseas que algunos componentes del sitio web estén en la parte superior del banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

SDK web de AppsFlyer para Smart Banners y atribución basada en las personas

  1. Reemplaza el marcador de posición YOUR_WEB_KEY en la secuencia de comandos con tu clave web. La clave web se crea al crear un nuevo espacio de trabajo del sitio web.
  2. Reemplaza el marcador de posición YOUR_PBA_KEY en la secuencia de comandos con tu clave de desarrollador. La clave de desarrollador web se crea cuando creas un paquete de marca. 
  3. Pega este fragmento de código en la etiqueta de encabezado de tu sitio web. Asegúrate de pegarlo cerca de la parte superior de la etiqueta de encabezado.
<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: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});
// Los Banners inteligentes están configurados por defecto con el valor max z-index, de modo que serán ocultados por los elementos del sitio web. Esto se puede cambiar si deseas que algunos componentes del sitio web estén en la parte superior del banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

Funciones del SDK

showBanner

Finalidad: 

Empieza a mostrar el Smart Banner de acuerdo con la clave de banner proporcionada en el fragmento.

Nota: No uses esta función cuando implementes Banners inteligentes en una aplicación de contenedor/híbrida para cargar la página del banner desde la aplicación (y no desde el navegador), ya que al usar showBanner se mostrará el banner dentro de la aplicación. Si usas showBanner para una aplicación de contenedor/híbrida, usa hideBanner para las cargas de la aplicación móvil.

Parámetros (opcional):

  • bannerContainerQuery
    Si pasa, el SDK intenta localizar un elemento en la página con esta consulta y lo trata como el punto de entrada para la colocación del banner. En caso contrario, se utiliza document.body.
  • bannerZIndex
    Los banners inteligentes se configuran de forma predeterminada en el valor máximo del índice z, por lo que no estarán ocultos por los elementos del sitio web. Esto se puede cambiar si quieres que algunos componentes del sitio web estén en la parte superior del banner.
  • additionalParams
    Si se transmiten, estos parámetros (por ejemplo, deep_link_value) se agregan como parámetros de consulta a la URL de OneLink. 

Ejemplo:

SDK nuevo SDK antiguo: en desuso 
AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,              
              additionalParams: { p1: "v1", p2: "v2"...}});

updateParams

Finalidad

Agrega programáticamente hasta 10 parámetros (por ejemplo, deep_link_value) a la URL de OneLink asignada al botón de llamada a la acción (CTA), después de que aparezca el banner. 

La entrada es un objeto con claves y valores de parámetros.

  • Una clave no puede tener un valor vacío.
  • No se puede poner nombre a una clave: undefined, null, NaN o arg
  • Caracteres inválidos:
    • Clave: /, \, *, !, @, #, ?, $, %, ^, &, ~, `, =, +, ', ", ;, :, >, <
    • Valor = \, ;, $, >, <, ^, #, `

Ejemplo

AF ("banners", "updateParams", {p1: "v1", p2: "v2"...})

consideraciones

  • Los parámetros se agregan como parámetros de consulta a la URL de OneLink. 
  • Cuando usas updateParams para agregar parámetros, la URL de impresión es diferente a la URL de clic.
  • Los parámetros agregados no reemplazan a los de la URL de OneLink original. Si el parámetro que agregas ya está en la URL de OneLink, no cambia. 
  • Si se llama más de una vez a updateParams, solo se agregan a la URL los parámetros de la última llamada.
  • Este método no funciona con el SDK web de Smart Banner en desuso.

hideBanner

Finalidad

Eliminar programáticamente cualquier banner mostrado de la página (p. ej., después de mostrarse durante X segundos).

AF('banners', 'hideBanner')

disableBanners: en desuso

Finalidad

Esta función solo está disponible en el antiguo SDK de Smart Banners y quedará en desuso.

Deshabilita el SDK web para que no muestre banners ni se comunique con los servidores de AppsFlyer.

disableTracking: en desuso

Finalidad

Esta función solo está disponible en el antiguo SDK de Smart Banners y quedará en desuso.

Deshabilita el SDK web y borra los rastros de la información recopilada del navegador (es decir, almacenamiento local, cookies, etc.).

setAdditionalParams: en desuso

Finalidad

Esta función solo está disponible en el antiguo SDK de Smart Banners y quedará en desuso.

Configura additionalParams en el OneLink antes de llamar a showBanner. Los parámetros se agregan a la URL de OneLink detrás del banner.

Parámetros

  • Params
    Mapa de parámetros de clave/valor que pueden anular cualquier parámetro de enlace de atribución preexistente (además del valor pid).

Ejemplo de uso

Deseas diferenciar entre páginas de aterrizaje utilizando parámetros específicos. Para hacerlo, puedes agregar parámetros adicionales al OneLink detrás del banner. Cuando un usuario instala tu aplicación después de hacer clic en el banner, los parámetros de OneLink aparecen en el raw data para que los analices. El siguiente ejemplo de código utiliza el parámetro af_sub1.

// llama a este método antes de llamar a showBanner()
setAdditionalParameters('af_sub': 'custom_paramter_value')

El formato del OneLink final es este: subdomain.onelink.me/onelink-id?pid=af_banner&c=campaign&af_sub1=custom_paramter_value.

El subdominio y el ID de OneLink se toman de la plantilla de OneLink.

For example: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.

Puedes utilizar cualquier parámetro válido. Para obtener más información sobre los parámetros en los enlaces de atribución, consulta aquí. Asegúrate de no anular los parámetros pid y c, porque estos ya existen en el enlace de atribución detrás del banner.

getAdditionalParams: en desuso

Finalidad

Esta función solo está disponible en el antiguo SDK de Smart Banners y quedará en desuso.

Obtén el objeto additionalParams actual.

Rasgos y limitaciones

Característica Observaciones
Aplicación de una sola página (SPA)

De forma predeterminada, los banners inteligentes solo se muestran una vez, incluso si los usuarios navegan entre páginas.

Para mostrar los banners cuando los usuarios navegan entre páginas, es necesario llamar manualmente a hideBanner y showBanner para cada navegación que no recargue la página y active la lógica de banners inteligentes por defecto.