Cómo activar los banners Singular (Guía para desarrolladores)

Seguir
Avatar
Dora Kishinevsky
Updated

Singular Banners es una función para empresas. Para obtener más información sobre esta función, póngase en contacto con su Customer Success Manager.

Actualización (marzo 2023): Se ha añadido un nuevo paso para permitir que Singular reciba sugerencias de clientes(más información).

Los Singular Banners pueden mostrarse en su sitio web móvil para conducir a los usuarios de la web sin problemas a su aplicación y mostrar el contenido más relevante de la aplicación. Una vez que habilite Singular Banners en su sitio web, su organización podrá diseñar, desplegar y mantener fácilmente los banners a través de la interfaz de usuario de Singular Banners.

Guía para Desarrolladores
Requisitos previos El SDK de Singular Mobile está integrado en su aplicación, incluida la compatibilidad con enlaces profundos.
Artículos relacionados
  • Cómo crear un Banner Singular (Guía Visual)
  • Preguntas frecuentes sobre Singular Banners

Paso a paso

1

Añada el script SDK de Singular Website a su sitio web

Singular aloja el código JavaScript del SDK en la CDN de Singular. Añada el siguiente código dentro de la etiqueta <head> de cada página que desee rastrear. Éste es el código que debe añadir para utilizar la versión del SDK que admite banners.

<head>
<!-- Uso de la última versión del SDK   -->
<script
 src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js">
</script>
</head>
2

Dar permiso a Singular para acceder a los datos de sugerencias del cliente

Con las nuevas limitaciones sobre los datos del agente de usuario en los navegadores web basados en Chromium, que entrarán en vigor en febrero-marzo de 2023, los anunciantes ahora necesitan obtener datos de sugerencias del cliente en su lugar, así como dar permiso a Singular Web SDK para recibir estos datos. Para más información, consulte las preguntas frecuentes sobre banners.

El sitio web necesita:

  1. Comenzar a solicitar las Sugerencias del cliente (encabezado accept-ch).
  2. Conceder permiso a Singular (como tercero) para que el navegador nos envíe las sugerencias del cliente en las solicitudes de obtención de banners (encabezado permissions-policy).

Añadir las siguientes cabeceras de respuesta a la respuesta de carga de la página:

accept-ch:
sec-ch-ua-model,
sec-ch-ua-platform-version,
sec-ch-ua-full-version-list

permissions-policy:
ch-ua-model=("https://sdk-api-v1.singular.net"),
ch-ua-platform-version=("https://sdk-api-v1.singular.net"),
ch-ua-full-version-list=("https://sdk-api-v1.singular.net")

 
3

Inicializar el SDK de Singular Website y mostrar el banner

El código de inicialización del SDK debe invocarse cada vez que se carga una página. Es un requisito previo para todas las funciones de Singular Banners y/o atribución web.

Para inicializar el SDK, utilice el siguiente código.

  • Necesitará su Clave SDK y Secreto SDK, que pueden obtenerse a través de la plataforma Singular en Herramientas de desarrollador > Claves SDK.
  • También necesitará introducir un ID de productopara su sitio web. Le recomendamos que utilice la notación DNS inversa, por ejemplo, "com.ejemplo.sitio". Se utilizará para identificar su sitio web en toda la plataforma Singular.
// Crear objeto de configuración Singular Banners y habilitar el soporte web-to-app.
// Web-to-app es necesario si desea rastrear qué red publicitaria condujo 
// al usuario a su sitio.
var bannersOptions = new BannersOptions().withWebToAppSupport();

// Cree un objeto de configuración general del SDK y active Banners Singular.
var config = new SingularConfig(sdkKey, sdkSecret,
   productId).withBannersSupport(bannersOptions);

// Inicializar el SDK
singularSdk.init(config);

// Pancarta
singularSdk.showBanner();

Notas:

  • Existen otras preferencias del SDK que puede configurar: consulte la Guía de integración del SDK de Singular Websitepara obtener más información.
  • Si también desea utilizar el SDK de Singular Website para realizar un seguimiento de los eventos e ingresos de los usuarios en su sitio web, siga las instrucciones de la Guía de integración del SDK de Singular Website.
4

Reshow Banner on Page Route (Sólo aplicaciones de una página)

Si su aplicación es de una sola página, debe ocultar y volver a mostrar el banner en cada ruta de página. Esto garantiza que Singular ofrezca el banner adecuado para su experiencia web.

Para ocultar y volver a mostrar el banner, utilice el siguiente código:

singularSdk.hideBanner();
singularSdk.showBanner();

Este es el último paso del proceso para una integración estándar. El equipo de UA ya puede empezar a crear banners iniciando sesión en Singular y accediendo a Automatización > Banners. Los banners se mostrarán en su sitio web en función de las opciones seleccionadas en Automatización > Banners.

Los siguientes pasos son opcionales.
5

[Opción avanzada] Personalizar la configuración de enlaces

Singular proporciona una forma de personalizar los enlaces en el banner a través de código.

Para personalizar los enlaces

  1. Cree un objeto LinkParams y utilice una o varias de las funciones siguientes. Haga esto antes de llamar a singularSdk.showBanner().
  2. Luego pase el objeto LinkParams cuando llame a showBanner().

Ejemplo:

// Definir un objeto LinkParams
let bannerParams = new LinkParams();

// Configurar las opciones de enlace (ver detalles de cada opción más abajo)
bannerParams.withAndroidRedirect("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");

// Mostrar el banner con las opciones definidas
singularSdk.showBanner(bannerParams);

Lista de opciones:

Método Descripción
withAndroidRedirect Pasa un enlace de redirección a la página de descarga de tu aplicación Android, normalmente una página de Play Store.
withAndroidDL Pasar un enlace profundo para una página dentro de tu aplicación Android.
withAndroidDDL Pasar un enlace profundo diferido, es decir, un enlace a una página de tu aplicación Android que el usuario aún no ha instalado.
withIosRedirect Pasar un enlace de redirección a la página de descarga de tu aplicación para iOS, normalmente una página de la App Store.
withIosDL Pasar un enlace profundo a una página dentro de tu aplicación iOS.
withIosDDL Pasar un enlace profundo diferido, es decir, un enlace a una página de tu aplicación para iOS que el usuario aún no ha instalado.
6

[Opción avanzada] Utilizar código para forzar la ocultación/visualización de banners

Como se mencionó en el paso 3, si tiene una aplicación de una sola página, tiene que utilizar los métodos hideBanner() y showBanner() en cada ruta de página para asegurarse de que se entrega el banner apropiado (véase el paso 3 anterior).

hideBanner() y showBanner() también están disponibles para que los utilices a lo largo de tu código si quieres ocultar un banner que de otro modo se mostraría, o volver a mostrar un banner que ocultaste.

Método Descripción
singularSdk.hideBanner() Oculta un banner visible de su página.
singularSdk.showBanner() Mostrar el banner preconfigurado.
singularSdk.showBanner(params) Mostrar el banner preconfigurado pero sustituyendo los enlaces con las opciones definidas en el objeto linkParams (ver paso 4).