Insérer un inline dans votre eCommerce

Connectif permet d'ajouter facilement des contenus web personnalisés à votre eCommerce sans avoir besoin de modifier son code ni d'altérer sa structure.

Dans cet article, vous apprendrez comment insérer du contenu Connectif intégré sur votre site web.

  

Temps d'implémentation : 15 minutes.
Difficulté : Moyenne
Quand l'utiliser : Lorsque vous souhaitez inclure du contenu (statique ou dynamique) sur votre site web sans modifier le code.

 

ÉTAPE 1. Localisation du sélecteur approprié dans le code

(Dans cette section, l'étiquette appropriée du site web est identifiée, là où Connectif affichera le contenu).

  

Vous pouvez ignorer cette première étape et commencer par L'ÉTAPE 2 si :
— Vous connaissez déjà le sélecteur et l'identifiant unique à utiliser.
— Vous souhaitez créer un sélecteur spécifique pour votre contenu web afin d'éviter que des modifications ou mises à jour dans le code de votre eCommerce altèrent ou empêchent l'affichage des contenus insérés. Dans ce cas, nous vous recommandons d'utiliser un bloc "div" avec un identifiant (id) unique qui le distingue. N'oubliez pas de l'ajouter dans le code de votre eCommerce avant de continuer.

 

1.1 Localiser le sélecteur

  

Un sélecteur identifie un élément HTML, situé n'importe où sur la page web, par son ID, sa classe ou son attribut. Ce sélecteur sera la référence pour indiquer à Connectif où vous souhaitez afficher le contenu.

1. Accédez à la page de votre site web où vous souhaitez ajouter le contenu intégré.

2. Visualisez le bloc que vous souhaitez utiliser comme référence.

Insérer_du_contenu_intégré_sur_le_site_-_1.png

 

Dans notre exemple, l'objectif est d'envoyer le contenu pour qu'il apparaisse juste au-dessus du bloc "CUSTOM TEXT BLOCK".

3. Ouvrez la console des outils de développement (DevTools) du navigateur.

  

Tous les navigateurs possèdent dans leur menu un lien pour l'ouvrir. Voici des instructions pour l'ouvrir dans Google Chrome (navigateur utilisé dans notre exemple), Mozilla Firefox, Microsoft Edge et Safari.

En alternative, si vous utilisez Chrome, Firefox ou Edge, vous pouvez utiliser le raccourci clavier F12.

Insérer_du_contenu_intégré_sur_le_site_-_2.png

4. Sélectionnez l'onglet Éléments dans la console pour visualiser la structure HTML.

Insérer_du_contenu_intégré_sur_le_site_-_3.png

5. Cliquez sur l'icône Inspecter, la première à gauche dans le menu supérieur.

Insérer_du_contenu_intégré_sur_le_site_-_4.png

6. Placez le curseur de la souris sur la zone de contenu que vous prévoyez d'utiliser comme référence. Cliquez lorsque la sélection est correcte pour que l'étiquette soit mise en évidence dans la console.

Insérer_du_contenu_intégré_sur_le_site_-_5.png

 

Dans notre exemple, l'étiquette mise en évidence, "<div id=”customer-text”>", est distinguée par l'attribut global "id" ayant pour valeur "custom-text". Ce bloc div contient toute la zone sélectionnée.

 

1.2 Vérifier que le sélecteur est unique.

(Dans cette section, on vérifie que le paramètre pour identifier l'étiquette ne se répète dans aucune autre étiquette).

7. Cliquez sur le contenu de l'onglet Éléments de la console et utilisez le raccourci clavier Control + F pour rechercher le nom de l'étiquette ou de l'attribut.

Insérer_du_contenu_intégré_sur_le_site_-_6.png

 

Dans notre exemple, l'identifiant "custom-text" n'a qu'une seule occurrence, il est donc adapté pour être utilisé comme sélecteur.

 

Le sélecteur doit être unique pour éviter que le contenu soit affiché plusieurs fois à différentes positions. Si la recherche montre plus d'une occurrence, il sera nécessaire de trouver un sélecteur adéquat différent.

Les attributs offrent de nombreuses possibilités d'utilisation et sont communs à de nombreux contenus web. Si vous souhaitez en savoir plus sur leur utilisation dans des contenus web de type inline, cliquez ici.

8. Copiez le nom de votre sélecteur unique dans le presse-papiers ou dans un bloc-notes.

9. Fermez la console de développement.

 

ÉTAPE 2. Afficher le contenu intégré sur le site

2.1 Créer un workflow pour afficher le contenu

10. Accédez aux “Workflows” et cliquez sur  Créer un nouveau workflow.

11. Concevez votre stratégie en définissant les conditions pour afficher le contenu intégré aux contacts.

  

Un workflow ayant pour objectif d'insérer du contenu intégré sur le site doit contenir, au minimum, un nœud "Envoyer un contenu web".

 

Dans notre exemple, une stratégie simple a été créée qui affiche un contenu à tous les contacts qui visitent la page d'accueil.

N'oubliez pas que vous pouvez utiliser nos modèles qui envoient du contenu intégré.

Insérer_du_contenu_intégré_sur_le_site_-_7.png

12. Configurez les autres nœuds du workflow, sauf le nœud "Envoyer un contenu web" (les instructions pour le configurer se trouvent à l'étape suivante).

 

Dans notre exemple, l'audience a été définie dans le nœud "Nœud Accueil" pour tous les contacts existants et nouveaux. Le nœud déclencheur "Lors de la visite de la page" a été configuré pour ne s'activer que sur la page d'accueil.

 

Si vous souhaitez en savoir plus sur ces deux nœuds, vous pouvez consulter les articles Nœud "Accueil" et Nœuds de type déclencheur.

 

2.2 Configurer le nœud "Envoyer un contenu web"

13. Dans le nœud “Envoyer un contenu web”, cliquez sur  (Modifier la configuration du nœud).

 

Si vous souhaitez en savoir plus sur le nœud "Envoyer un contenu web", cliquez ici.

14. Lors de la première étape de la configuration, sélectionnez ou créez un nouveau contenu inline.

Insérer_du_contenu_intégré_sur_le_site_-_7.png

  

Parmi les différents contenus web, seul le type inline est intégré dans la structure du site, tandis que les autres sont affichés par-dessus.

Pour en savoir plus sur le contenu web de type inline, cliquez ici.

15. Cliquez sur Suivant  .

16. Collez dans la section Sélecteur le nom obtenu au point 8 et sélectionnez son type dans les boutons à sa gauche.

Insérer_du_contenu_intégré_sur_le_site_-_8.png

 

Dans notre exemple, nous avons laissé l'attribut global Id sélectionné par défaut et collé la valeur "custom-text" obtenue au point 8.

17. Choisissez la position par rapport à l'élément sélectionné où votre contenu sera intégré.

  

Vous pouvez choisir d'insérer votre design immédiatement avant ou après le bloc ciblé par le sélecteur, ou même à l'intérieur de celui-ci.

Si vous indiquez l'option Remplacer l'intérieur, le contenu généré depuis Connectif remplacera le contenu d'origine, qui ne sera pas affiché.

18. Cliquez sur Suivant  .

19. Associez les variables si nécessaire.

  

S'il n'y a aucune variable définie dans votre contenu, comme c'est le cas dans notre exemple, vous n'avez rien à configurer à cette étape.

Si votre contenu contient des variables personnalisées, vous devrez les associer à cette étape avec les informations provenant d'autres nœuds.

Insérer_du_contenu_intégré_sur_le_site_-_9.png

 

Pour en savoir plus sur les variables, cliquez ici.

20. Cliquez sur Terminer  .

21. Dans le workflow, cliquez sur  Enregistrer pour enregistrer les modifications et sur  Démarrer pour l'activer.

22. Vérifiez sur votre site que le contenu est affiché comme prévu.

Insérer_du_contenu_intégré_sur_le_site_-_11.png

 

 

 Succès!
Votre contenu Connectif est intégré et affiché sur votre site web.

 

UTILISATIONS ALTERNATIVES

Utilisez le contenu intégré de manière intelligente pour améliorer encore plus vos résultats.

1. Insérer du contenu intégré invisible pour le visiteur

(Cette section explique comment inclure du code HTML depuis Connectif sur votre site sans élément visuel).

  

Les contenus inline invisibles sont très utiles pour exécuter des actions qui ne nécessitent pas l'affichage d'un contenu. Un exemple courant est de demander une souscription aux notifications push sans afficher de contenu web.

1. Accédez à “Contenu > Contenus web” et cliquez sur  Créer un nouveau contenu web.

2. Sélectionnez comme type de contenu web Inline.

3. Nommez votre contenu.

Insérer_du_contenu_intégré_sur_le_site_-_10.png

3. Cliquez sur  Créer un contenu web.

4. Ajoutez un composant avancé de type HTML.

Insérer_du_contenu_intégré_sur_le_site_-_13.png

5. Rédigez le contenu du code HTML.

Insérer_du_contenu_intégré_sur_le_site_-_14.png

6. Cliquez sur  Enregistrer.

7. Créez un workflow, en suivant les étapes de ce guide à partir de l'ÉTAPE 2, pour utiliser votre contenu intégré invisible pour le visiteur.

 


Continuez à apprendre !

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