Les DOM fantômes sortent de l’ombre avec le moniteur de transaction d’Uptrends

Si vous développez ou gérez des sites web qui s’appuient largement sur les technologies de surveillance des transactions, vous savez probablement que leur croissance s’accompagne souvent d’une fragilisation liée aux interactions entre les codes HTML, CSS et JavaScript. Heureusement, les développeurs peuvent contourner ces problèmes en créant des DOM fantômes.

Lorsque votre page contient de nombreux composants web complexes, comme des sélecteurs de date, des paniers d’achats, des formulaires d’inscription ou des systèmes de notation, il peut s’avérer judicieux d’isoler et d’encapsuler ces éléments HTML, CSS et JS dans des DOM fantômes, afin d’éviter tout conflit avec la page principale. En isolant ces composants des autres composants web, les DOM fantômes contribuent à stabiliser la page. Toutefois, ils peuvent aussi créer des conflits avec les outils de surveillance des transactions.

La bonne nouvelle, c’est que la complexité croissante de vos applications n’est pas un problème. En effet, Uptrends vous propose une solution pour vous aider à préserver les bonnes performances de votre site web. Dans l’application Uptrends, vous pouvez désormais configurer les moniteurs de transaction de façon à surveiller les éléments des DOM fantômes, qu’ils aient été créés en interne ou par des prestataires tiers.

Quelle différence entre le DOM et le DOM fantôme ?

Avant de définir ce qu’est un DOM fantôme, le rôle de son imbrication dans un site web et les raisons pour lesquelles il est important de l’inclure dans la surveillance, commençons par examiner sa place au sein d’un arbre de modèle objet de document (DOM).

Un DOM est une représentation des éléments individuels figurant dans des documents markup, comme les fichiers HTML qui servent à constituer des pages web. Lors du chargement d’une page web, le navigateur construit un DOM d’après les spécifications du document HTML, où chaque élément trouve sa place dans une structure en forme d’arbre.

Tout changement apporté au DOM modifie l’affichage de la page web dans le navigateur. Cependant, des modifications temporaires peuvent être apportées à la page web alors même qu’elle est affichée dans le navigateur, par exemple en utilisant JavaScript. Le DOM d’une page peut être consulté dans les outils de développement de votre navigateur (généralement accessibles au moyen de la touche F12).

Le DOM fantôme est une forme d’encapsulation. Voyez-le comme un arbre DOM — ainsi que tous ses éléments et styles — imbriqué dans un autre DOM. Le DOM fantôme charge du contenu derrière le DOM, en isolant son propre code de façon à ce qu’il impacte uniquement certains éléments et évite les conflits dans le code source de la page.

Le DOM fantôme est structuré de la même façon qu’un DOM standard, mais associé à un hôte fantôme, qui est un nœud dans le DOM principal. Comme un DOM fantôme est un « arbre dans l’arbre », aucune partie de son code ne s’applique aux nœuds du DOM principal, et vice-versa.

Le DOM fantôme laisse plus de marge de manœuvre aux développeurs, et présente plusieurs avantages importants, comme pour le scoping de styles CSS, l’encapsulation DOM ou encore la composition. Mais les DOM fantômes compliquent aussi quelque peu les tests automatisés, car les éléments figurant à la racine fantôme n’existent techniquement pas dans le DOM principal.

Les DOM fantômes sont souvent intégrés sous forme de code dans des boutons cliquables que de nombreux sites web utilisent à diverses fins. Jusqu’à récemment, il était impossible de surveiller ce qui se produisait lorsque l’on cliquait sur ces boutons. Si votre entreprise ou votre site utilise largement ces éléments interactifs pour activer les différentes transactions possibles, vous comprenez aisément l’utilité de moniteurs de transaction pouvant explorer les DOM fantômes en plus du DOM du document principal.

Avec Uptrends, la surveillance des transactions permet d’examiner le contenu des DOM fantômes, notamment ceux qui ont été créés par des prestataires tiers, qui deviennent de plus en plus présents sur les sites web et dont les éléments complémentaires doivent être fiables.

Configurer un DOM fantôme pour les transactions

Les interactions dans un script de transaction s’appuient sur les nœuds dans le DOM de la page. Comme le DOM fantôme est séparé, le moniteur de transaction doit être configuré de façon à explorer le DOM fantôme au lieu du DOM principal.

Uptrends propose une méthode simple pour configurer son moniteur de transaction de telle sorte qu’il explore le contenu du DOM fantôme plutôt que le DOM du document principal.

Si la transaction doit inclure une étape de saisie d’une valeur dans le champ textuel, nous devons lui indiquer clairement qu’elle doit inclure le contenu du DOM fantôme.

DOM fantômes imbriqués

Dans certains cas, un DOM fantôme peut être imbriqué dans un autre DOM fantôme. Vous pouvez alors facilement configurer votre transaction en ajoutant un autre hôte DOM fantôme imbriqué, puis en saisissant les sélecteurs des DOM fantômes dans leur ordre d’apparition.

Ouvrez ensuite l’éditeur de script de transaction pour ajouter les éventuelles valeurs complémentaires au tableau shadowRoots. Dès cette étape de configuration terminée, vous pourrez facilement analyser les données de surveillance présentées dans les dashboards.

Ce qu’il faut retenir

De plus en plus répandue, l’utilisation des DOM fantômes est désormais prise en charge par Safari, Firefox et Edge, en plus de Chrome.

Si votre entreprise s’appuie largement sur des transactions utilisant des paniers d’achats ou des comptes d’utilisateur, ou si vous employez une application tierce pour du contenu, il est crucial que votre solution de surveillance gère les éléments figurant dans les DOM fantômes, sans qu’ils entrent en conflit avec le code source de votre page ou créent d’autres effets indésirables.

Réservez une démo avec un expert d’Uptrends pour tout savoir sur la surveillance de transactions dans Uptrends et la prise en charge des DOM fantômes.