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.
Una vez realizada la integración podrás crear tus estrategias de personalización en Doofinder, como la de este artículo, donde te enseñamos cómo insertar un inline en base al valor del comprador.
Tiempo de implementación: 30 min.
Dificultad: Intermedio
¿Cuándo utilizarlo?: Para recoger la data de Doofinder e insertar contenido inline desde 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.
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" de tipo Texto para recoger la marca.
- Crea un campo con el nombre "PriceFrom" de tipo Decimal para recoger el delimitador de precio mínimo.
- Crea un campo con el nombre "PriceUp" de tipo Decimal para recoger el delimitador de precio máximo.
Puedes utilizar otros nombres para tus campos si así lo deseas.
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 brandAndPriceEventAlias = 'doofinder-brand-price';
var openDoofinderEventAlias = 'doofinder-open-layer';
var connectifElementId = "connectif-doofinder-banner";
var tempQuery = null;
var tempFirstBrand = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
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.best_price &&
filter.range.best_price.gte) ||
null;
var priceUpTo =
(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;
var connectif = window.connectif;
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,
},
});
}
connectif.managed.sendEvents(events);
}
if (connectif && connectif.managed) {
trackSearch();
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
trackSearch();
}
);
}
}, 1000));
window.document.addEventListener('doofinder.show', function onDooFinderShow(event) {
function createCustomNode(id) {
var node = document.createElement("div");
node.setAttribute("dfd-update", "ignore");
node.setAttribute("id", id);
node.innerHTML = "";
return node;
}
function insertNode(node) {
var header = document.querySelector(".dfd-header");
header.insertAdjacentElement("afterend", node);
}
if(document.getElementById(connectifElementId)) {
// element already exists, no need to add it again
return;
}
var customNode = createCustomNode(connectifElementId);
insertNode(customNode);
function trackOpenDooFinder() {
connectif.managed.sendEvents([
{
type: "custom",
eventAlias: openDoofinderEventAlias,
payload: {},
},
]);
}
if (connectif && connectif.managed) {
trackOpenDooFinder();
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
trackOpenDooFinder();
}
);
}
})
})();
</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.