Tuesday, May 24, 2022

Chrome-Entwicklertools zum Überprüfen von Tags verwenden - Campaign Manager 360-Hilfe [gg-campaignmanager-de]

Verwenden Sie die Chrome Developer Tools, um Tags zu überprüfen

Mit den Entwicklertools von Chrome können Sie den Inhalt/die Ressourcen einer Webseite schnell analysieren. So können Sie Ihre Campaign Manager 360-Tags überprüfen.

Greifen Sie auf die Entwicklertools zu

  1. Klicken Sie mit der rechten Maustaste auf eine Seite und wählen Sie „Element prüfen". Dies zeigt den HTML-Code für das angeklickte Element an.

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

Verfügbare Registerkarten und ihre Verwendung

  • Registerkarte „Elemente" : Zeigt den gerenderten HTML-Code der Seite an, der sich vom Quellcode der Seite unterscheidet." Wenn beim Laden der Seite HTML-Elemente über JavaScript erstellt oder geändert werden, werden diese Änderungen im gerenderten HTML wiedergegeben, während der Quellcode der Seite angezeigt wird den Code ohne Änderungen.

    ANWENDUNGSFÄLLE
    • Auf Tag-Änderungen prüfen: Auf dieser Registerkarte können Sie Floodlight- und/oder Placement-Tags finden, die auf der Seite implementiert wurden, und feststellen, ob Änderungen vorgenommen wurden oder nicht. Beim Auffinden des Tags ist „double" ein nützlicher Suchbegriff, da die URLs in Campaign Manager 360-Placement-Tags URLs enthalten, die die Domain „doubleclick" verwenden. Vergleichen Sie nach dem Auffinden die implementierte Version des Tags mit dem Tag, das direkt aus der Trafficking-Benutzeroberfläche exportiert wird.
    • Fehlerbehebung bei CSS-Problemen : Auf der Registerkarte „Elemente" zeigt die rechte Spalte die verschiedenen CSS-Attribute an, die steuern, wie und wo das ausgewählte HTML-Element angezeigt wird.
    • Die Leiste „Berechneter Stil" zeigt alle CSS-Regeln an, die für das ausgewählte Element gelten – unabhängig davon, ob sie über expliziten CSS-Code festgelegt wurden, der vom Website-Administrator der Seite geschrieben wurde, oder ob sie von den Standardwerten des Browsers für HTML-Elemente dieses Typs abgeleitet wurden.
    • Im Gegensatz dazu zeigt der Abschnitt „Stile" nur die CSS-Regeln, die ausdrücklich vom Website-Administrator festgelegt wurden. Jeder Unterabschnitt stellt hier eine andere Stelle im Code der Seite dar, an der eine relevante CSS-Regel (eine, die sich auf das ausgewählte HTML-Element auswirkt) geschrieben wurde. Wenn Sie eine Regel bemerken, die ein Problem auf der Seite verursacht, können Sie auf den Link in der oberen rechten Ecke dieses Unterabschnitts klicken, um die Zeile/das Dokument zu laden, in der bzw. dem die betreffende Regel implementiert wurde.
    Eine der nützlichsten Funktionen der Registerkarte „Elemente" besteht darin, dass Sie damit den zu prüfenden Code bearbeiten können. Wenn Sie glauben, eine Zeile HTML-Code oder eine CSS-Regel gefunden zu haben, die Probleme auf der Seite verursacht, können Sie den Code einfach ändern, um Ihre Hypothese zu testen. Dies betrifft nur die im temporären Speicher Ihres Browsers gespeicherte Version der Seite. Wenn Sie die Seite neu laden (oder wenn jemand anderes sie besucht), werden die von Ihnen vorgenommenen Änderungen nicht angezeigt.
  • Registerkarte „Ressourcen ": Ermöglicht Ihnen, eine Tabelle der verschiedenen Ressourcen zu überprüfen, die neben der überprüften Seite geladen wurden. Dazu gehören Bilder, HTML-Dokumente, JavaScript-Dateien und mehr. Dieser Tab ist nützlich, um Probleme im Zusammenhang mit Campaign Manager 360 zu beheben, da die Suchfunktion alle für die Seite verfügbaren Ressourcen durchsucht – nicht nur innerhalb der Seite selbst.

    ANWENDUNGSFÄLLE

    Tags finden, die nicht auf die Seite geschrieben wurden: Während Sie auf der Registerkarte Elemente den gerenderten HTML-Code der Seite anzeigen können, werden Placement-Tags nicht immer durch das Schreiben von Code auf der Seite selbst ausgelöst. Die einfachste und zuverlässigste Methode zum Auffinden eines implementierten Placement-Tags ist jedoch die Verwendung der Suchfunktion auf der Registerkarte "Ressourcen".

  • Registerkarte „Netzwerk" : ist ein eingebauter Proxy-Sniffer, mit dem Sie den HTTP-Verkehr der Seite überwachen können – sowohl während des Ladens als auch danach.

    ANWENDUNGSFÄLLE
    • Überprüfen Sie, ob Ihr Placement-Tag/Floodlight ausgelöst wird: Ein Proxy-Sniffer ist das nützlichste Tool, das Sie für die QA- und Fehlerbehebungsprozesse verwenden können. Wenn ein Tag nicht ausgelöst wird, kann es im Grunde kreative Inhalte nicht wie beabsichtigt verfolgen oder zurückgeben. Ebenso ist es unseren Servern gleichgültig, wie das Tag implementiert wird, solange der richtige Aufruf (mit korrekter Syntax/Formatierung) erfolgt (obwohl je nach Art der Seite möglicherweise Überlegungen angestellt werden müssen). Verwenden Sie den Tab "Netzwerk", um festzustellen, ob ein Placement-Tag/Floodlight ausgelöst wurde, und stellen Sie in diesem Fall sicher, dass die Syntax des Aufrufs mit der URL übereinstimmt, die in der unveränderten Version des Tags gefunden wurde.
    • Latenztests: Zusätzlich dazu, ob ein Anruf erfolgt oder nicht, zeigt die Registerkarte „Netzwerk" auch an, wie lange es gedauert hat, bis eine bestimmte Anfrage eine Antwort erhalten hat. Dies kann für Latenztests nützlich sein – insbesondere bei dynamischen Floodlight-Tags. Wenn ein Floodlight eine übermäßige Verzögerung beim Laden der Seite verursacht, kann Ihnen das Beobachten von Aufrufen von Piggyback-Pixeln oft dabei helfen, die Ursache des Problems zu identifizieren. Das heißt, es ist unwahrscheinlich, dass die Verzögerung auf das Floodlight-Tag selbst zurückzuführen ist. Vielmehr ist es wahrscheinlicher, dass eines der Huckepack-Pixel innerhalb des Tags Latenz einführt.
  • Registerkarte „Skripts " : Kann zum Debuggen von JavaScript-Code verwendet werden. Obwohl dies ein unschätzbares Tool für Webentwickler ist, bezieht es sich nicht direkt auf die Qualitätssicherung oder Fehlerbehebung von Campaign Manager 360.

  • Registerkarte „Timeline" : Zeigt den HTTP-Verkehr und die Speichernutzung im Laufe der Zeit an. Ähnlich wie die Registerkarte Netzwerk kann dies nützlich sein, um Latenzquellen zu identifizieren. Andernfalls ist dieser Tab für Campaign Manager 360-bezogene Probleme nicht relevant.

  • Registerkarte "Profile" : ist ein Tool, das Webentwickler verwenden können, um die CPU-Auslastung in Webanwendungen zu optimieren. Dieser Tab ist für Campaign Manager 360-bezogene Probleme nicht relevant.

  • Registerkarte "Audits" : Kann eine Seite beim Laden analysieren und Vorschläge und Optimierungen zur Verringerung der Seitenladezeit und zur Steigerung der wahrgenommenen (und tatsächlichen) Reaktionsfähigkeit bereitstellen. Dieser Tab ist für Campaign Manager 360-bezogene Probleme nicht relevant.

  • Konsolenregisterkarte : erkennt automatisch Fehler im Code der Seite. Nachdem Ihnen die Registerkarte „Netzwerk" dabei geholfen hat, festzustellen, dass das Tag nicht ausgelöst wird, kann die Registerkarte „Konsole" Aufschluss darüber geben, warum dies der Fall ist.

    ANWENDUNGSFÄLLE

    Beheben Sie Syntaxfehler: Wenn Ihr Tag nicht ausgelöst wird, sehen Sie auf der Registerkarte „Konsole" nach, ob Chrome Fehler erkannt hat. Die wichtigsten Fehler, auf die Sie achten sollten, sind:

    Eine nützliche Funktion der Registerkarte Konsole besteht darin, dass Fehlermeldungen mit der Zeile und dem Dokument verknüpft werden, die den Fehler verursacht haben. Dies ist hilfreich, um ein Problem bis zu der Codezeile zurückzuverfolgen, die geändert werden muss, aber diese Funktion ist möglicherweise nicht immer 100 % zuverlässig. Während die Fehlererkennung, die diese Registerkarte bietet, zuverlässig ist, ist der Zuordnungsmechanismus relativ ungenauer – und kann auf eine Zeile verweisen, die sich nur in unmittelbarer Nähe des Codierungsfehlers befindet.
    • "NS_IMAGELIB": Dieser Fehler kann auftreten, wenn eine Iframe-URL "src" als Bild implementiert wird. Diese Verwechslung verhindert, dass das Placement-Tag oder Floodlight ordnungsgemäß ausgelöst wird, obwohl im Fall von Floodlight-Tags trotz des Fehlers eine Conversion zugeordnet werden kann. Wenn dieser Fehler jedoch für ein Floodlight gemacht wurde, kann keines der Drittanbieter-Pixel, die in diesem Floodlight implementiert wurden, ausgelöst werden.
    • "Unsicherer JavaScript-Versuch, auf Frame mit URL zuzugreifen": Dieser Fehler kann ignoriert werden und ist lediglich eine Sicherheitswarnung, die sich auf das Einbetten von iFrames aus verschiedenen Domänen auf einer Seite bezieht. Die meisten Benutzer sehen diese Warnung nur, wenn ihre Sicherheitseinstellungen sehr hoch sind, und sie hat keinen Einfluss darauf, wie Floodlight (oder Huckepack-Pixel) bereitgestellt werden.
    • „Ressource als ‚_blank_' interpretiert, aber mit dem MIME-Typ „ " übertragen: Dies weist auf ein Dateiformatproblem hin. MIME ist eine Kennung für Dateiformate im Internet. Dieser Fehler kann auftreten, wenn eine Ressource mit der falschen Datei geladen wird Erweiterung (z. B. gif. vs. .jpeg).
    • "Uncaught TypeError": Dies zeigt an, dass ein Typfehler mit einem HTML-Element auf der Seite aufgetreten ist. Typischerweise deutet dies auf einen fehlerhaften Code innerhalb einer JavaScript-Funktion hin.
    • „Uncaught SyntaxError": Dies zeigt an, dass bei einem Element auf der Seite ein Syntaxfehler aufgetreten ist. Normalerweise bedeutet dies, dass ein zusätzliches Zeichen (<"/-*^#) unangemessen verwendet wurde.

No comments:

Post a Comment