Smart Banner v2

Resumen 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 muestren tus banners móviles.
El SDK de Smart Banner se autentifica utilizando la clave web única, que puedes obtener en el lugar de trabajo del sitio web.

Instalación

Smart banners only

You can either copy the smart banner script from the AppsFlyer dashboard or from below.

  1. Copy the script code snippet in one of the following ways:

    • Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
    • Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
<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<<<<"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner');
</script>
  1. Paste the code snippet in the head en tu sitio web. Asegúrate de pegarlo cerca de la parte superior de la etiqueta head .

ℹ️

Nota

The showBanner al final del código de instalación puede tomar más parámetros. Aprender más

Smart banners and People-Based Attribution

  1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
  2. Reemplaza el marcador de posición YOUR_PBA_KEY en la secuencia de comandos con tu clave de desarrollador web. 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"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>

Controlar la fuente de Smart Banner

Usar la misma fuente en el Smart Banner que en el resto del sitio web crea una identidad visual consistente y cohesiva para tu marca.

Para cambiar la fuente predeterminada en el Smart Banner, debes agregar la siguiente regla a tu CSS:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

Por ejemplo:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

  • The !important es obligatorio.
  • Asegúrate de que la fuente ya esté cargada en tu sitio web.
  • La fuente personalizada se aplicará a todos banners del sitio web.
  • Si la fuente no se muestra correctamente, vuelve a enviar tu banner en el editor creativo.

Funciones del SDK

showBanner

Firma de método

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

Descripción
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 Smart Banners en una aplicación contenedora/híbrida para cargar la página del banner desde la aplicación (y no desde el navegador), ya que usar showBanner mostrará el banner dentro de la aplicación. Si usas showBanner para una aplicación contenedora/híbrida, usa hideBanner para las cargas de la aplicación móvil.

Argumentos de entrada

TipoNombreDescripción
StringbannerContainerQuerySi se 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. De lo contrario, se utiliza document.body .
IntegerbannerZIndexLos Smart Banners están por defecto establecidos en el valor máx. del índice z, por lo que los elementos del sitio web no los ocultan. Esto se puede cambiar si deseas que algunos componentes del sitio web estén en la parte superior del banner.
<Key, Value Dictionary>additionalParamsSi se pasan, estas claves y valores (por ejemplo, deep_link_value: apples) se agregan como parámetros de consulta a la URL de OneLink.

Ejemplos de uso

  • Agregar parámetros a la URL de OneLink
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
  • Establecer el índice Z de este banner y un ID de contenedor para su colocación
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

Firma de método

AF('banners', 'updateParams', { <Key, Value Dictionary> });

Descripción
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 se muestre 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 nombrar una clave: undefined, null, NaN o arg
Caracteres no válidos:
Clave: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Valor = \, ;, $, >, <, ^, #, ``

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

Argumentos de entrada

TipoNombreDescripción
<Key, Value Dictionary>N/AEstas claves y valores (por ejemplo, deep_link_value: apples) se agregan como parámetros de consulta a la URL de OneLink.

Ejemplos de uso

  • Agregar parámetros a la URL de OneLink
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

Firma de método

AF('banners', 'hideBanner');

Descripción

Elimina programáticamente cualquier banner que se muestre de la página (por ejemplo, después de una determinada entrada del usuario).

Argumentos de entrada

Nada

Ejemplos de uso

  • Ocultar banner
AF('banners', 'hideBanner');

Traits and Limitations

CaracterísticaObservaciones
Single page application (SPA)Smart Banners are by default only displayed once, even if users navigate between pages.
To display banners when users navigate between pages, you need to manually call hideBanner and showBanner for every navigation that doesn't reload the page and trigger the Smart Banners default logic.