Guide pour intégrer avec VTEX IO

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

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

 
Temps d’implémentation : 20 min.
Difficulté : Faible.
Quand l’utiliser : Lors de l’ouverture de votre compte Connectif.

 

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

  1. Accédez au lien suivant : Connectif sur VTEX App Store.
  2. Cliquez sur le bouton Obtenir App en haut à droite.

VTEX_IO_Integracion_-_2-min.png

  1. Connectez-vous à VTEX IO.

VTEX_IO_Integracion_-_3.png

  1. Confirmez la commande en suivant les instructions de VTEX.
  2. Cliquez sur Finaliser l'achat.

VTEX_IO_Integracion_-_4.png

 

ÉTAPE 2. Installation du module

  1. Appuyez sur le bouton Aller à la page d’installation.

VTEX_IO_Integracion_-_5.png

  1. Sur l’écran suivant, examinez les autorisations nécessaires pour le module Connectif et cliquez sur Installer.

VTEX_IO_Integracion_-_6.png

 

ÉTAPE 3. Activation de l’App VTEX

a. Prérequis

(Dans cette section, nous allons expliquer les ÉTAPEs pour créer une clé d’application, nécessaire pour activer l’App VTEX Connectif.)

  1. Dans votre compte VTEX, allez à "Configuration du compte > Configuration du compte > Rôles des utilisateurs" et cliquez sur Nouveau Rôle.

VTEX_IO_Integracion_-_17.png

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

VTEX_IO_Integracion_-_16.png

  1. Allez à "Configuration du compte > Configuration du compte > Clés d’application" et cliquez sur  Ajouter.

VTEX_IO_Integracion_-_18.png

  1. Dans le panneau de création de la nouvelle clé d'application, cliquez sur  Ajouter des rôles.

VTEX_IO_Integracion_-_19.png

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

VTEX_IO_Integracion_-_20.png

  1. Cliquez sur Enregistrer.

VTEX_IO_Integracion_-_21.png

 

b. Activation de l’application 

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

  1. Connectez‑vous à votre compte Connectif et, dans les paramètres de la Boutique, dans "Intégrations > Plates‑formes de e‑commerce", cliquez sur  Modifier  sur VTEX.

Intégration avec VTEX IO - 0-min.png

  1. Copiez le ID client et la Clé secrète.

Intégration avec VTEX IO - 1-min.png

  1. Allez dans votre compte VTEX IO et accédez à "Applications installées > Connectif > Configuration".
  2. Remplissez les champs avec les informations suivantes :
  • Client ID : ajoutez la valeur de Identifiant client de votre compte Connectif, disponible dans "Paramètres de la boutique > Plates‑formes e‑commerce > VTEX".
  • Private Key : ajoutez la valeur de la Clé secrète de votre compte Connectif, disponible dans "Paramètres de la boutique > Plates‑formes e‑commerce > VTEX".
  • VTEX Key et VTEX Token : entrez les valeurs correspondantes obtenues dans Application Keys pour le rôle Connectif.

Intégration avec VTEX - Taille de l’image - 1-min.png

  1. Optionnel :
  • Sélectionnez les Canaux de vente avec lesquels vous souhaitez que Connectif synchronise les achats. Par défaut, tous les achats seront enregistrés.
  • Ajustez la Taille de l’image qui sera utilisée lors de l’importation des produits dans Connectif. La valeur par défaut est 300×300.

Intégration avec VTEX - Taille de l’image - 1-min.png

  1. Activez le suivi et enregistrez les modifications.

 

c. Vérification de l'intégration

(Cette section vérifie la configuration de l'URL de la boutique dans Connectif.) 

  1. Connectez-vous à votre compte Connectif.
  2. Dans les paramètres de la boutique, allez dans "Intégrations > Plateformes e-commerce" et, sous VTEX IO, cliquez sur  Modifier.
  3. 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

  1. Dans les paramètres de la boutique, accédez à "Canaux > Notifications Web Push".
  2. Modifiez l'URL du ServiceWorker pour 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 commande, il est nécessaire d'ajouter manuellement un extrait de code depuis le back-office à la section checkout.

  1. Accédez à la configuration de votre boutique VTEX, dans "Applications installées > Connectif", et copiez l'extrait de code de Code personnalisé du Checkout.

VTEX_IO_Integracion_-_13.png

  1. Accédez à "Configuration de la boutique > Checkout" et cliquez sur  (Modifier).

VTEX_IO_Integracion_-_14.png

  1. Accédez à l'onglet Code et modifiez le fichier checkout6-custom.js en ajoutant le code copié :

VTEX_IO_Integracion_-_15.png

 

 

Succès !
L'intégration de Connectif avec VTEX IO est désormais prête.

  

Vous pouvez vérifier si l'intégration de Connectif avec VTEX IO a été correctement réalisée dans cet article.

 


Foire aux questions

1. Quelles informations sont collectées par Connectif via cette intégration

a. Informations collectées sur les Contacts

Dans les intégrations avec VTEX IO, via les événements JavaScript de Connectif, certaines informations sur les Contacts sont transférées par défaut :

  • _name 
  • _surname 
  • email

De plus, via la synchronisation massive quotidienne, ces champs sont mis à jour :

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

b. Informations collectées sur les Produits

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

  • productDetailUrl
  • name
  • brand
  • productId
  • imageUrl
  • unitPrice
  • unitPriceOriginal
  • availability
  • categories
  • unitPriceWithoutVAT (seulement via la synchronisation massive quotidienne)
  • publishedAt (seulement via la synchronisation massive quotidienne)
  • inStockUnits (seulement via la synchronisation massive quotidienne)

c. Informations collectées sur les Achats

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

  • cartId
  • purchaseDate
  • purchaseId
  • totalPrice
  • totalQuantity

 

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

(Cette section explique comment fonctionne l’URL de récupération de 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 de panier est envoyée à Connectif, c’est-à-dire un lien permettant de récupérer les articles liés à ce panier, qui peut être utilisé dans les workflows et les contenus.

Pour obtenir l’URL de récupération de panier via un workflow, cela doit se faire à l’aide du Nœud "Obtenir le dernier panier" et "À l’abandon du panier", puis être mappée dans les variables du contenu à afficher ou à envoyer.

  • Découvrez comment fonctionne cette URL dans les différents CMS et comment l’utiliser dans cet article

 

 


Continuez à apprendre !

Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de consulter les articles suivants :