Chrome-Entwicklertools zum Prüfen von Tags verwenden

Mithilfe der Chrome-Entwicklertools können Sie die Inhalte und Ressourcen einer Webseite schnell analysieren. Das hilft Ihnen beim Prüfen der Campaign Manager 360-Tags.

Auf Entwicklertools zugreifen

1. Klicken Sie mit der rechten Maustaste auf eine Seite und wählen Sie "Element untersuchen" aus. Hierdurch wird der HTML-Code des Elements angezeigt, auf das Sie geklickt haben.

2. Wählen Sie Anzeigen > Entwickler > Entwicklertools aus.

3. Verwenden Sie die Tastenkombination "Alt + Befehlstaste + I".

Verfügbare Tabs und ihre Verwendung

• Tab "Elements": Hier wird die gerenderte HTML der Seite angezeigt, die jedoch nicht mit dem Quellcode der Seite identisch ist. Werden HTML-Elemente beim Laden der Seite per JavaScript erstellt oder geändert, sind diese Änderungen im gerenderten HTML-Code sichtbar, während der Quellcode ohne Änderungen dargestellt wird.

  Anwendungsfälle

  • Auf Tag-Änderungen prüfen: Auf diesem Tab finden Sie die auf der Seite implementierten Floodlight- oder Placement-Tags und können herausfinden, ob sie geändert wurden. Der Suchbegriff „double“ ist bei der Suche nach einem Tag hilfreich, da einige URLs in Campaign Manager 360-Placement-Tags die Domain „doubleclick“ enthalten. Wenn Sie das Tag gefunden haben, vergleichen Sie seine implementierte Version mit dem direkt aus der Trafficking-Benutzeroberfläche exportierten Tag.
  • Fehler in CSS beheben: Auf dem Tab „Elements“ werden in der rechten Spalte verschiedene CSS-Attribute aufgeführt. Mit ihnen wird gesteuert, wie und wo das ausgewählte HTML-Element angezeigt wird.
  • In der Leiste „Computed Style“ werden alle CSS-Regeln aufgelistet, die für das ausgewählte Element gelten. Hierbei ist nicht entscheidend, ob sie mit einem expliziten CSS-Code festgelegt wurden, der vom Administrator der Website geschrieben wurde, oder ob sie aus den Standardwerten des Browsers für HTML-Elemente dieses Typs abgeleitet wurden.
  • Im Bereich „Styles“ werden hingegen nur die CSS-Regeln angezeigt, die explizit vom Administrator der Website definiert wurden. Jeder dieser Unterabschnitte bezieht sich auf eine andere Position im Code der Seite, an der eine relevante CSS-Regel angegeben wurde, also eine Regel, die sich auf das ausgewählte HTML-Element auswirkt. Wenn Sie eine Regel sehen, mit der auf der Seite ein Problem verursacht wird, klicken Sie oben rechts in diesem Unterabschnitt auf den Link und laden Sie so die Zeile oder das Dokument, in der bzw. in dem die entsprechende Regel implementiert wurde.

  Eine der nützlichsten Funktionen auf dem Tab "Elements" ist die Möglichkeit, den untersuchten Code zu bearbeiten. Wenn Sie vermuten, dass eine Zeile mit HTML-Code oder einer CSS-Regel Probleme auf der Seite verursacht, können Sie den Code ändern, um Ihre Annahme zu prüfen. Diese Änderungen wirken sich nur auf die Version der Seite im temporären Speicher Ihres Browsers aus. Wenn Sie die Seite aktualisieren oder diese von einem anderen Nutzer aufgerufen wird, werden Ihre Änderungen nicht mehr angezeigt.

• Tab "Resources": Auf diesem Tab können Sie eine Tabelle mit den verschiedenen Ressourcen einsehen, die zusammen mit der untersuchten Seite geladen wurden. Hierzu gehören beispielsweise Bilder, HTML-Dokumente und JavaScript-Dateien. Dieser Tab ist sehr nützlich bei der Fehlerbehebung in Bezug auf Campaign Manager 360, weil bei der Suchfunktion alle auf der Seite verfügbaren Ressourcen und nicht nur die Seite selbst einbezogen werden.

  Anwendungsfälle

  Tags finden, die der Seite nicht hinzugefügt wurden: Auf dem Tab "Elements" können Sie zwar den gerenderten HTML-Code der Seite sehen, Placement-Tags werden jedoch nicht immer durch Code ausgelöst, der auf der Seite selbst eingefügt wurde. Somit ist das einfachste und verlässlichste Verfahren, um ein implementiertes Placement-Tag zu finden, die Suchfunktion auf dem Tab "Resources".

• Tab "Network": Dies ist ein integrierter Proxy-Sniffer, mit dem Sie die HTTP-Zugriffe der Seite während und nach dem Ladevorgang überwachen können.

  Anwendungsfälle

  • Überprüfen, ob Ihr Placement oder Floodlight-Tag ausgelöst wird: Ein Proxy-Sniffer ist ein äußerst nützliches Tool zur Qualitätssicherung und Fehlerbehebung. Wird ein Tag nicht ausgelöst, können mit ihm Creative-Inhalte nicht wie vorgesehen erfasst oder zurückgegeben werden. Solange der richtige Aufruf mit korrekter Syntax und Formatierung erfolgt, ist für unsere Server nicht entscheidend, wie das Tag implementiert wurde. Möglicherweise müssen dennoch je nach Art der Seite weitere Aspekte berücksichtigt werden. Überprüfen Sie auf dem Tab "Network", ob ein Placement oder Floodlight-Tag ausgelöst wurde. Ist dies der Fall, stellen Sie sicher, dass die Syntax des Aufrufs mit der URL in der unveränderten Version des Tags übereinstimmt.
  • Latenztest: Auf dem Tab "Network" wird nicht nur angezeigt, ob ein Aufruf erfolgt ist, sondern auch, wie viel Zeit bis zur Antwort auf eine bestimmte Anfrage verstrichen ist. Dies kann bei Latenztests nützlich sein, insbesondere für dynamische Floodlight-Tags. Wenn mit einem Floodlight-Tag beim Ladevorgang der Seite eine starke Verzögerung verursacht wird, lässt sich die Problemursache oft ermitteln, indem Sie nach mit Übernahmepixeln erfolgten Aufrufen suchen. Diese Verzögerung ist also höchstwahrscheinlich nicht auf das Floodlight-Tag zurückzuführen. Vielmehr wird die Latenzzeit vermutlich von einem der verketteten Pixel im Tag verursacht.

• Tab „Scripts“: Auf diesem Tab können Sie eine Fehlerbehebung für JavaScript-Code vornehmen. Das ist ein unverzichtbares Tool für Webentwickler, hat jedoch keinen direkten Bezug zur Qualitätssicherung oder Fehlerbehebung für Campaign Manager 360.

• Tab „Timeline“: Hier sehen Sie den Verlauf der HTTP-Zugriffe und der Speicherauslastung. Ähnlich wie auf dem Tab „Network“ können auf diesem Tab Ursachen von Latenzen ermittelt werden. Ansonsten ist dieser Tab für Probleme in Bezug auf Campaign Manager 360 nicht relevant.

• Tab „Profiles“: Dieses Tool kann von Webentwicklern verwendet werden, um die CPU-Auslastung in Webanwendungen zu optimieren. Dieser Tab ist für Probleme in Bezug auf Campaign Manager 360 nicht relevant.

• Tab „Audits“: Auf diesem Tab wird die Seite während des Ladevorgangs analysiert. Hier erhalten Sie außerdem Vorschläge und Optimierungsmöglichkeiten für die Verringerung der Seitenladezeit und die Steigerung der wahrgenommenen und tatsächlichen Reaktionszeit. Dieser Tab ist für Probleme in Bezug auf Campaign Manager 360 nicht relevant.

• Tab „Console“: Hiermit werden Fehler im Code der Seite automatisch erkannt. Nachdem Sie auf dem Tab „Network“ ermittelt haben, dass das Tag nicht ausgelöst wird, können Sie auf dem Tab „Console“ den Grund dafür herausfinden.

  Anwendungsfälle

  Behebung von Syntaxfehlern: Wenn Ihr Tag nicht ausgelöst wird, überprüfen Sie auf dem Tab "Console", ob in Chrome Fehler erkannt wurden. Achten Sie auf folgende Hauptfehler:

  Eine nützliche Funktion des Tabs "Console" ist, dass Fehlermeldungen mit der Zeile und dem Dokument verbunden werden, die bzw. das den Fehler verursacht hat. Somit können Sie ein Problem bis zur Zeile mit dem Code zurückverfolgen, der geändert werden muss. Diese Funktion ist jedoch nicht immer zu 100 % zuverlässig. Sie können sich zwar auf die Fehlererkennung auf diesem Tab verlassen, das Zuordnungsverfahren ist jedoch etwas ungenauer. Sie werden möglicherweise auf eine Zeile verwiesen, die sich lediglich in der Nähe des Codefehlers befindet.

  • "NS_IMAGELIB": Dieser Fehler kann auftreten, wenn eine Iframe-SRC-URL als Image implementiert wird. Aufgrund dieser Kombination wird die korrekte Auslösung des Placement oder Floodlight-Tags verhindert. Bei Floodlight-Tags wird allerdings möglicherweise trotz des Fehlers eine Conversion zugeordnet. Falls dieser Fehler bei einem Floodlight-Tag auftritt, kann somit keines der in diesem Floodlight-Tag implementierten Drittanbieterpixel ausgelöst werden.
  • "Unsafe JavaScript attempt to access frame with URL": Diesen Fehler können Sie ignorieren, da es sich hierbei lediglich um eine Sicherheitswarnung im Zusammenhang mit der Einbettung von iFrames aus verschiedenen Domains auf einer Seite handelt. Die meisten Nutzer sehen diese Warnung nicht, es sei denn, sie haben sehr strenge Sicherheitseinstellungen definiert. Sie hat keine Auswirkungen auf die Schaltung des Floodlight-Tags oder der Übernahmepixel.
  • "Resource interpreted as '_blank_' but transferred with MIME type " .": Dies ist ein Hinweis auf ein Problem mit dem Dateiformat. MIME ist eine Kennung für Dateiformate im Internet. Dieser Fehler kann dann auftreten, wenn eine Ressource mit der falschen Dateiendung geladen wird, zum Beispiel GIF anstelle von JPEG.
  • "Uncaught TypeError": Dies ist ein Hinweis auf einen Typfehler eines HTML-Elements auf der Seite. Meist ist dies auf fehlerhaften Code in einer JavaScript-Funktion zurückzuführen.
  • "Uncaught SyntaxError": Dies ist ein Hinweis auf einen Syntaxfehler in einem Element auf der Seite. Meist bedeutet das, dass ein Sonderzeichen wie <"/-*^# falsch verwendet wurde.