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.
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.
4. Sélectionnez l'onglet Éléments dans la console pour visualiser la structure HTML.
5. Cliquez sur l'icône Inspecter, la première à gauche dans le menu supérieur.
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.
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.
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é.
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.
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.
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.
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.
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.
3. Cliquez sur Créer un contenu web.
4. Ajoutez un composant avancé de type HTML.
5. Rédigez le contenu du code HTML.
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 :
- Intégration personnalisée pour envoyer des données, pour envoyer des données depuis Connectif vers des systèmes ou applications externes.
- Détecter et réagir aux liens web créés en dehors de Connectif, pour détecter et réagir aux clics sur n'importe quel lien de votre site.
-
Intégration avec Facebook et Instagram, pour connecter votre compte Facebook Ads avec Connectif et commencer à gérer vos audiences.
-
Formulaires intégrés, pour intégrer dans Connectif des formulaires déjà existants sur votre site.