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

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

Accéder aux outils de développement

1. Faites un clic droit sur une page, puis sélectionnez "Inspecter l'élément". Le code HTML correspondant à l'élément sur lequel vous avez cliqué s'affiche.

2. Sélectionnez Afficher > Options pour les développeurs > Outils de développement.

3. Utilisez le raccourci "Alt + Commande + i".

Description des onglets disponibles

• L'onglet "Eléments" contient le code HTML correspondant à la page affichée. Ce dernier 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.

  EXEMPLES D'UTILISATION

  • Rechercher les modifications de tags : vous pouvez utiliser cet onglet pour trouver les balises Floodlight et/ou les tags d'emplacement qui ont été mis en œuvre 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 "Style calculé" 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 dans l'angle supérieur droit 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 "Elé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 celle-ci est consultée par quelqu'un d'autre), les modifications que vous avez effectuées n'apparaissent pas.

• L'onglet "Resources" 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. Cet onglet est très utile pour le dépannage de Campaign Manager 360, car sa fonctionnalité de recherche permet de vérifier chacune des ressources connexes à la page, pas seulement son contenu.

  EXEMPLES D'UTILISATION

  Rechercher des tags qui ne sont pas écrits dans la page : l'onglet "Elements" 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. Pour cette raison, la fonctionnalité de recherche de l'onglet "Resources" est le moyen le plus simple et le plus fiable de trouver tous les tags de redirection mis en œuvre.

• L'onglet "Network" 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.

  EXEMPLES D'UTILISATION

  • Vérifier si votre tag Floodlight ou d'emplacement s'est déclenché : l'utilisation d'un outil de détection de proxy est particulièrement indiquée dans le cadre du contrôle qualité et du 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 Floodlight ou d'emplacement s'est déclenché 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 tags Floodlight dynamiques. Si vous constatez qu'un tag Floodlight ralentit beaucoup le chargement de la page, l'examen des appels effectués par des pixels en superposition vous aide généralement à identifier la cause du problème. En effet, la latence est souvent due à l'un des pixels en superposition dans le tag, plutôt qu'au pixel lui-même.

• L'onglet "Scripts" peut être utilisé pour le débogage du code JavaScript. Bien qu'il constitue un outil précieux pour les développeurs Web, il n'est pas à proprement parler un outil de contrôle qualité et de dépannage conçu pour Campaign Manager 360.

• L'onglet "Timeline" affiche le trafic HTTP et l'utilisation de la mémoire au fil du temps. À l'instar de l'onglet "Network", 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 "Profiles" fournit aux développeurs Web un outil leur permettant d'optimiser l'utilisation du processeur au sein de leurs applications Web. Cet onglet n'a pas d'utilité sur le plan du dépannage de Campaign Manager 360.

• L'onglet "Audits" 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. Cet onglet n'a pas d'utilité sur le plan du dépannage de Campaign Manager 360.

• L'onglet "Console" détecte automatiquement les erreurs présentes dans le code d'une page. Si, grâce à l'onglet "Network", 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".

  EXEMPLES 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 :

  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é.

  • "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 du tag Floodlight. Néanmoins, pour ce dernier, une conversion peut être enregistrée malgré l'erreur. Si cette erreur concerne un tag Floodlight, les pixels tiers mis en œuvre dans ce tag 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 du tag Floodlight ou de ses pixels en superposition.
  • "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 incorrecte d'un caractère supplémentaire (<"/-*^#).