Integración con Empathy

8. 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 "PriceFrom" y el ID "priceFrom" de tipo Decimal para recoger el delimitador de precio mínimo.
• Crea un campo con el nombre "PriceUpTo" y el ID "priceUpTo" de tipo Decimal para recoger el delimitador de precio máximo.

9. Haz clic en   Guardar.

PASO 3: Creación del workflow para activar el evento durante la navegación del contacto

(En este apartado se va a crear el workflow que recogerá la actividad del contacto durante su navegación por el buscador de Empathy dentro del eCommerce. Esta actividad se recogerá mediante un script que se insertará en el eCommerce mediante un inline).

10. Dirígete a Workflows y crea un nuevo workflow en blanco.

11. En la configuración del nodo "Inicio", en el área Selecciona una limitación escoge Toda mi lista y, en Selecciona una fuente de datos marca Todos los existentes y los nuevos.

12. Añade el nodo disparador "Al visitar página" para que el workflow se active en el momento que un contacto visite la web.

13. Accede a su configuración y, en la pestaña Limitaciones, elimina todas las limitaciones.

14. Añade el nodo "Enviar contenido web" para insertar el Script que comprobará la actividad del contacto en Empathy.

15. Accede a su configuración y crea un nuevo contenido de tipo Inline.

16. Dentro del editor de contenido, añade un componente de tipo HTML.

17. Edítalo, copiando y pegando el siguiente código:

<script>
  (function () {
  var searchEventAlias = "empathy-search";
  var tempQuery = null;
  var tempPriceFrom = null;
  var tempPriceUpTo = null;

  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);
    };
  }

  function isInterfaceXDefined() {
    return !!window.InterfaceX;
  }

  function whenInterfaceXReady() {
    if (isInterfaceXDefined()) {
      return Promise.resolve();
    }
    var numberOfChecks = 50;
    var count = 0;
    return new Promise((resolve, reject) => {
      function check() {
        setTimeout(function () {
          if (isInterfaceXDefined()) {
            resolve();
          } else {
            count++;
            if (count === numberOfChecks) {
              reject(new Error("InterfaceX cannot found after timeout"));
            } else {
              check();
            }
          }
        }, 100);
      }
      check();
    });
  }

  whenInterfaceXReady()
    .then(function onInterfaceXDefined() {
      window.InterfaceX.bus.on("SearchResponseChanged", true).subscribe(
        debounce(function onSearch(payload) {
          var data = payload.eventPayload.request;
          // ignore page navigation
          if (data.page > 1) {
            return;
          }

          var priceFrom =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.min) ||
            null;

          var priceUpTo =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.max) ||
            null;

          var query = data.query;
          var queryHasChanged = query !== tempQuery;
          var priceRangeHasChanged =
            priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
          if (!queryHasChanged && !priceRangeHasChanged) {
            return;
          }

          tempQuery = query;
          tempPriceFrom = priceFrom;
          tempPriceUpTo = priceUpTo;

          function trackSearch() {
            var events = [];
            if (queryHasChanged) {
              events.push({
                type: "search",
                searchText: query,
              });
            }
            if (priceRangeHasChanged) {
              events.push({
                type: "custom",
                eventAlias: searchEventAlias,
                payload: {
                  priceFrom: priceFrom || 0,
                  priceUpTo: priceUpTo || 0,
                },
              });
            }
            sendConnectifEventsWhenReady(events);
          }
          trackSearch();
        }, 1000)
      );
    })
    .catch(console.error);
})();
</script>  

18. Guarda el contenido y continúa para finalizar la configuración del nodo.

19. Selecciona el contenido Inline que acabas de crear y haz clic en Siguiente .

20. En la siguiente pantalla, añade el selector adecuado para mostrar el contenido. Este debe ser un elemento que se encuentre en tu página. En nuestro ejemplo, hemos emplazado el selector en el footer de la página, para que siempre se active el contenido, es decir, el script.

21. En la pestaña Limitaciones, elimina todas las limitaciones del nodo y guarda la configuración del mismo.

22. Guarda y activa el Workflow.

PASO 4: Almacenaje de la información en la ficha de contacto de Connectif

4.1. Creación de los campos personalizados en Connectif

(En este apartado se van a crear los campos personalizados que recogerán la información enviada desde Empathy, como la marca y los filtros de precio máximo y minimo utilizados por el contacto durante su navegación).  

23. Dirígete a "Contactos > Campos del Contacto" y haz clic en    Añadir nuevo campo personalizado.

24. Asígnale el tipo Decimal y haz clic en Ir al editor.

27. Asígnale el Nombre "priceFrom" y el ID "proceFrom" y haz clic en   Guardar. Este valor recogerá el precio mínimo indicado por el contacto.

28. Crea un segundo campo, también de tipo Decimal.

29. Asígnale el Nombre "priceUpTo" y el ID "priceUpTo" y haz clic en   Guardar. Este valor recogerá el precio máximo contacto.

4.2. Creación del workflow para actualizar los campos

(En este apartado se explica cómo almacenar los datos enviados por Empathy en la ficha del contacto en Connectif a través de un workflow).

30. Accede desde el menú lateral izquierdo a la Workflows y crea un nuevo Workflow Personalizado.

31. En la configuración del nodo "Inicio", en el área Selecciona una limitación escoge Toda mi lista y, en Selecciona una fuente de datos marca Todos los existentes y los nuevos.

32. Conecta al nodo "Inicio" el nodo de tipo Disparador que has creado para recibir la marca y el precio de Empathy.

33. Conecta al nodo de tipo Disparador el nodo "Establecer campo".

34. Accede a su configuración y, dentro de su interfaz, 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.

35. Guarda la configuración del nodo. 

36. Guarda y activa tu workflow.

¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

• Recomendador en home, para aprender cómo crear un banner recomendador en la página home, el cual poder personalizar con los datos de Empathy.

• 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.