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

  1. Haz login en VTEX IO.

VTEX_IO_Integracion_-_3.png

  1. Confirma el pedido siguiendo las instrucciones de VTEX.
  2. Haz clic en Finalizar compra.

VTEX_IO_Integracion_-_4.png

 

Paso 2. Instalación del módulo

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

VTEX_IO_Integracion_-_5.png

  1. 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.)

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

  1. Asigna los siguientes permisos al rol: 
    • Product Catalog > Content, Admin, Marketing, Configuration, Commercial, Miscellaneous, Reports, Marketplace, Collection.
    • Product License Manager > Services Access Control.
    • Product Checkout > CheckoutResources.
    • Product OMS > OMS Acccess.
    • 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, create, edit, remove, view, publish.

VTEX_IO_Integracion_-_16.png

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

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

VTEX_IO_Integracion_-_19.png

  1. Asigna el nuevo rol configurado para Connectif.

VTEX_IO_Integracion_-_20.png

  1. 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.)

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

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

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

  1. Dirígete a tu cuenta de VTEX IO y entra en "Apps instaladas > Connectif > Configuración".
  2. 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.

VTEX_IO_Integracion_-_7.png

  1. (Opcional) Selecciona los canales de venta con los que te interese que Connectif sincronice las compras. Por defecto se registrarán todas las compras.
  2. Haz clic en Activar para guardar 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.) 

  1. Dirígete a tu cuenta de Connectif.
  2. En los ajustes de Tienda, ve a "Integraciones > Plataformas e-commerce" y, en VTEX IO, haz clic en  Editar.
  3. 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

  1. En los ajustes de Tienda, dirígete a "Canales > Notificaciones Web Push".
  2. 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 código desde el backoffice a la sección de checkout.

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

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

VTEX_IO_Integracion_-_14.png

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

 

 

¡É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.

 


¡Sigue aprendiendo!

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

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0