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.
-
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>
- Paste the code snippet in the
head
en tu sitio web. Asegúrate de pegarlo cerca de la parte superior de la etiquetahead
.
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
- 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.
- 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.
- 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 usasshowBanner
para una aplicación contenedora/híbrida, usahideBanner
para las cargas de la aplicación móvil.
Argumentos de entrada
Tipo | Nombre | Descripción |
---|---|---|
String | bannerContainerQuery | Si 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 . |
Integer | bannerZIndex | Los 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> | additionalParams | Si 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
Tipo | Nombre | Descripción |
---|---|---|
<Key, Value Dictionary> | N/A | 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', '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ística | Observaciones |
---|---|
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. |
Actualizado hace 6 meses