Lorsque vous concevez un Product Tour, vous pouvez choisir des éléments spécifiques du site web, comme des boutons ou des en-têtes, pour pointer vos messages. Intercom utilise des sélecteurs CSS pour vous permettre de choisir ces éléments.

Lorsque vous choisissez un élément, le tour génère automatiquement un sélecteur CSS qui indique comment pointer cet élément. Vous pouvez voir le CSS de l’élément sélectionné en bas à gauche :

Vous pouvez vouloir ajouter manuellement le sélecteur CSS pour plusieurs raisons, que nous aborderons plus tard dans cet article. Si vous souhaitez modifier manuellement le sélecteur CSS choisi automatiquement, cliquez sur « Avancé » après avoir sélectionné l’élément du site web.

Ici, vous pouvez saisir manuellement le sélecteur CSS que vous souhaitez sélectionner :

Pourquoi modifier le CSS d’un tour ?

Il y a plusieurs raisons pour lesquelles vous pourriez vouloir modifier le CSS lors du choix d’un élément du site web :

Votre produit a changé

Si votre produit ou site a changé depuis la publication de votre tour, vous pouvez constater que le CSS original ne fonctionne plus. Cela peut être dû au fait que l’élément référencé n’existe plus ou qu’il a été déplacé à un endroit très différent. Dans ce cas, vous pouvez choisir de sélectionner un nouvel élément avec le constructeur de tour ou saisir manuellement un nouveau sélecteur.

Votre produit utilise des classes générées dynamiquement

Le CSS est utilisé pour appliquer des styles aux éléments de votre site web. Certains frameworks web génèrent dynamiquement les classes CSS pour appliquer ces styles. Cela signifie que les sélecteurs CSS peuvent changer à chaque fois qu’un utilisateur accède à votre produit ou site. Dans ce cas, vous ne pourrez pas utiliser le sélecteur CSS automatique pour construire votre tour. Vous pouvez modifier certains sélecteurs pour utiliser un joker afin d’ignorer la partie générée dynamiquement du sélecteur CSS. Cela signifie modifier le CSS pour que le sélecteur identifie uniquement les parties statiques/génériques qui seraient présentes pour tous les users. Dans l’exemple ci-dessous, nous modifions le sélecteur pour rechercher button__ plutôt que button__2kbli, car cette partie du CSS apparaît à tous les users.

Comment puis-je m’assurer que mon tour est bien envoyé ?

La meilleure façon de garantir que vos tours sont envoyés correctement est d’annoter le HTML de votre site avec un attribut spécial que Intercom peut détecter.

Note : Vous devrez modifier le HTML pour cela.

Si vous savez quels éléments de votre site vous souhaitez utiliser dans un tour, vous pouvez ajouter un attribut data spécial à ces éléments sous la forme : data-intercom-target=”...”.

<div data-intercom-target="Login button">

 ...

</div>

Par exemple, si vous souhaitez pointer vers votre bouton de connexion dans un tour, vous pouvez ajouter data-intercom-target=”Login button” à cet élément. En annotant votre HTML de cette manière, il est beaucoup plus probable que de petits changements dans votre produit n’affecteront pas vos tours.

Si vous annotez le HTML comme indiqué ci-dessus, alors le constructeur de tour pourra mettre en surbrillance les éléments avec l’annotation data-intercom-target, afin que vous puissiez les sélectionner avec le constructeur de tour :

Solutions avancées pilotées par les développeurs

Pour des problèmes complexes tels que les menus déroulants et la navigation latérale :

Menus déroulants : Au lieu de cibler les éléments individuels du menu déroulant, mettez en surbrillance le menu déroulant lui-même et fournissez des instructions aux users. Suivez avec un nouveau tour après la sélection.
Navigation latérale : Mettez à jour le CSS de votre page pour inclure l’attribut data-intercom-target. Par exemple :
<div data-intercom-target="Side navigation button">Texte du bouton</div> Cela assure la stabilité des cibles de navigation, garantissant que le Product Tour correspond aux éléments prévus.
Annoter les éléments HTML : Ajoutez des attributs data-intercom-target aux éléments clés pour assurer la stabilité et la compatibilité avec les tours Intercom.
Assurer la visibilité des éléments : Vérifiez que les éléments ciblés par le tour sont visibles et non cachés par défaut.

Problèmes courants avec le ciblage des éléments dans Product Tour

Lors de la configuration des Product Tours, vous pouvez rencontrer des problèmes de ciblage des éléments. Voici quelques problèmes courants et leurs causes :

Les sélecteurs cassent à cause des changements du site web : Les changements structurels du site peuvent invalider les sélecteurs CSS existants, les rendant inutilisables. Intercom utilise une bibliothèque appelée Finder pour générer ces sélecteurs, qui peuvent devenir obsolètes lorsque la mise en page ou les éléments de votre site changent.
Sélecteurs dynamiques ou génériques : L’utilisation de sélecteurs génériques, comme .d-xl-inline, ou dynamiquement générés peut entraîner des échecs de ciblage car ils ne pointent pas toujours vers les bons éléments à travers différentes sessions ou chargements de page.
Éléments manquants ou cachés : Si un élément ciblé n’est pas visible ou n’a pas été rendu lorsque l’étape du tour commence, cela peut provoquer l’échec de l’étape ou afficher le message « élément non visible ici ». Assurez-vous toujours que tous les éléments ciblés sont présents et visibles pendant leurs étapes respectives du tour.
Éléments dynamiques ou cachés : Assurez-vous que les éléments ciblés sont statiques et toujours présents dans le DOM. Pour les éléments dynamiques, envisagez de repenser le flux du tour ou de retarder l’étape jusqu’à ce que l’élément soit chargé.
Sélecteurs CSS incorrects ou génériques : Remplacez les sélecteurs génériques comme nth-child par des sélecteurs uniques et spécifiques, tels que l’attribut data-intercom-target, pour un ciblage précis.
Éléments manquants ou supprimés : Mettez à jour les sélecteurs CSS pour pointer vers des éléments universels et cohérents à travers toutes les versions de votre site. Évitez les sélecteurs comme [href='#/sheets/...'] et utilisez des alternatives plus stables.

Étapes de dépannage

Lorsque vous rencontrez des problèmes de ciblage des éléments dans Product Tour, suivez ces étapes de dépannage :

Vérifier la visibilité de l’élément

Si vous voyez le message « élément non visible ici » :

Enregistrez à nouveau l’étape dans le constructeur de Product Tour. Cela peut parfois rafraîchir le ciblage.
Vérifiez que l’élément est présent dans toutes les versions de votre site, y compris différentes tailles d’écran et états des users.
Ajoutez l’attribut data-intercom-target à l’élément. Cela facilite considérablement le ciblage fiable par Intercom.
Vérifiez le sélecteur : Vérifiez si le sélecteur CSS correspond à un élément toujours présent lorsque le tour doit se déclencher.
Modifiez le sélecteur : Modifiez le sélecteur pour pointer vers un élément visible et stable, comme « Ajouter une ligne de facture ».
Traitez les éléments dynamiques : Assurez-vous que les éléments apparaissant après une interaction utilisateur sont présents dans le DOM ou repensez le flux du tour.

Résoudre les erreurs de ciblage

Révisez et mettez à jour les sélecteurs CSS pour plus de cohérence. Les sélecteurs génériques ou dynamiques sont souvent la cause d’instabilité.
Remplacez les sélecteurs cassés par des références à des éléments statiques et universels. Par exemple, mettez à jour des sélecteurs comme [href='#/sheets/...'] pour pointer de manière fiable vers des éléments persistants moins susceptibles de changer.
Utilisez un ciblage avancé : Ajoutez un attribut data-intercom-target aux éléments et saisissez manuellement le sélecteur dans le constructeur de tour.
Collaborez avec les développeurs : Travaillez avec votre équipe de développement pour mettre à jour le CSS et le HTML de votre page pour un meilleur ciblage.

Testez et prévisualisez

Après avoir appliqué des corrections, prévisualisez toujours le tour pour confirmer que toutes les étapes fonctionnent comme prévu et que les éléments sont correctement ciblés.

Des questions ?

Si vous avez d’autres questions sur la modification du CSS dans les Product Tours, discutez simplement avec nous dans le Messenger et nous vous aiderons. Voici plus de ressources pour garantir la réussite de vos tours :

Modifiez le CSS pour pointer votre tour vers les bons éléments du site web