En esta guía vas a encontrar toda la información necesaria para integrar tu web con Connectif, desde conocer qué tipos de sincronización son los más comunes y saber cuál se adapta mejor a tus necesidades técnicas y tu negocio, hasta aprender cómo revisar que la conexión entre el eCommerce y Connectif funciona correctamente.
¿Cómo hacer una integración a medida de tu eCommerce y Connectif?
El tipo de integración con Connectif que vayas a hacer dependerá de tus necesidades y del tipo de página web, así como también de los recursos técnicos disponibles, por lo que conocer todas las formas y pasos de implementación te ayudará a tener una visión completa y elegir la que mejor se adapte a tu eCommerce.
1. Elección e implementación de la integración adecuada
La forma más sencilla de sincronizar el eCommerce con Connectif es mediante uno de los módulos ya existentes para las diferentes plataformas, actualmente disponibles para:
En caso de usar alguno de los CMS anteriores, no es necesario continuar con este artículo. Únicamente se debe instalar el módulo en la tienda y activarlo siguiendo los pasos que se indican en la documentación correspondiente.
¿Qué hacer si la tienda no está en el listado anterior?
El el caso de que tu tienda online no use ninguno de los CMS anteriores, tendrás que implementar una integración a medida. A continuación se presentan cuatro formas posibles para hacerlo, qué se puede integrar en cada caso y los pasos para completar la sincronización.
Para realizar este tipo de integraciones, necesitarás de un experto con conocimientos de programación. Es posible que se necesite combinar los métodos de integración a medida para completar el envío de todo tipo de eventos.
| Tipo de evento | Renderizado en el servidor | Renderizado en el cliente | Integración por JavaScript | Integración vía API |
|---|---|---|---|---|
| información del contacto | ||||
| actividad del contacto | ||||
| catálogo de productos | ||||
| compras | ||||
| cupones |
1.1. Integrando a través de etiquetas HTML renderizadas en el servidor
¿Por qué elegir este método?
Integrar mediante etiquetas HTML renderizadas en el servidor es, probablemente, el método más ágil para enviar información a Connectif de forma personalizada. Consiste en generar y mostrar dichas etiquetas en las páginas correspondientes de forma que los datos que estas contienen se envíen automáticamente a Connectif.
¿Qué se puede integrar?
Utilizando este método es posible integrar todas las etiquetas HTML, así como sincronizar el catálogo de productos.
¿Qué hay tener en cuenta?
Para que la integración con etiquetas HTML funcione correctamente es necesario que se produzcan cambios de página y de URL cuando un contacto navega por la web. Por lo tanto, esta forma de integrar será recomendada para aquellas webs que no sean Single Page Application (SPA) y que tengan la posibilidad de realizar el renderizado del HTML en el servidor.
Aprende cómo integrar mediante etiquetas HTML renderizadas en el servidor en este artículo.
1.2.Integrando a través de etiquetas HTML renderizadas en el cliente
¿Por qué elegir este método?
Integrar mediante etiquetas HTML renderizadas en el cliente es la opción que más se ajusta si se usa Google Tag Manager y dataLayer, o si se quiere enviar la información a Connectif mediante etiquetas HTML sin realizar el renderizado en el servidor.
¿Qué se puede integrar?
Utilizando este método es posible integrar todas las etiquetas HTML, pero no es posible sincronizar el catálogo de productos. Existen dos opciones para integrar el catálogo:
- Generando la etiqueta HTML "cn_product_visited" en el lado servidor.
- Desactivando la verificación automática de productos y sincronizándolos vía API.
¿Qué hay que tener en cuenta?
Del mismo modo que sucede con las etiquetas HTML renderizadas en el servidor, este método no funcionará correctamente si no se produce un cambio de página y de URL cuando un contacto navega por la web. Por lo tanto, esta forma de integrarse es adecuada para webs que no son Single Page Application (SPA).
Aprende cómo integrar etiquetas HTML renderizadas en el cliente en este enlace.
1.3. Integrando a través del envío de eventos JavaScript
¿Por qué elegir este método?
Integrar mediante eventos JavaScript es la forma más avanzada y que permite más control sobre cuándo se envían los eventos que trackean la información del contacto. Especialmente indicada para las Single Page Applications (SPA) que tendrán que controlar cuándo se realiza un cambio de página para enviar el evento “page-visit”.
¿Qué se puede integrar?
Utilizando este método es posible integrar todos los eventos JavaScript, pero no es posible sincronizar el catálogo de productos. Existen dos opciones para integrar el catálogo:
- Generando la etiqueta HTML "cn_product_visited" en el lado servidor.
- Desactivando la verificación automática de productos y sincronizándolos vía API.
¿Qué hay tener en cuenta?
También podrás enviar notificaciones personalizadas utilizando este método, a través de la creación de una notificación personalizada para recibir datos en Connectif.
Aprende cómo integrar mediante el envío de eventos JavaScript en este enlace.
1.4. Integrando a través de la API de Connectif
¿Por qué elegir este método?
Integrar mediante API es el método que permite un control total sobre los datos enviados, haciendo posible que, por ejemplo, se envíe una compra una vez haya sido verificada en backend, o sincronizar cambios en los productos en el momento en el que se actualicen en la tienda.
Este es el único modo que permite enviar el evento de compra en el momento en el que se confirma la misma, sin necesidad de esperar a que el contacto visite la página otra vez.
¿Qué se puede integrar?
Utilizando este método es posible integrar Contactos, Productos, Compras y Cupones. El resto de eventos tendrán que ser enviados de cualquiera de las otras formas planteadas:
- Renderizar etiquetas HTML en el lado servidor.
- Renderizar etiquetas HTML en el lado del cliente.
- Configurar el envío de eventos JavaScript.
¿Qué hay que tener en cuenta?
Es importante tener en cuenta que la API tiene un límite de 100 peticiones por minuto (rate limit), por lo que si se plantea una sincronización con un envío masivo de datos, es recomendable revisar la API de Connectif.
Aprende cómo integrar mediante API en este enlace.
2. Ajuste de la configuración en Connectif
Una vez estés enviando información a Connectif desde tu tienda online, deberás revisar el estado de la configuración de la integración web y la configuración del comercio electrónico:
-
Revisar la configuración de la integración web en Connectif.
Aquí se configuran cuáles son los dominios autorizados para enviar información a la cuenta de Connectif y el comportamiento del script de Connectif con respecto a su inicialización. -
Revisar la configuración de la integración de Comercio Electrónico en Connectif.
Aquí se configuran la sincronización y verificación de productos, dependiendo de qué método se haya elegido para enviar dicha información a Connectif. -
Autenticar el dominio de email. Aquí se valida el dominio o dominios desde los cuales se van a enviar los emails de los workflows. Sin este paso no se podrán enviar correos electrónicos.
3. Comprobación de la sincronización
Una vez realizada la integración y antes de salir a producción, es necesario revisar que todos los eventos se están enviando correctamente. Para realizar una comprobación de la sincronización, deberás simular la interacción de un contacto en la web y confirmar que toda la actividad es recogida en Connectif.
Aprende cómo comprobar que tu integración está lista en este enlace.
¡Enhorabuena!
Has llegado al final de la lección.
Preguntas frecuentes
¿Tienes dudas sobre alguno de los procesos? Aquí encontrarás información de utilidad:
1. ¿Qué hacer si tu carrito se actualiza por AJAX?
En este caso, deberás configurar el evento AJAX de carrito, para indicar los cambios en la cesta de la compra sin necesidad de recarga de la página.
Aprende cómo configurar el envío de carrito por AJAX en este enlace.
2. ¿Cómo afectan los sistemas de caché a tu integración a medida?
Connectif es una herramienta de personalización y, como tal, busca mejorar la experiencia del contacto que navega por tu web, adaptando el contenido que se le muestra y, a la vez, recolectando información para aumentar el conocimiento que tienes sobre tus clientes.
Por ese motivo, es muy importante controlar qué partes de la página son almacenadas, de modo que se siga permitiendo esta personalización. En ese sentido, existen dos tipos de caché, atendiendo a en qué parte de la página se cachea y cuándo se actualiza:
- Caché de página
Son aquellos sistemas que devuelven el mismo contenido a todos los visitantes, basándose únicamente en la URL que están visitando. Se desaconseja su uso, ya que no es compatible con la personalización que permite Connectif.
Por ejemplo, si se dispone de una caché de página en la home, aunque un contacto registrado visite páginas de producto y se registren sus visitas y carritos, cuando regrese a la home, en esa página no se enviará la información del contacto ni de su carrito, por lo que esa visita creará un nuevo contacto anónimo. O, incluso, se podría cachear información de otro contacto con otro carrito y mezclar información.
- Caché de bloques
Son aquellos sistemas que permiten cachear ciertas partes de la página, de modo que hay otros bloques de HTML que siempre se generan cuando se visita la página. Este tipo de caché sí es compatible con Connectif, ya que las partes estáticas pueden estar cacheadas, mientras que las partes que Connectif utiliza para personalizar y recoger información no lo estarán y podrán seguir funcionando correctamente.
Por ejemplo, si se dispone de varios bloques HTML cacheados en la home, si un contacto está navegando por la web añadiendo productos al carrito y vuelve a la página principal, el bloque HTML donde se renderizan las etiquetas de "cn_client_info" y "cn_cart" no estarán cacheados y, por tanto, se enviará correctamente la información del contacto.
3. ¿Cómo hacer el envío de eventos personalizados?
Para enviar eventos personalizados deberás crear una integración para recibir datos en Connectif y crear la notificación vía JavaScript.
Aprende cómo crear un evento personalizado en Connectif en este enlace.
4. ¿Qué navegadores soportan el script de Connectif?
La compatibilidad del JavaScript de Connectif con los diferentes navegadores se basa en la cuota de mercado de los mismos.
Connectif distingue por medio de browser list aquellos navegadores que tienen más de un 2% de market share para darles soporte. Esta información se obtiene desde https://caniuse.com/usage-table.
Para garantizar un amplio soporte y, a la vez, optimizar el tamaño del JavaScript y su carga en el navegador de los contactos, Connectif usa Babel para asegurar su compatibilidad.
Navegadores como Internet Explorer, que tienen menos de un 1,5% de uso a nivel mundial, no están soportados actualmente.
¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
-
Onboarding, para adquirir destreza con nuestra interfaz.
-
Workflows iniciales, para implementar tus primeras estrategias en la cuenta.
-
Integraciones con sistemas externos, para integrarte con Facebook, formularios y webhooks de tu web.
-
Documentación de la API de Connectif, para encontrar todas las llamadas API disponibles.