Dejar de mostrar una campaña luego de la conversión

En este tutorial explicaremos la manera de utilizar la API de Prisma Campaigns en el proceso de dejar de mostrar una campaña a un cliente que haya convertido en esta. Los conceptos y pasos siguientes se aplican a cualquier caso de uso en el que se lleve a cabo la integración a través del SDK en una herramienta externa.

Antes de comenzar

La campaña utilizada en este artículo emplea un banner HTML y tiene un único paso de redirección a una URL interna. Es responsabilidad de la aplicación 1) manejar esta acción para desplegar una funcionalidad y 2) continuar el flujo del funnel hasta alcanzar la conversión.

Configuración de la campaña

Luego de crear una campaña y habilitar el canal Banners, agregaremos un banner HTML con el contenido que se muestra a continuación:

<a onclick="prisma.startFunnel.call(this)" href="#">
    <span>Me interesa</span>
</a>

Para poner en funcionamiento la redirección a una URL interna, definiremos un paso del funnel del tipo correspondiente tildando Open redirect in a new window y dejando Convert when redirection is done sin marcar. Esta decisión obedece al objetivo propuesto de dejar que la herramienta externa esté a cargo de indicar la conversión del cliente, comenzando por interceptar una URL interna (BM://TCRenovacion en la imagen de abajo):

A fin de que la campaña no se muestre al cliente luego de que convierta, será necesario indicarlo en la configuración de esta tildando la opción Don’t show campaign after customer converts:

Antes de proseguir, debemos asegurarnos de guardar los cambios y publicar la campaña.

Integración con una aplicación externa

Para comenzar, definiremos un callback OnRedirect para que intercepte las redirecciones cuya URL comienza con BM y ejecute la función que invoque la funcionalidad deseada. En este caso, utilizamos cargarFunnelInterno a tal efecto:

prisma.load(SERVER,
			PORT,
			APP_TOKEN,
			CUSTOMER_ID,
			INTEGRATIONS,
			PROTOCOL,
			{
				onRedirect: function(url, params) {
					if (url.startsWith('BM://')) {
						cargarFunnelInterno(params["trail-id"], params["tracking-token"]);
					} else {
						window.open(url);
					}
				}
			});

Aunque en el ejemplo actual se utiliza BM como protocolo de navegación interno, se puede definir uno distinto de acuerdo a las necesidades de la solución. En el caso de que la redirección sea externa, se puede recurrir a una redirección normal utilizando window.open o algún otro mecanismo que se estime conveniente.

Con el fin de manipular la navegación interna utilizaremos dos funciones para cargar el funnel (cargarFunnelInterno) y para realizar la conversión (convertirPrisma) luego de completarlo:

var convertirPrisma = function(trailId, trackingToken) {

	var convertURL = PROTOCOL + "//" + SERVER + ":" + PORT + "/api/traces/trail/" + trailId + "/action";
	const xhr = new XMLHttpRequest();
	xhr.onload = () => {
		if (xhr.status >= 200 && xhr.status < 300) {
			// Agregar código para manejar la conversión aquí
			console.log("Converted!");
		}
	};

	const json = {
		"name": "conversion",
		"type": "conversion",
		"data": [
			{
				"name": "tracking-token",
				"value": trackingToken
			}
		]
	};

	xhr.open('POST', convertURL);
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.send(JSON.stringify(json));
}

var cargarFunnelInterno = function(trailId, trackingToken){
	convertirPrisma(trailId, trackingToken);
}

Si el llamado a la API de conversión es exitoso, deberían suceder tres cosas:

1. La campaña no se mostrará al cliente aun cuando se soliciten los banners nuevamente. Al inspeccionar el tráfico de red empleando las herramientas para desarrolladores del navegador es normal que se observe una solicitud que falle con un código de error 410. Esto indica que es necesario renovar las trazas del cliente luego de que las anteriores se cerraran por la conversión.

   

2. La conversión se mostrará en el Customer Journey:

   

3. Las estadísticas en el análisis de la campaña incluirán la conversión:

   

Artículos relacionados

• Parámetros, integraciones y ejemplos con JavaScript (SDK)