Use Chrome Developer Tools to check tags

Chrome Developer Tools allow you to quickly analyze the content or resources of a webpage. This helps you check your Campaign Manager 360 tags.

Access Developer Tools

To open Chrome Developer Tools, you can do either of the following:

• Right-click a page and select Inspect. This displays the HTML code for the element you clicked.
• At the top of the browser window, select View > Developer > Developer tools.

Learn more about Chrome DevTools.

Available tabs and their uses

• Elements tab: Displays the page's rendered HTML, which is distinct from the page's source code. If any HTML elements are created or altered via JavaScript as the page loads, those changes will be reflected within the rendered HTML, whereas the page's source will show the code without any alterations.

  Use cases
  • Check for tag modifications: This tab allows you to locate Floodlight and/or placement tags that have been implemented on the page, and to identify whether or not any modifications may have been made. When locating the tag, a useful search term is "double," since the URLs within Campaign Manager 360 placement tags include URLs which use the "doubleclick" domain. Once located, compare the implemented version of the tag against the tag as it exports directly out of the Trafficking user interface.
  • Troubleshoot issues with CSS: Within the Elements tab, the right hand side column displays the various CSS attributes which control how and where the selected HTML element is displayed.
  • The "Computed" bar shows all of the CSS rules which are in effect for the selected element, whether they were set via explicit CSS code written by the page's website administrator or derived from the browser's default values for HTML elements of that type.
  • In contrast, the "Styles" section shows only those CSS rules which were explicitly specified by the website administrator. Each subsection here represents a different location in the page's code where a relevant CSS rule (one that affects the selected HTML element) was written. If you note a rule which is causing a problem within the page, you can click the link in the top right hand corner of that subsection in order to load the line or document where the rule in question was implemented.

  One of the most useful features of the Elements tab is that it allows you to edit the code you're inspecting. If you believe you've found a line of HTML code or a CSS rule which is causing issues on the page, you're free to simply alter the code in order to test out your hypothesis. This will affect only the version of the page stored in your browser’s temporary memory. If you reload the page, or if someone else visits it, the changes you’ve made won't appear.

• Sources tab: This tab allows you to inspect a table of the different resources which were loaded alongside the inspected page. This includes images, HTML documents, JavaScript files, and more.

  Use cases

  Finding tags which aren't written to the page: While the Elements tab will allow you to view the page's rendered HTML, placement tags aren't always fired by writing code to the page itself. In the Sources tab, you can also edit and debug JavaScript files.

  Tip: You can also use the Search panel to easily locate an implemented tag across all loaded resources. In the top-right corner of DevTools, click the three-dot icon, then select More tools > Search.

• Network tab: This tab is a built-in proxy sniffer which allows you to monitor the page's HTTP traffic, both as it loads and afterwards.

  Use cases
  • Check whether your placement tag or Floodlight fires: A proxy sniffer is the most useful tool that you can use for the QA and troubleshooting processes. Fundamentally, if a tag doesn't fire, it can't track or return creative content as intended. Similarly, so long as the proper call is made (with correct syntax/formatting), our servers are indifferent as to how the tag is implemented (though considerations may need to be made depending on the nature of the page). Use the Network tab to detect whether or not a placement tag/Floodlight has fired, and if so, make sure that the syntax of the call matches the URL found within the unmodified version of the tag.
  • Latency testing: In addition to whether or not a call occurs, the Network tab will also display how long it took for a given request to receive a response. This can be useful for latency testing, especially in the case of dynamic Floodlight Tags. If a Floodlight is causing excessive lag as the page loads, watching for calls made by piggybacked pixels can often help you to identify the cause of the problem. That is, it is unlikely that the lag will be due to the Floodlight tag itself. Rather, it's more likely that one of the piggybacked pixels within the tag is introducing latency.

• Performance tab: This tab shows HTTP traffic and memory usage over time. Much like the Network tab, this can be useful for identifying sources of latency. Otherwise, this tab isn't relevant to Campaign Manager 360 related issues.

• Memory tab: This is a tool which web developers may use to optimize CPU usage within web applications. This tab isn't relevant to Campaign Manager 360 related issues.

• Lighthouse tab: This tab can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness. This tab isn't relevant to Campaign Manager 360 related issues.

• Console tab: This tab automatically detects errors within the page's code. Once the Network tab has helped you to determine that the tag isn't firing, the Console tab may shed light on why that's the case.

  Use cases

  Troubleshoot syntax errors: If your tag isn't firing, check the console tab to see if Chrome has detected any errors. The key errors to watch out for are:

  • "NS_IMAGELIB": This error may occur when an Iframe "src" URL is implemented as an image. This mix up will prevent the placement tag or Floodlight from firing properly, although, in the case of Floodlight tags, a conversion may be attributed despite the error. That said, if this mistake has been made for a Floodlight, none of the third party pixels which have been implemented within that Floodlight can be fired.
  • "Unsafe JavaScript attempt to access frame with URL": This error can be ignored, and is simply a security warning that relates to embedding iframes from different domains on a page. Most users won't see this warning unless their security settings are very high, and it will have no effect on how the Floodlight (or piggybacked pixels) are served.
  • "Resource interpreted as '_blank_' but transferred with MIME type " .": This indicates that there's a file format issue. MIME is an identifier for file formats on the internet. This error can occur when a resource is loaded with the wrong file extension (for example, gif. vs .jpeg).
  • "Uncaught TypeError": This indicates that there was a type error with an HTML element on the page. Typically this suggests that there's faulty code within a JavaScript function.
  • "Uncaught SyntaxError": This indicates that there was a syntax error with an element on the page. Typically this means that there's an extra character (<"/-*^#) has been used inappropriately.

  A useful feature of the Console tab is that error messages will be linked to the line and document which caused the error. This is helpful for tracing an issue back to the line of code which must be altered. However, this feature may not always be 100% reliable. While the error detection which this tab offers can be relied upon, the attribution mechanism is relatively less accurate, and may link to a line which is only in the near vicinity of the coding error.