Si votre eCommerce est développé sur VTEX IO, vous pourrez le synchroniser avec votre compte Connectif en quelques minutes et commencer à collecter des 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.
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 l’App en haut à droite.
3. Connectez-vous à VTEX IO.
4. Confirmez la commande en suivant les instructions de VTEX.
5. Cliquez sur Terminer l’achat.
ÉTAPE 2. Installation du module
6. Appuyez sur le bouton Aller à la page d’installation.
7. Sur l’écran suivant, vérifiez les permissions nécessaires du module Connectif et cliquez sur Installer.
ÉTAPE 3. Activation de l’App VTEX
a. Prérequis
(Dans cette section, les étapes pour créer une Clé d’application, nécessaire pour activer l’App Connectif VTEX, seront expliquées.)
8. Dans votre compte VTEX, allez à "Paramètres du compte > Paramètres du compte > Rôles utilisateur" et cliquez sur Nouveau Rôle.
9. Attribuez les permissions 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.
Product Logistics > Logistics full access, Logistics viewer, Logistics inventory full access, Logistics inventory read only.
10. Accédez à "Paramètres du compte > Paramètres du compte > Clés d’application" et cliquez sur Ajouter.
11. Dans le panneau de création de la nouvelle Clé d’application, cliquez sur Ajouter des rôles.
12. Assignez le nouveau rôle configuré pour Connectif.
13. Cliquez sur Enregistrer.
b. Activation de l’application
(Dans cette section, les données d’identification du compte pour activer l’application Connectif dans VTEX IO seront indiquées.)
14. Connectez-vous à votre compte Connectif et, dans les paramètres de Boutique, dans "Intégrations > Plateformes e-commerce", cliquez sur Modifier sur VTEX.
15. Copiez le ID Client et la Clé Secrète.
16. Allez dans votre compte VTEX IO et ouvrez "Apps installées > Connectif > Configuration".
17. Remplissez les champs avec les informations suivantes :
- Client ID : ajoutez la valeur de Identifiant client de votre compte Connectif, disponible dans "Paramètres de Boutique > Plateformes e-commerce > VTEX".
- Private key : ajoutez la valeur de la Clé secrète de votre compte Connectif, disponible dans "Paramètres de Boutique > Plateformes e-commerce > VTEX".
- VTEX Key et VTEX Token : ajoutez les valeurs correspondantes obtenues dans Application Keys pour le rôle Connectif.
18. Optionnellement :
- 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 utilisée lors de l’import des produits dans Connectif. Par défaut, c’est 300x300.
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 sera vérifiée.)
20. Rendez-vous dans votre compte Connectif.
21. Dans les paramètres de Boutique, allez à "Intégrations > Plateformes e-commerce" et, dans VTEX IO, cliquez sur Modifier.
22. Vérifiez que le Domaine de la Boutique correspond à un domaine public et accessible de votre site web.
23. Dans les paramètres de Boutique, allez à "Canaux > Notifications Web Push".
24. Modifiez l’URL du ServiceWorker pour qu’elle corresponde à un domaine public et accessible de votre boutique.
ÉTAPE 4. Configuration de Connectif dans la page de Checkout
(Dans cette section, la configuration du suivi web dans VTEX IO est décrite.)
VTEX IO possède une section Checkout séparée du reste de la boutique VTEX. Pour que Connectif puisse faire le suivi web et afficher des contenus durant le processus de confirmation de commande, il est nécessaire d’ajouter manuellement un extrait du script Connectif dans le Checkout.
25. Accédez à la configuration de votre boutique VTEX, dans "Apps installées Connectif", et copiez l’extrait de code Checkout code personnalisé.
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 à "Configuration de la boutique > Checkout" et cliquez sur (Modifier).
27. Allez à l’onglet Code et modifiez le fichier checkout6-custom.js, en ajoutant le code copié :
b. Configuration avec Checkout UI Custom
(Dans cette section, vous configurerez le script Connectif si votre boutique utilise Checkout UI Custom).
28. Accédez à “Configuration de la boutique > Checkout UI Custom > JavaScript”.
29. Ajoutez l’extrait de code Connectif copié précédemment.
30. Cliquez sur PUBLISH pour publier les modifications.
Succès !
L’intégration de Connectif avec VTEX IO est désormais prête.
Vous pouvez vérifier si votre intégration de Connectif avec VTEX IO a été correctement réalisée dans cet article.
Questions fréquentes
1. Quelles informations Connectif collecte-t-il via cette intégration ?
a. Informations collectées des Contacts
Dans les intégrations avec VTEX IO, via les événements JavaScript de Connectif, certaines informations sur les Contacts sont transmises par défaut :
- _name
- _surname
De plus, via la synchronisation massive quotidienne, ces champs sont mis à jour :
- _birthdate
- _name
- _surname
- _mobilePhone
- _newsletterSubscriptionStatus
b. Informations collectées des 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 (uniquement avec la synchronisation massive quotidienne)
- publishedAt (uniquement avec la synchronisation massive quotidienne)
- inStockUnits (uniquement avec la synchronisation massive quotidienne)
c. Informations collectées des Achats
Dans les intégrations avec VTEX IO, via les événements JavaScript de Connectif et la synchronisation par 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
(Dans cette section, le fonctionnement de l’URL de récupération de panier pour obtenir les articles associés à un panier spécifique est expliqué).
Via l’intégration avec VTEX IO, une URL de récupération de panier est envoyée à Connectif, c’est-à-dire un lien pour récupérer les articles liés à ce panier qui peut être utilisé dans les workflows et contenus.
Pour obtenir l’URL de récupération de panier via un workflow, cela doit se faire par le biais du nœud "Obtenir dernier panier" et "Au panier abandonné", puis être mappé dans les variables du contenu à afficher ou envoyer.
- Apprenez comment fonctionne cette URL dans les différents CMS et comment l’utiliser dans cet article.
Continuez à apprendre !
Pour exploiter tout le potentiel de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
Onboarding, pour maîtriser notre interface.
Workflows initiaux, pour mettre en place vos premières stratégies dans le compte.
Intégrations avec des systèmes externes, pour vous connecter à Facebook, formulaires et webhooks de votre site.
Événements qui consomment des Activités, pour mieux comprendre la consommation de votre compte.