Guide pour intégrer avec Shopify

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

Dans cet article, vous apprendrez comment installer et configurer l'application Connectif pour Shopify.

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

 

ÉTAPE 1. Installation de l’application

1. Connectez-vous à votre compte Connectif.

2. Accédez aux Paramètres de la boutique dans le menu latéral gauche.

3. Dans la section Plateformes e-commerce, recherchez Shopify et cliquez sur  Modifier.

Intégration Shopify Mar.2025 - 27 (3)-min.png

4. Cliquez sur Installez notre module depuis la boutique d’applications Shopify pour accéder à l’App Store Shopify.

Intégration avec Shopify - 1-min (1).png

5. Cliquez sur le bouton Installer l’application.

Intégration

6. Connectez-vous ou créez un nouveau compte.

Intégration

 

ÉTAPE 2. Activation de l’abonnement

 

Une fois l’application installée, vous devrez souscrire à un plan Connectif. Si vous utilisez la période d’essai gratuite, vous pouvez souscrire plus tard. Dans ce cas, passez à l’étape 3 pour configurer votre compte.

7. Accédez à votre compte Connectif.

Intégration

8. Sélectionnez la boutique que vous souhaitez intégrer et configurer.

Intégration

9. Accédez à la section Informations générales pour consulter les informations relatives au compte Connectif associé à votre installation Shopify.

Intégration Shopify Mar.2025 - 28-min.png

10. Choisissez l’un des plans Connectif disponibles.

Shopify_integratio_n_oct_22_-_9.png

11. (Optionnel). Demandez un plan personnalisé à Connectif via le panneau Demander un plan personnalisé.

 
Une seule demande de plan personnalisé peut être en attente à la fois.

Shopify_integratio_n_oct_22_-_10.png

 

ÉTAPE 3. Configuration de l’application

3.1. Configuration de différentes boutiques, devises, langues et/ou marchés (Shopify Markets)

(Dans cette section sont expliquées les étapes pour configurer comment collecter les informations d’activité dans les différentes boutiques Shopify. De cette manière, Connectif n’enregistrera l’activité que dans le compte correspondant lorsque le client navigue dans la langue, la devise et/ou les marchés configurés).

12. Dans la section Multi-boutique, cliquez sur Activer.

 

Cette configuration est optionnelle si vous souhaitez que l’activité des contacts soit dirigée vers une boutique Connectif différente selon la langue, la devise et/ou le marché dans lequel ils naviguent. Si elle n’est pas configurée, Connectif collectera toute l’activité dans le même compte, indépendamment du pays et de la devise utilisés par le contact.

Intégration Shopify Mar.2025 - 1-min.png

 

13. Sélectionnez la langue et la devise dans lesquelles vous souhaitez enregistrer l’activité pour le compte principal et cliquez sur Activer.

De cette manière, Connectif collectera dans un seul compte tous les marchés qui partagent la même langue et la même devise.

Intégration Shopify Mar.2025 - 2-min.png

14. (Optionnel). Pour limiter le tracking à un seul marché, cliquez sur le menu déroulant Marché. Ce paramètre affichera une liste d’URLs (des Markets) disponibles pour la langue et la devise sélectionnées au point 13.

15. Sélectionnez l’URL pour laquelle vous souhaitez appliquer le tracking dans ce cas.

 

Si aucun marché n’est sélectionné, cette boutique Connectif collectera l’activité de tous les marchés avec cette langue/devise. Si un marché est sélectionné, le suivi ne s’appliquera qu’à celui-ci.

Intégration avec Shopify Mar.2025 - 3-min (1).png

16. Cliquez sur Activer pour enregistrer la configuration.

Intégration avec Shopify Mar.2025 - 4-min.png

17. (Optionnel). Pour connecter un autre compte Connectif afin de suivre l'activité dans une autre langue, devise et/ou marché, cliquez sur Ajouter une boutique Connectif.

 

L’ajout d’autres boutiques est optionnel, mais vous devrez le faire pour pouvoir suivre leur activité dans le compte Connectif correspondant. Vous pouvez répéter ce processus autant de fois que nécessaire pour lier d’autres boutiques.

Intégration avec Shopify Mar.2025 - 5-min.png

18. Entrez votre nom d'utilisateur et mot de passe Connectif.

Intégration avec Shopify Mar.2025 - 6-min.png

19. Sélectionnez la boutique qui suivra l’activité de votre eCommerce dans cette autre langue/devise/marché.

Intégration avec Shopify Mar.2025 - 7-min.png

20. Sélectionnez la langue et la devise dans lesquelles vous souhaitez enregistrer l'activité pour le compte secondaire et cliquez sur Ajouter.

Intégration avec Shopify Mar.2025 - 8-min.png

3.2. Activation et configuration de la synchronisation

(Dans cette section, les étapes minimales nécessaires pour synchroniser Shopify et Connectif et commencer à collecter des données d'interaction en temps réel sont expliquées).

21. Dans "Paramètres > Suivi", activez l’option Suivi Connectif pour inclure le script de Connectif sur votre site web.

Intégration avec Shopify Mar.2025 - 9-min.png

22. Cliquez sur Enregistrer les modifications.

Intégration avec Shopify Mar.2025 - 10-min.png

 

Activer le Suivi permet de collecter les données de trafic et de navigation, mais ne récupère pas les informations des contacts, achats, produits visités, etc. Pour cela, l’Extension du thème doit être activée.

23. Cliquez sur le bouton Configurer l’extension du thème.

Intégration avec Shopify Mar.2025 - 11-min.png

24. Sélectionnez le thème actif (celui marqué comme « Actuel ») et cliquez sur Configurer l’extension du thème.

Intégration avec Shopify Mar.2025 - 12-min.png

25. Dans l’Éditeur du thème, cliquez sur Enregistrer pour activer l’Extension du thème dans votre compte.

Intégration avec Shopify Mar.2025 - 13-min.png

 

3.3. Configuration pour recevoir des informations sur les produits 

(Dans cette section, les options de configuration du module Connectif pour collecter des informations sur les produits sont expliquées).

26. Dans "Paramètres > Produit", cochez ou décochez la case Utiliser les variantes de produit pour collecter dans les paniers et achats les variantes de produit (taille, couleur, etc.).

27. Choisissez de collecter l’ID interne du produit dans Shopify ou le SKU en sélectionnant l’une des deux options du sélecteur.

  L’ID Shopify est attribué automatiquement, tandis que le SKU doit être renseigné lors de la création de vos produits.

Intégration avec Shopify Mar.2025 - 14-min.png

28. Cochez la case Mettre à jour les produits en temps réel pour mettre à jour immédiatement les produits dans Connectif lorsqu’une modification est appliquée au produit depuis le panneau Shopify. Cette option n’est pas compatible avec le multistore.

 

Lors de l’utilisation de cette fonctionnalité, il faut tenir compte de certains points concernant la manière dont les données sont mises à jour dans Connectif :
- Les champs personnalisés de produit synchronisés par d’autres moyens (balises de produit visité via l’extension de thème) sont exclus de cette méthode de mise à jour.
- Par ce mécanisme, la taille originale des images des produits sera collectée.
- Dans l’intégration de Shopify avec Connectif, les Collections de Shopify sont stockées comme Catégories de produit dans Connectif. La modification du nom de ces collections ou l’appartenance d’un produit à celles-ci est exclue de la mise à jour par ce mécanisme. 
- La suppression de produits dans Shopify n’actualisera pas l’état du stock ni ne supprimera les produits dans Connectif en utilisant ce mécanisme.

29. Cliquez sur Enregistrer les modifications.

 

3.4. Configuration pour notifier les achats 

(Dans cette section, les options de configuration du module Connectif pour collecter des informations sur les achats sont expliquées).

30. Dans "Paramètres > Achats", choisissez, dans le menu déroulant État de paiement des achats, le/les état(s) que doivent avoir les commandes pour être enregistrées comme Achats dans Connectif. Ainsi, lorsqu’une commande se trouve dans l’un des états sélectionnés, Shopify notifiera Connectif de l’achat et celui-ci sera enregistré dans votre Boutique. 

Intégration avec Shopify_ notifier achats - 1-min.png

 

Dans notre exemple, en ayant sélectionné l’état "Payé", dans Connectif seront enregistrées comme Achats toutes les commandes ayant cet état.

 

3.5. Ajuster les configurations de l’Extension du thème

(Dans cette section, il est expliqué quelles configurations peuvent être ajustées dans l’éditeur de l’Extension du thème et comment les réaliser).

 

L’Extension du thème et la configuration du module Connectif sont des plateformes différentes, il faut donc vérifier que les deux configurations coïncident et, dans le cas contraire, effectuer les ajustements nécessaires.

31. Cliquez sur le bouton Configurer l’Extension du thème.

Intégration avec Shopify Mar.2025 - 11-min.png

32. Dans "Configuration du panier", vérifiez que l’option Utiliser les variantes de produit correspond à celle que vous avez sélectionnée à l’étape 3.3.

Intégration avec Shopify Mar.2025 - 16-min.png

33. Dans "Paramètres du produit > ID de Produit", confirmez que les informations de produit configurées sont les mêmes que celles que vous avez sélectionnées à l’ étape 3.3.

Intégration avec Shopify Mar.2025 - 17-min.png

34. Dans "Paramètres du produit", choisissez la taille de l’image du produit qui sera affichée dans Connectif (en pixels).

Shopify_integration_oct_22_-_20.png

35. Dans "Étiquettes personnalisées", insérez les champs personnalisés créés dans Connectif au moyen de code Liquid, comme expliqué à l’ étape 3.7.

Intégration avec Shopify Mar.2025 - 19-min.png

 

3.6. Configuration pour créer le contact dans Shopify

(Dans cette section, l’option de configuration du module Connectif pour créer le contact dans Shopify est expliquée).

36. Dans la section Contact, activez, si vous le souhaitez, l’option pour que Connectif crée le contact dans Shopify. Cette option créera le contact dans votre Shopify, mais ne lui créera pas de compte et n’enverra pas d’invitation à créer un compte.

  

Par exemple, si un contact est créé dans Connectif via un formulaire d’inscription à la newsletter, ce contact sera également créé dans Shopify, mais, comme indiqué, sans compte.

Intégration avec Shopify Mar.2025 - 20-min.png

 

3.7. Envoi d’informations supplémentaires sur les Produits et les Clients

(Dans cette section, il est expliqué comment créer de nouveaux champs de Produits et de Clients dans Shopify et les envoyer à Connectif. Si vous avez besoin de plus d’informations sur la création de ces champs, consultez la documentation officielle de Shopify).

37. Accédez au Panneau d’administration de votre boutique Shopify et cliquez sur Paramètres.

Intégration avec Shopify Mar.2025 - 21-min.png

 

Dans notre exemple, il est illustré comment créer une étiquette personnalisée de produit appelée "Example". Le processus serait le même pour les champs personnalisés de produit.

38. Allez dans Données personnalisées et sélectionnez la partie de la boutique où vous souhaitez ajouter le nouveau champ personnalisé.

Intégration avec Shopify Mar.2025 - 22-min.png

 

Dans notre exemple, un champ est ajouté pour les Produits. Pour créer un champ de contact, vous devriez cliquer sur Clients et suivre les mêmes étapes.

39. Ajoutez un nouveau métachamp en remplissant le Nom et la Description.

40. Sélectionnez un Type de champ.

Intégration avec Shopify Mar.2025 - 23-min.png

 

Dans notre exemple, un champ de type ligne de texte est créé.

41. Assurez-vous que dans les Options, l’ Accès aux boutiques en ligne dispose des permissions de Lecture.

Intégration avec Shopify Mar.2025 - 24-min.png

42. Cliquez sur Enregistrer.

43. Copiez le nom du métachamp afin de l’inclure dans l’ Éditeur de thème.

Intégration avec Shopify Mar.2025 - 25-min.png
 

Dans notre exemple, le métachamp de Produit créé est copié (product.metafields.custom.example).

44. Ajoutez le métachamp copié dans l’extrait de code suivant :

<span class="custom_meta">{{ product.metafields.custom.example }}</span>

 

45. Copiez l’extrait de code obtenu dans la section Étiquettes personnalisées de l’Éditeur de thème.

Intégration avec Shopify Mar.2025 - 26-min.png
 

Dans notre exemple, il est montré comment inclure le code du métachamp pour le Produit créé. Dans le cas de champs de contact, vous devriez l’ajouter dans la zone Contact.

46. Cliquez sur Enregistrer.

 

 

Succès !
Votre installation de l’application Connectif pour Shopify est maintenant prête.

  

Vous pouvez vous assurer que vous avez correctement réalisé l’intégration en suivant les étapes de cet article.

 


Foire aux questions

1. Quelles informations Connectif collecte-t-il via cette intégration

a. Informations collectées sur les Contacts

Dans les intégrations avec Shopify, via la balise cn_client_info, certaines informations sur les Contacts sont transférées par défaut :

  • email

  • first_name

  • last_name

  • _newsletter_subscription_status

b. Informations collectées sur les Produits

Dans les intégrations avec Shopify, via la balise cn_product_visited et la synchronisation quotidienne du catalogue, certaines informations sur les Produits sont collectées par défaut :

  • product_id

  • url

  • name

  • description

  • image_url (featured_image)

  • thumbnail_url

  • unit_price

  • unit_price_original

  • discounted_amount

  • discounted_percentage

  • availability

  • category (collection.title)

  • tag

  • brand (product.vendor)

  • published_at

Dans les intégrations avec Shopify, si l’option de synchronisation des produits en temps réel est activée, certaines informations sur les Achats sont collectées :

  • id
  • name
  • productDetailUrl
  • unitPrice
  • availability
  • brand
  • description
  • unitPriceOriginal
  • imageUrl
  • publishedAt
  • tags
  • categories
  • thumbnailUrl
  • discountedAmount
  • discountedPercentage
  • inStockUnits
  • discountedPercentage

c. Informations collectées sur les Achats

Dans les intégrations avec Shopify, via l’API, certaines informations sur les Achats sont collectées :

  • cartId

  • totalPrice

  • totalQuantity

  • purchaseDate

  • purchaseId

  • products

    • quantity

    • price

    • productDetailUrl

    • productId

    • name

    • unitPrice

    • publishedAt

    • imageUrl

    • unitPriceOriginal

    • discountedAmount

    • discountedPercentage

    • tags

    • brand

    • thumbnailUrl

  • paymentMethod

 

2. Je n’ai pas encore de plan Connectif actif et je souhaite en souscrire un

(Dans cette section, il est expliqué quoi faire dans le cas où vous ne disposez pas encore d’un plan Connectif et souhaitez en souscrire un via Shopify).

  • Dans ce cas, suivez les indications de Étape 2.

3. J’ai déjà un plan Connectif mais je veux le payer via Shopify

(Dans cette section, il est expliqué quoi faire dans le cas où vous disposez déjà d’un plan Connectif qui n’est pas facturé via Shopify et souhaitez le modifier afin de le payer par cet outil).

  • Dans votre compte Shopify, allez au panneau de contrôle du module Connectif et, dans Plan, cliquez sur le bouton Souscrire.

Shopify_integration_oct_22_-_30.png

 

  • Après avoir révisé et accepté les conditions, choisissez et validez le mode de paiement.

Shopify_integration_oct_22_-_31.png

 

4. Je dois commencer à payer le plan assigné

(Dans cette section, il est expliqué quoi faire dans le cas où vous avez déjà un plan assigné à souscrire et que vous allez commencer à le payer via Shopify).

  • Dans votre compte Shopify, allez au panneau de contrôle du module Connectif et, dans Plan, cliquez sur le bouton Souscrire.

Shopify_integration_oct_22_-_30.png

 

  • Après avoir révisé et accepté les conditions, choisissez et validez le mode de paiement.

Shopify_integration_oct_22_-_31.png

 

5. Comment récupérer les paniers abandonnés avec l’URL de Récupération de Panier

(Dans cette section, il est expliqué comment fonctionne l’URL de Récupération de Panier pour obtenir les articles associés à un panier spécifique).

Via l’intégration avec Shopify, une URL de Récupération de Panier (Cart recovery url) 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 être fait au moyen du nœud "Obtenir le dernier panier" et "Lors de l’abandon de panier", puis mappé 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 continuer avec les articles suivants :