Use Chrome Developer Tools to check tags

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

Access Developer Tools

1. Right-click a page and select "Inspect Element". This displays the HTML code for the element you clicked.

2. Select View > Developer > Developer tools.

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 Style" 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/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 are 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 will not appear.

• Resources 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. This tab is useful for troubleshooting Campaign Manager 360 related issues because the "search" feature will look across every resource available to the page – not just within the page itself.

  USE CASES

  Finding tags which are not written to the page: While the Elements tab will allow you to view the page's rendered HTML, placement tags are not always fired by writing code to the page itself. That said, the easiest and most reliable way to locate an implemented placement tag is to use the "search" feature of the Resources tab.

• Network 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/Floodlight fires: A Proxy-sniffer is the most useful tool that you can use for the QA and troubleshooting processes. Fundamentally, if a tag does not fire, it cannot 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.

• Scripts tab: can be used for debugging JavaScript code. While this is an invaluable tool for Web Developers, it does not relate directly to the QA or troubleshooting of Campaign Manager 360.

• Timeline 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 is not relevant to Campaign Manager 360 related issues.

• Profiles tab: is a tool which Web Developers may use to optimize CPU usage within web applications. This tab is not relevant to Campaign Manager 360 related issues.

• Audits 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 is not relevant to Campaign Manager 360 related issues.

• Console tab: will automatically detect errors within the page's code. Once the Network tab has helped you to determine that the tag is not firing, the Console tab may shed light on why that is 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:

  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.

  • "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 will not 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 is 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 (e.x., 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 is 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 is an extra character (<"/-*^#) has been used inappropriately.