Vérifier les tags à l'aide des outils de développement Chrome

Grâce aux outils pour les développeurs Chrome, vous pouvez rapidement analyser le contenu ou les ressources d'une page Web, et vérifier ainsi plus facilement l'ensemble de vos tags Campaign Manager 360.

Accéder aux outils pour les développeurs

Pour ouvrir les outils pour les développeurs, effectuez l'une des opérations suivantes :

• Effectuez un clic droit sur une page, puis sélectionnez Inspecter. Le code HTML correspondant à l'élément sur lequel vous avez cliqué s'affiche.
• En haut de la fenêtre du navigateur, sélectionnez Affichage > Développeur > Outils pour les développeurs.

En savoir plus sur les outils pour les développeurs Chrome

Description des onglets disponibles

• L'onglet "Éléments" contient le code HTML correspondant à la page affichée. Il est différent du code source. Si des éléments HTML sont créés ou modifiés via JavaScript lors du chargement de la page, le code HTML rendu affichera ces nouveaux éléments ou éléments modifiés, alors que la source de la page affichera le code tel qu'il était avant les modifications.

  Cas d'utilisation

  • Rechercher les modifications de tags : vous pouvez utiliser cet onglet pour trouver les balises Floodlight et/ou les tags d'emplacement implémentés sur la page, puis vérifier si des modifications ont été apportées à ces tags. Étant donné que les tags d'emplacement Campaign Manager 360 contiennent des URL utilisant le domaine "doubleclick", vous pouvez effectuer une recherche sur le terme "double" pour trouver facilement tous les tags. Lorsque vous avez identifié un tag modifié, comparez la version du tag mise en œuvre avec la version initiale du tag ayant été importée à partir de l'interface utilisateur de trafficking.
  • Résoudre les problèmes liés au code CSS : la colonne située à droite dans l'onglet "Éléments" affiche différents attributs CSS qui déterminent le mode et l'emplacement d'affichage de l'élément HTML sélectionné.
  • La barre "Calculés" affiche toutes les règles CSS actuellement appliquées à l'élément sélectionné. Il peut s'agir de règles ayant été définies par l'administrateur du site Web à l'aide d'un code CSS explicite ou de règles dérivées des valeurs par défaut utilisées par le navigateur pour ce type d'élément HTML.
  • En revanche, la section "Styles" n'affiche que les règles CSS qui ont été explicitement définies par l'administrateur du site Web. Chaque sous-section représente une partie distincte du code de la page où a été définie une règle CSS applicable à l'élément HTML sélectionné. Si vous constatez qu'une règle empêche la page de s'afficher correctement, vous pouvez cliquer sur le lien en haut à droite de la sous-section correspondante afin de charger et vérifier la ligne ou le document où cette règle a été ajoutée.

  L'une des fonctionnalités les plus utiles de l'onglet "Éléments" est celle qui vous permet de modifier le code directement pendant son inspection. Si vous détectez une ligne de code HTML ou une règle CSS susceptible d'être à l'origine d'un problème d'affichage de la page, essayez de résoudre ce problème simplement en modifiant le code en cause. Vos modifications ne seront appliquées qu'à la version de la page stockée dans la mémoire temporaire de votre navigateur. Si vous actualisez la page, ou si elle est consultée par quelqu'un d'autre, les modifications que vous avez effectuées n'apparaissent pas.

• L'onglet "Sources" affiche un tableau de toutes les ressources qui ont été chargées avec la page actuellement inspectée. Ces ressources peuvent être des images, des documents HTML, des fichiers JavaScript, etc.

  Cas d'utilisation

  Rechercher des tags qui ne sont pas écrits dans la page : l'onglet "Éléments" vous permet de voir le rendu HTML de la page, mais les tags d'emplacement peuvent aussi être déclenchés par du code écrit ailleurs que dans la page. Dans l'onglet "Sources", vous pouvez également modifier et déboguer des fichiers JavaScript.

  Astuce : Vous pouvez également utiliser le panneau Rechercher pour trouver facilement un tag implémenté dans toutes les ressources chargées. En haut à droite des outils de développement, cliquez sur l'icône à trois points , puis sélectionnez Plus d'outils > Rechercher.

• L'onglet "Réseau" intègre un outil de détection de proxy très utile pour surveiller le trafic HTTP généré vers la page, pendant et après son chargement.

  Cas d'utilisation

  • Vérifier si votre tag d'emplacement ou votre balise Floodlight se sont déclenchés : l'utilisation d'un outil de détection de proxy est particulièrement indiquée pour le contrôle qualité et le dépannage. Par définition, lorsqu'un tag ne se déclenche pas, il ne peut pas effectuer le suivi du contenu des créations comme il le devrait, ni le renvoyer. De même, du moment qu'un tag effectue l'appel approprié (avec une syntaxe et une mise en forme correctes), nos serveurs ne contrôlent pas le mode de mise en œuvre du tag (certains points spécifiques à prendre en compte selon la nature de la page). Utilisez l'onglet "Réseau" pour vérifier si le tag d'emplacement ou la balise Floodlight se sont déclenchés et, le cas échéant, contrôler que la syntaxe de l'appel correspond à l'URL indiquée dans la version initiale du tag.
  • Tester la latence : en plus d'indiquer si un appel s'est produit ou non, l'onglet "Réseau" affiche le délai de réponse à une demande donnée. Cela s'avère utile pour tester la latence, en particulier dans le cas de balises Floodlight dynamiques. Si vous constatez qu'une balise Floodlight ralentit beaucoup le chargement de la page, l'examen des appels effectués par des pixels encapsulés vous aide généralement à identifier la cause du problème. En effet, la latence est souvent due à l'un des pixels encapsulés dans la balise, plutôt qu'au pixel lui-même.

• L'onglet "Performances" : affiche le trafic HTTP et l'utilisation de la mémoire au fil du temps. À l'instar de l'onglet "Réseau", cet onglet fournit des données utiles pour identifier les sources de latence. Il n'a pas d'autre utilité sur le plan du dépannage de Campaign Manager 360.

• L'onglet "Mémoire" fournit aux développeurs Web un outil leur permettant d'optimiser l'utilisation du processeur au sein de leurs applications Web. Il n'a pas d'autre utilité sur le plan du dépannage de Campaign Manager 360.

• L'onglet "Lighthouse" vous permet d'analyser le chargement d'une page. Vous y trouverez également des suggestions et des optimisations destinées à réduire le temps de chargement de la page, un paramètre susceptible d'altérer la réactivité perçue ou réelle. Il n'a pas d'autre utilité sur le plan du dépannage de Campaign Manager 360.

• L'onglet "Console" détecte automatiquement les erreurs dans le code de la page. Si, grâce à l'onglet "Réseau", vous avez détecté qu'un tag ne se déclenche pas, vous pouvez ensuite essayer d'identifier la cause du problème en examinant les données de l'onglet "Console".

  Cas d'utilisation

  Résoudre les erreurs de syntaxe : si votre tag ne se déclenche pas, consultez l'onglet "Console" pour voir si des erreurs ont été détectées par Google Chrome. Les principales erreurs possibles sont les suivantes :

  • "NS_IMAGELIB" : cette erreur peut se produire lorsqu'une URL iFrame "src" est mise en œuvre en tant qu'image. Cette combinaison empêche le déclenchement du tag d'emplacement ou de la balise Floodlight. Néanmoins, pour la balise Floodlight, une conversion peut être enregistrée malgré l'erreur. Si cette erreur concerne une balise Floodlight, les pixels tiers mis en œuvre dans cette balise ne peuvent pas se déclencher.
  • "Unsafe JavaScript attempt to access frame with URL" : cette erreur peut être ignorée, car il s'agit simplement d'un avertissement de sécurité qui s'affiche lorsque des tags iFrame de différents domaines sont intégrés à une page. Hormis pour les utilisateurs ayant défini leurs paramètres de sécurité à un niveau maximal, cet avertissement ne s'affichera pas. De plus, il n'aura aucune incidence sur la diffusion de la balise Floodlight ou de ses pixels encapsulés.
  • "Resource interpreted as '_blank_' but transferred with MIME type" : ce message indique une erreur de format de fichier. MIME est un identifiant de format de fichier utilisé sur Internet. Cette erreur peut se produire lorsqu'une ressource est chargée avec une extension de fichier incorrecte (par exemple, .gif au lieu de .jpeg).
  • "Uncaught TypeError" : ce message indique qu'une erreur de type a été détectée dans un élément HTML de la page. En général, cette erreur dénote la présence de code erroné dans une fonction JavaScript.
  • "Uncaught SyntaxError" : ce message indique la présence d'une erreur de syntaxe dans un élément de la page. Cette erreur est généralement due à l'utilisation incorrect d'un caractère supplémentaire (<"/-*^#).

  L'onglet "Console" affiche les messages d'erreur en les reliant à la ligne ou au document à l'origine de l'erreur. Cette fonctionnalité de traçabilité est très utile pour identifier la ligne de code incorrecte à modifier. Toutefois, si le processus de détection des erreurs s'avère fiable, le mécanisme de leur attribution l'est un peu moins. En effet, il peut arriver qu'une erreur soit attribuée à une ligne qui se trouve à proximité de la ligne contenant réellement le code erroné.