Guide pour intégrer VTEX IO

Si votre eCommerce est développé sur VTEX IO, vous pourrez le synchroniser avec votre compte Connectif en quelques minutes et commencer à recueillir les données d’interaction de vos contacts sur le site web.

Dans cet article, vous apprendrez comment intégrer votre boutique VTEX IO à Connectif. 

 
Temps de mise en œuvre : 20 min.
Difficulté : Faible.
Quand l’utiliser ? Lors de la création de votre compte Connectif.

 

ÉTAPE 1. Téléchargement de l’application

1. Accédez au lien suivant : Connectif dans VTEX App Store.

2. Cliquez sur le bouton Obtener App en haut à droite.

VTEX_IO_Integracion_-_2-min.png

 

3. Connectez-vous à VTEX IO.

VTEX_IO_Integracion_-_3.png

 

4. Confirmez la commande en suivant les instructions de VTEX.

5. Cliquez sur Finalizar compra.

VTEX_IO_Integracion_-_4.png

 

ÉTAPE 2. Installation du module

6. Cliquez sur le bouton Ir a la página de instalación.

VTEX_IO_Integracion_-_5.png

 

7. Sur l’écran suivant, vérifiez les autorisations nécessaires du module Connectif et cliquez sur Instalar.

VTEX_IO_Integracion_-_6.png

 

ÉTAPE 3. Activation de l’application VTEX

a. Conditions préalables

(Dans cette section, les étapes de création d’une clé d’application, nécessaire pour activer l’application VTEX de Connectif, sont expliquées.)

8. Dans votre compte VTEX, accédez à "Configuración de la cuenta > Configuración de la cuenta > Roles de usuario" et cliquez sur Nuevo Rol.

VTEX_IO_Integracion_-_17.png

 

9. Attribuez les autorisations suivantes au rôle : 

  • 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. Accédez à "Configuración de la cuenta > Configuración de la cuenta > Claves de aplicación" et cliquez sur  Agregar.

VTEX_IO_Integracion_-_18.png

 

11. Dans le panneau de création de la nouvelle clé d’application, cliquez sur  Agregar roles.

VTEX_IO_Integracion_-_19.png

 

12. Attribuez le nouveau rôle configuré pour Connectif.

VTEX_IO_Integracion_-_20.png

 

13. Cliquez sur Guardar.

VTEX_IO_Integracion_-_21.png

 

b. Activation de l’application 

(Dans cette section, les données d’identification du compte à activer dans VTEX IO pour l’application Connectif sont indiquées.)

14. Accédez à votre compte Connectif et, dans les paramètres de la boutique, sous "Integraciones > Plataformas de e-commerce", cliquez sur  Editar pour VTEX.

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

 

15. Copiez l’ID client et la clé secrète.

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

 

16. Accédez à votre compte VTEX IO et ouvrez "Apps instaladas > Connectif > Configuración".

17. Remplissez les champs avec les informations suivantes :

  • Client ID : ajoutez la valeur de l’identifiant client de votre compte Connectif, disponible dans "Ajustes de Tienda > Plataformas e-commerce > VTEX".
  • Private key : ajoutez la valeur de la clé secrète de votre compte Connectif, disponible dans "Ajustes de tienda > Plataformas e-commerce > VTEX".
  • VTEX Key et VTEX Token : ajoutez les valeurs correspondantes obtenues dans Application Keys pour le rôle Connectif.

Guia para integrar con VTEX IO - 3.png

 

18. Facultatif :

  • Sélectionnez les White label sellers dont le stock doit être pris en compte lors de la synchronisation du catalogue avec Connectif. Si au moins l’un des vendeurs sélectionnés dispose du stock d’un produit, Connectif le considérera comme disponible.
  • Sélectionnez les canaux de vente avec lesquels vous souhaitez que Connectif synchronise les achats. Par défaut, tous les achats seront enregistrés.
  • Définissez la taille de l’image utilisée lors de l’importation des produits dans Connectif. Par défaut, elle est de 300x300.

Guia para integrar con VTEX IO - 4.png

19. Activez le tracking et enregistrez les modifications.

 

c. Vérification de l’intégration

(Dans cette section, la configuration de l’URL de la boutique dans Connectif est vérifiée.) 

20. Accédez à votre compte Connectif.

21. Dans les paramètres de la boutique, accédez à "Integraciones > Plataformas e-commerce" et, dans VTEX IO, cliquez sur  Editar.

22. Vérifiez que le domaine de la boutique correspond à un domaine public et accessible de votre site web.

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

 

23. Dans les paramètres de la boutique, accédez à "Canales > Notificaciones Web Push".

24. Modifiez l’URL du ServiceWorker afin qu’elle corresponde à un domaine public et accessible de votre boutique.

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

 

ÉTAPE 4. Configuration de Connectif sur la page de Checkout

(Cette section décrit comment configurer le suivi web dans VTEX IO.)

 

VTEX IO dispose d’une section Checkout séparée du reste de la boutique VTEX. Pour que Connectif puisse effectuer le suivi web et afficher du contenu pendant le processus de confirmation de la commande, il est nécessaire d’ajouter manuellement un fragment du script Connectif dans le Checkout.

25. Accédez aux paramètres de votre boutique VTEX, dans "Apps instaladas Connectif", et copiez le fragment de code de Checkout código personalizado.

VTEX_IO_Integracion_-_13.png

 

La configuration du code dépend du type de Checkout utilisé par votre boutique. Suivez uniquement les étapes de Checkout ou Checkout UI Custom, selon votre configuration.

 

a. Configuration avec Checkout

(Dans cette section, vous configurerez le script Connectif si votre boutique utilise Checkout).

26. Accédez à "Configuración de la tienda > Checkout" et cliquez sur  (Editar).

VTEX_IO_Integracion_-_14.png

 

27. Accédez à l’onglet Código et modifiez le fichier checkout6-custom.js en ajoutant le code copié :

VTEX_IO_Integracion_-_15.png

 

b. Configuration avec Checkout UI Custom

(Dans cette section, vous configurerez le script Connectif si votre boutique utilise Checkout UI Custom).

28. Accédez à « Configuración de la tienda > Checkout UI Custom > JavaScript ».

29. Ajoutez le fragment de code Connectif que vous avez copié précédemment.

30. Cliquez sur PUBLISH pour publier les modifications.

Guia para integrar con VTEX IO - 1.png 

 

 

Félicitations ! 
L’intégration de Connectif avec VTEX IO est terminée.

  

Vous pouvez vérifier que l’intégration de Connectif avec VTEX IO a été correctement effectuée dans cet article.

 


Questions fréquentes

1. Quelles informations Connectif recueille-t-il grâce à cette intégration ?

a. Informations recueillies sur les contacts

Dans les intégrations avec VTEX IO, certains renseignements sur les contacts sont transférés par défaut via les événements JavaScript de Connectif :

  • _name 
  • _surname 
  • email

En outre, les champs suivants sont mis à jour grâce à la synchronisation massive quotidienne :

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

b. Informations recueillies sur les produits

Dans les intégrations avec VTEX IO, certaines informations sur les produits sont recueillies par défaut via les événements JavaScript de Connectif et la synchronisation quotidienne du catalogue :

  • productDetailUrl
  • name
  • brand
  • productId
  • imageUrl
  • unitPrice
  • unitPriceOriginal
  • availability
  • categories
  • discountedAmount
  • discountedPercentage
  • unitPriceWithoutVAT (uniquement avec la synchronisation massive quotidienne)
  • publishedAt (uniquement avec la synchronisation massive quotidienne)
  • inStockUnits (uniquement avec la synchronisation massive quotidienne)

c. Informations recueillies sur les achats

Dans les intégrations avec VTEX IO, certaines informations sur les achats sont recueillies par défaut via les événements JavaScript de Connectif et la synchronisation par API :

  • cartId
  • purchaseDate
  • purchaseId
  • totalPrice
  • totalQuantity

 

2. Comment récupérer les paniers abandonnés avec l’URL de récupération du panier ?

(Cette section explique comment fonctionne l’URL de récupération du panier pour obtenir les articles associés à un panier spécifique.)

Grâce à l’intégration avec VTEX IO, une URL de récupération du panier est envoyée à Connectif, c’est-à-dire un lien permettant de récupérer les articles associés à ce panier et pouvant être utilisé dans les workflows et les contenus.

Pour obtenir l’URL de récupération du panier via un workflow, utilisez le nœud "Obtener último carrito" et "Al abandonar carrito", puis mappez-la dans les variables du contenu à afficher ou à envoyer.

  • Découvrez le fonctionnement de cette URL dans les différents CMS et comment l’utiliser dans cet article. 

 

 


Continuez à apprendre !

Pour profiter pleinement du potentiel de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :