Integra Connectif con Doofinder para utilizar los datos de búsqueda generados por cada contacto en los workflows de Connectif, así como insertar contenido dinámico generado en Connectif en los resultados de búsqueda proporcionados por Doofinder.
En este artículo, aprenderás cómo realizar la integración con Doofinder y cómo almacenar los términos y filtros de búsqueda en campos personalizados del contacto.
Esta integración solo funciona con Doofinder Live Layer.
Además, los clientes de Doofinder que estén utilizando plantillas personalizadas deberán avisar al equipo de Soporte de Doofinder de que quieren integrar con Connectif y, de esta manera, les añadirán una clase necesaria que no está por defecto en los custom.
Tiempo de implementación: 30 min.
Dificultad: Intermedio
¿Cuándo utilizarlo?: Para recoger la data de Doofinder e insertar contenido inline desde Connectif.
Por qué implementar la extensión
1. Casos de uso que podrás crear tras esta integración
Aquí te dejamos algunas ideas que pueden servirte para implementar diferentes estrategias tras activar en tu Tienda de Connectif la extensión con Doofinder.
En el layer de Doofinder:
- Personalizar Doofinder indicando al contacto el precio mínimo que es recomendable que ponga en el filtro para tener gastos de envío gratis en base a su carrito.
- Mostrar un cupón en los resultados de búsqueda o productos recomendados, dependiendo del valor del comprador.
En el eCommerce:
- Incluir un recomendador en la Home basado en la marca e intervalos de precios que ha indicado el contacto en Doofinder.
En los canales de comunicación:
- Enviar un email con sus productos personalizados a sus búsquedas a los contactos que hayan realizado una búsqueda en Doofinder incluyendo marca y precios y no hayan hecho nada más.
2. ¿Qué data podrás traer de Doofinder a Connectif?
Con esta extensión, Connectif recibirá desde Doofinder la información de:
- El momento en que un contacto realice una búsqueda en Doofinder.
- La marca y, en caso de que la use, la limitación de precio mínimo y máximo, filtrada por el contacto en su búsqueda.
3. ¿Qué data de Connectif podrás usar en Doofinder?
Asimismo, en Doofinder podrás aprovechar toda la información recogida en la ficha del contacto, así como su actividad en tiempo real, para personalizar el layer de Doofinder con los datos del contacto de Connectif.
Antes de empezar: requisitos previos
Para poder integrar tu cuenta de Connectif con Doofinder, necesitarás:
- Script para poder recoger la data de Doofinder (facilitada la base en este artículo).
- Google Tag Manager implementado en el store, para poder recoger el script con los datos que envía Doofinder.
Dependiendo del CMS, el script también puede implementarse en el código del eCommerce, pero hacerlo a través de Google Tag Manager es la opción más sencilla.
PASO 1: Creación de la integración personalizada en Connectif
1. Accede a Configuración de tienda en el menú lateral izquierdo.
2. En el selector de pestaña, ve a "Integraciones > Integraciones personalizadas (webhooks)" y haz clic en Crear nueva integración.
3. Establece el campo "Nombre de la integración" para identificar la integración.
4. (Opcional) Personaliza el color, incluye una descripción o categoriza la integración.
5. Haz clic en Actualizar.
PASO 2: Creación de los eventos de recepción
2.1. Creación del evento de recepción de apertura
(En este apartado se explica cómo crear y configurar el evento que recibirá a la apertura de Doofinder).
6. En la pestaña Recibir datos, haz clic en Crear nuevo evento de recepción.
7. Asígnale un nombre y el alias "doofinder-open-layer". Haz clic en Guardar.
Deberás asignarle este alias para que coincida con el del Script de Connectif. Si asignas otro alias, deberás cambiarlo en el script del Paso 3.
8. En la pantalla de confirmación, haz clic en Volver al listado de eventos.
2.2. Creación del evento de recepción de la información sobre marca y precio
(En este apartado se explica cómo crear el evento que recibirá la información sobre Marca, "Precio Desde" y "Precio Hasta" y configurar los campos donde se van a almacenar esos datos).
9. En la pestaña Recibir datos, haz clic en Crear nuevo evento de recepción.
10. Asígnale un nombre y el alias "doofinder-brand-price".
Deberás asignarle este alias para que coincida con el del Script de Connectif. Si asignas otro alias, deberás cambiarlo en el script del Paso 3. Además, debes tener en cuenta que el precio solo se recogerá si el contacto interactúa con el slider de precios de Doofinder.
11. Haz clic en Añadir un nuevo campo para crear cada uno de los campos personalizados y completa su información:
- Crea un campo con el nombre "Brand" y el ID "brand" de tipo Texto para recoger la marca.
- Crea un campo con el nombre "Price From" y el ID "priceFrom" de tipo Decimal para recoger el delimitador de precio mínimo.
- Crea un campo con el nombre "Price Up" y el ID "priceUpTo" de tipo Decimal para recoger el delimitador de precio máximo.
Puedes utilizar otros nombres para tus campos si así lo deseas, pero deberás utilizar esos IDs para que el script funcione.
12. Haz clic en Guardar.
13. En la pantalla de confirmación, haz clic en Volver al listado de eventos.
PASO 3: Integración en Google Tag Manager para activar el evento de Doofinder
14. Copia el siguiente Script:
Si no has utilizado los alias propuestos en este artículo para los eventos de recepción del Paso 2, tendrás que renombrarlos en el script para que coincidan con los tuyos.
<script>
(function () {
var connectifElementId = "connectif-doofinder-banner";
var selectorToInjectConnectifElement = ".dfd-ext";
var tempQuery = null;
var tempFirstBrand = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
var brandAndPriceEventAlias = "doofinder-brand-price";
var openDoofinderEventAlias = "doofinder-open-layer";
function sendConnectifEventsWhenReady(events) {
if (
window.connectif &&
window.connectif.managed &&
window.connectif.managed.isInitialized()
) {
window.connectif.managed.sendEvents(events);
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
window.connectif.managed.sendEvents(events);
},
{ once: true }
);
}
}
function debounce(func, timeout) {
var timer;
return function (data) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
func(data);
}, timeout);
};
}
window.document.addEventListener(
"doofinder.layer.search",
debounce(function onDooFinderSearch(event) {
var data = event.detail;
// ignore page navigation
if (data.page > 1) {
return;
}
var query = data.query;
var filter = data.filter;
var firstBrand =
(filter &&
filter.terms &&
filter.terms.brand &&
filter.terms.brand[0]) ||
null;
var priceFrom =
(filter &&
filter.range &&
filter.range.price &&
filter.range.price.gte) ||
(filter &&
filter.range &&
filter.range.best_price &&
filter.range.best_price.gte) ||
null;
var priceUpTo =
(filter &&
filter.range &&
filter.range.price &&
filter.range.price.lte) ||
(filter &&
filter.range &&
filter.range.best_price &&
filter.range.best_price.lte) ||
null;
var queryHasChanged = query !== tempQuery;
var brandHasChanged = firstBrand !== tempFirstBrand;
var priceRangeHasChanged =
priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
if (!queryHasChanged && !brandHasChanged && !priceRangeHasChanged) {
return;
}
tempQuery = query;
tempFirstBrand = firstBrand;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
function trackSearch() {
var events = [];
if (queryHasChanged) {
events.push({
type: "search",
searchText: query,
});
}
if (brandHasChanged || priceRangeHasChanged) {
events.push({
type: "custom",
eventAlias: brandAndPriceEventAlias,
payload: {
brand: firstBrand,
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0,
},
});
}
sendConnectifEventsWhenReady(events);
}
trackSearch();
}, 1000)
);
function onDooFinderShow(event) {
window.document.addEventListener("doofinder.hide", onDooFinderHide, { once: true });
function createCustomNode(id) {
var node = document.createElement("div");
node.setAttribute("dfd-update", "ignore");
node.setAttribute("id", id);
node.innerHTML = "";
return node;
}
function doesExistCustomNode(id) {
return !!document.getElementById(id);
}
function insertNode(node) {
var element = document.querySelector(selectorToInjectConnectifElement);
if (!element) {
console.warn("Connectif - Doofinder:", "cannot find dom element with selector "
+ selectorToInjectConnectifElement
+ ". For this reason we cannot insert the Connectif dom element "
+ connectifElementId
+ " used to personalized the search console. Also the custom event " + openDoofinderEventAlias + " won't be triggered.");
return false;
}
element.insertAdjacentElement("afterbegin", node);
return true;
}
if (!doesExistCustomNode(connectifElementId)) {
var customNode = createCustomNode(connectifElementId);
var result = insertNode(customNode);
if (result === false) {
return;
}
}
function trackOpenDooFinder() {
sendConnectifEventsWhenReady([
{
type: "custom",
eventAlias: openDoofinderEventAlias,
payload: {},
},
]);
}
trackOpenDooFinder();
}
function onDooFinderHide() {
window.document.addEventListener("doofinder.show", onDooFinderShow, { once: true });
}
window.document.addEventListener("doofinder.show", onDooFinderShow, { once: true });
})();
</script>
15. Accede a la cuenta de Google Tag Manager donde vayas a insertar el Script.
16. Dirígete a Etiquetas y haz clic en Nueva.
17. Asígnale un nombre.
18. Haz clic en Configuración de la etiqueta y asígnale el tipo HTML Personalizado.
19. En el bloque HTML pega el Script del punto 14.
20. Haz clic en Disparador y selecciona Todas las páginas.
Con esta configuración, el Script se activará en todas las páginas del eCommerce donde esté implementado Google Tag Manager.
21. Haz clic en Guardar.
Con este paso, cada vez que un contacto realice una búsqueda en Doofinder, el evento activará una acción en Connectif. Además, también se incluye la etiqueta div con la id "connectif-doofinder-banner" dentro del layer de Doofinder, para poder insertar contenido de tipo inline desde Connectif.
PASO 4: Almacenaje de la información en la ficha de contacto de Connectif
4.1. Creación de los campos de contacto
(En este apartado se explica cómo crear los campos personalizados para que los datos recogidos por Connectif puedan almacenarse en la ficha de contacto).
22. Accede a Connectif y dirígete, desde el menú lateral izquierdo, a "Contactos > Campos del contacto".
23. Haz clic en Añadir nuevo campo personalizado para crear cada uno de los campos personalizados y completa su información:
- Crea un campo con el nombre "Doofinder Brand" de tipo Texto para recoger la marca.
- Crea un campo con el nombre "Doofinder Price From" de tipo Número Decimal para recoger el delimitador de precio mínimo.
- Crea un campo con el nombre "Doofinder Price Up" de tipo Número Decimal para recoger el delimitador de precio máximo.
4.2. Creación del workflow para actualizar los campos
(En este apartado se explica cómo almacenar los datos enviados por Doofinder en Connectif a través de un workflow).
24. Accede desde el menú lateral izquierdo a la Workflows.
25. Haz clic en Crear nuevo workflow y selecciona Crear workflow en blanco.
26. Conecta al nodo "Inicio" el nodo de tipo Disparador que has creado para recibir la marca y el precio de Doofinder.
27. Conecta al nodo de tipo Disparador el nodo "Establecer campo".
28. Haz clic en (Editar configuración del nodo) del nodo "Establecer campo".
29. Arrastra los campos que acabas de crear, con origen de datos Contacto, de la columna de la izquierda hacia el bloque central, de modo que coincidan con los campos homónimos de la columna derecha.
30. Haz clic en Actualizar para guardar la configuración del nodo y guarda tu workflow.
¡Éxito!
La integración de tu cuenta de Connectif con Doofinder está lista.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Inline recomendador o cupón en Doofinder según recencia, para personalizar los resultados de búsqueda de Doofinder con un cupón a compradores o productos recomendados a no compradores.
- Integración personalizada para recibir datos, para aprender cómo hacer uso de información que no es registrada por defecto en la plataforma.
- Integraciones con sistemas externos, para integrar tu cuenta de Connectif con Facebook, formularios y otros webhooks de tu web.
-
Integraciones vía API, para administrar eventos como registros de compras o altas de contactos.