Guia para integrar con VTEX IO

Si tu eCommerce está desarrollado en VTEX IO, podrás sincronizarlo con tu cuenta de Connectif en unos minutos y comenzar a recopilar datos de interacción de tus contactos en la página web.

En este artículo aprenderás cómo integrar tu tienda VTEX IO con Connectif

 
Tiempo de implementación: 20 min.
Dificultad: Baja.
¿Cuándo utilizarlo?: Al abrir tu cuenta en Connectif.

 

PASO 1. Descarga de la aplicación

1. Accede al siguiente enlace: Connectif en VTEX App Store.

2. Haz clic en el botón Obtener App en la parte superior derecha.

VTEX_IO_Integracion_-_2-min.png

 

3. Haz login en VTEX IO.

VTEX_IO_Integracion_-_3.png

 

4. Confirma el pedido siguiendo las instrucciones de VTEX.

5. Haz clic en Finalizar compra.

VTEX_IO_Integracion_-_4.png

 

PASO 2. Instalación del módulo

6. Pulsa el botón Ir a la página de instalación.

VTEX_IO_Integracion_-_5.png

 

7. En la siguiente pantalla, revisa los permisos necesarios del módulo de Connectif y haz clic en Instalar.

VTEX_IO_Integracion_-_6.png

 

PASO 3. Activación de la App de VTEX

a. Requisitos previos

(En este apartado se van a explicar los pasos para crear una Clave de aplicación, necesaria para poder realizar la activación del VTEX App de Connectif.)

8. En tu cuenta VTEX, dirígete a "Configuración de la cuenta > Configuración de la cuenta > Roles de usuario" y haz clic en Nuevo Rol.

VTEX_IO_Integracion_-_17.png

 

9. Asigna los siguientes permisos al rol: 

  • Product Catalog > Content, Admin, Marketing, Configuration, Commercial, Miscellaneous, Reports, Marketplace, Collection.

  • Product License Manager > Services Access Control > Get account by identifier.

  • Product Checkout > CheckoutResources.

  • Product OMS > OMS Acccess > Change order workflow status , Notify payment, Notify invoice, View order, Notify refund, Order feed subscription, View store sales stats, List Orders.

  • Product Master Data > Generic resources, Application, Comment, Customized Search, Form, Import.

  • Product Dynamic Storage > Dynamic storage generic resources > Read only documents, Master Data administrator, Full access to all documents.

  • Product Dynamic Storage > Data entity > List data entity, Create data entity, Edit schema, View data entity details, Publish index.

  • Product Logistics > Logistics full access, Logistics viewer, Logistics inventory full access, Logistics inventory read only.

VTEX_IO_Integracion_-_16.png

 

10. Accede a "Configuración de la cuenta > Configuración de la cuenta > Claves de aplicación" y haz clic en  Agregar.

VTEX_IO_Integracion_-_18.png

 

11.En el panel de creación de la nueva Clave de aplicación, haz clic en  Agregar roles.

VTEX_IO_Integracion_-_19.png

 

12. Asigna el nuevo rol configurado para Connectif.

VTEX_IO_Integracion_-_20.png

 

13. Haz clic en Guardar.

VTEX_IO_Integracion_-_21.png

 

b. Activación de la aplicación 

(En este apartado se van a indicar los datos identificativos de la cuenta para activar en VTEX IO la aplicación de Connectif.)

14. Accede a tu cuenta de Connectif y, en los ajustes de Tienda, en "Integraciones > Plataformas de e-commerce", haz clic en  Editar sobre VTEX.

Integración con VTEX IO - 0-min.png

 

15. Copia el ID de Cliente y la Clave Secreta.

Integración con VTEX IO - 1-min.png

 

16. Dirígete a tu cuenta de VTEX IO y entra en "Apps instaladas > Connectif > Configuración".

17. Rellena los campos con la siguiente información:

  • Client ID: añade el valor de Identificador de cliente de tu cuenta de Connectif, disponible en "Ajustes de Tienda > Plataformas e-commerce > VTEX".
  • Private key: añade el valor de Clave secreta de tu cuenta de Connectif, disponible en "Ajustes de tienda > Plataformas e-commerce > VTEX".
  • VTEX Key y VTEX Token: añade los valores correspondientes obtenidos en Application Keys para el rol de Connectif.

Integración con VTEX - Image Size - 1-min.png

 

18. Opcionalmente:

  • Selecciona los Canales de venta con los que te interese que Connectif sincronice las compras. Por defecto se registrarán todas las compras.
  • Ajusta el Tamaño de imagen que se usará cuando se importen los productos a Connectif. Por defecto es 300x300.

Integración con VTEX - Image Size - 1-min.png

19. Activa el tracking y guarda los cambios.

 

c. Verificación de la integración

(En este apartado se va a revisar la configuración de la URL de la tienda en Connectif.) 

20. Dirígete a tu cuenta de Connectif.

21. En los ajustes de Tienda, ve a "Integraciones > Plataformas e-commerce" y, en VTEX IO, haz clic en  Editar.

22. Revisa que el Dominio de la Tienda se corresponde con un dominio público y accesible de tu web.

Integración con VTEX IO - 5-min.png

 

23. En los ajustes de Tienda, dirígete a "Canales > Notificaciones Web Push".

24. Modifica la URL del ServiceWorker para que corresponda con un dominio público y accesible de tu tienda.

Integración con VTEX IO - 2-min.png

 

PASO 4. Configuración de Connectif en la página de Checkout

(En este apartado se describe cómo configurar el seguimiento web en VTEX IO.)

 

VTEX IO tiene una sección de Checkout separada del resto de la tienda VTEX. Para que Connectif pueda hacer el seguimiento web y mostrar contenidos durante el proceso de confirmación del pedido, es necesario que se añada de forma manual un fragmento de el script de Connectif en el Checkout.

25. Accede a la configuración de tu tienda VTEX, en "Apps instaladas Connectif", y copia el fragmento de código de Checkout código personalizado.

VTEX_IO_Integracion_-_13.png

 

La configuración del código depende del tipo de Checkout que utilice tu tienda. Sigue únicamente los pasos de  Checkout o Checkout UI Custom, según corresponda a tu configuración

 

a. Configuración con Checkout

(En este apartado configurarás el script de Connectif si tu tienda utiliza Checkout).

26. Accede a "Configuración de la tienda > Checkout" y haz clic en  (Editar).

VTEX_IO_Integracion_-_14.png

 

27. Dirígete a la pestaña Código y modifica el fichero checkout6-custom.js, añadiendo el código copiado:

VTEX_IO_Integracion_-_15.png

 

b. Configuración con Checkout UI Custom

(En este apartado configurarás el script de Connectif si tu tienda utiliza Checkout UI Custom).

28. Accede a “Configuración de la tienda > Checkout UI Custom > JavaScript”.

29. Añade el fragmento de código de Connectif que has copiado anteriormente.

30. Haz clic en PUBLISH para publicar los cambios.

Guia para integrar con VTEX IO - 1.png 

 

 

¡Éxito! 
La integración de Connectif con VTEX IO ya está lista.

  

Puedes revisar si has hecho correctamente tu integración de Connectif con VTEX IO en este artículo.

 


Preguntas frecuentes

1. Qué información recoge Connectif a través de esta integración

a. Información recogida de Contactos

En las integraciones con VTEX IO, a través de eventos JavaScript de Connectif, se transfiere, por defecto, cierta información acerca de los Contactos:

  • _name 
  • _surname 
  • email

Además, a través de la sincronización masiva diaria, se actualizan estos campos:

  • email
  • _birthdate
  • _name
  • _surname
  • _mobilePhone
  • _newsletterSubscriptionStatus

b. Información recogida de Productos

En las integraciones con VTEX IO, a través de eventos JavaScript de Connectif y de la sincronización diaria del catálogo, se recolecta por defecto, cierta información acerca de los Productos:

  • productDetailUrl
  • name
  • brand
  • productId
  • imageUrl
  • unitPrice
  • unitPriceOriginal
  • availability
  • categories
  • unitPriceWithoutVAT (solo con la sincronización diaria masiva)
  • publishedAt (solo con la sincronización diaria masiva)
  • inStockUnits (solo con la sincronización diaria masiva)

c. Información recogida de Compras

En las integraciones con VTEX IO, a través de eventos JavaScript de Connectif y la sincronización por API, se recolecta por defecto, cierta información acerca de las Compras:

  • cartId
  • purchaseDate
  • purchaseId
  • totalPrice
  • totalQuantity

 

2. Cómo recuperar carritos abandonados con la URL de Recuperación de Carrito

(En este apartado se explica cómo funciona la URL de Recuperación de Carrito para obtener los ítems asociados a un carrito concreto).

A través de la integración con VTEX IO, se envía a Connectif una URL de Recuperación de Carrito, es decir, un enlace para recuperar los artículos relacionados a ese carrito y que puede utilizarse en workflows y contenidos.

Para obtener la URL de recuperación de carrito a través de un workflow, debe hacerse por medio del nodo "Obtener último carrito" y "Al abandonar carrito", posteriormente, mapearse en las variables del contenido a mostrar o enviar.

  • Aprende cómo funciona esta URL en los diferentes CMS y cómo utilizarla en este artículo

 

 


¡Sigue aprendiendo!

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