Ad Ops Tutorial: Trace an Ad with Firebug

Ad Operations Departments build their reputations on the quality of their QA.  More so than any other department at an interactive media organization, Ad Operations is held accountable for any and all problems with the ads, regardless of the source.  So it is particularly important then that all members of an Ad Operations team are skilled in their ability to identify the root cause of any issue so they can quickly address it.  That means knowing how to replicate a problem and trace that problem to a specific tag in the ad server.

Luckily, there are number of tools available, some free, some paid, that are immensely helpful. One of my favorites, however, is Firebug, a Firefox Add-on that is quite useful toward a number of ends from a web development perspective, but also works well as a debugging application that you can repurpose for tracing ads.

What Does Firebug Do?

Firebug records every call to and from your browser, and makes all that code simple to view in-line regardless of when pieces of content actually execute with respect to the browser, but how it actually renders on the page.  I find it particularly easy to use and teach others to use precisely because it displays information based on how the end user sees it rather than the order in which it actually happens from the browser’s perspective, which is how most other tools operate.

Hover and Inspect

Firebug has a few advantages over other tools.  First, Firebug has a brilliant ‘inspect element’ functionality built-in, which allows you to simply hover over any specific area of web page and see the exact html code that was used to generate it.  For example, hover over a problematic ad and you’ll see the publisher side ad call, the redirect to the marketer’s ad server, and the final creative on the CDN, in addition to any other parties involved.

This might seem like a messy view, but since the code is displayed in the path it loaded, it makes it easy to look at the chain of events from publisher to the final ad, and pick out and call each piece independently if you so desire.  Finally, from a data leakage perspective, looking at the ad calls in a chain format allows you to identify any 3rd parties that might be involved in the ad call, but perhaps invisible from the user perspective.

How to Trace an Ad

So how do you actually trace an ad call?  Let’s look at a site and walk through the process.  I’ll use my own personal blog, AdOpsInsider.com as the publisher for this example. If you have trouble reading the text in any image, you can simply click on any one to open a larger image.

After you download and install the program, you should see an icon in Firefox’s toolbar (circled in red below).

How to Trace An Ad With Firebug

Click the button and a window will pop up at the bottom of your screen.  At first, you’ll see just a few collapsed sections of HTML code, but you’ll see that you can click and expand any section you like.

How to Trace An Ad With Firebug

In fact, if you expand a few sections, you’ll start to see that when you hover over a piece in the code, that exact section of the page is automatically highlighted to show you what it produces on the page.

How to Trace An Ad With Firebug

That’s pretty useful if you’re a web developer and need to see what a piece of code you just published actually does on the page, but it can make it a bit difficult from a debugging perspective.  Fortunately, Firebug also allows you to reverse the process, whereby you can hover over a part of the page and it was automatically take you to the relevent section in the code.  Just click on the blue cursor icon in the upper left corner of the Firebug window (circled in red below) and hover over one of the ads on the page.

How to Trace An Ad With Firebug

This method always tends to yield an approximate location somewhere in the chain of the ad call.  To really dig in, you’ll have to switch to the code itself at this point.  Conveniently, however, the page element will remain highlighted so long as you hover over a relevant piece of the code.  In this case we can scroll up quite a bit until we find the div element I used to place a text widget on my WordPress platform where I manually added the Google AdSense code, which is how I put ads on my site at the time I took the screenshots.  We can expand the JavaScript inside that div to look at the exact ad code on the page, which allows me to identify the name of the tag, and more importantly, the ID of the tag.  This will vary for your site, but with a little research, you should be able to locate a unique identifier for the tag from your ad server in the call itself.

How to Trace An Ad With Firebug

To actually find the source on the marketer’s side however, we have to dig a bit deeper down the page code.  Now I don’t profess to be an expert on how Google uses Doubleclick to serve AdSense, but after looking around a few sites between various browsers, it appears as though the Object ID correlates to the ad’s unique ID in their ad server, which is how they might trace the call on their end.  Additionally, you can look at the next box and see the actual location of the raw swf file on the CDN.  Keep in mind that in most all scenarios, a publisher side Ops team only needs to locate the unique ID in their own ad server, which in turn allows them to locate the advertiser, order, flight or campaign, and the actual 3rd party tag.

How to Trace An Ad With Firebug

Firefox or Bust

Unfortunately, as great as Firebug is, for now, it only functions in Firefox.  There’s no support in Internet Explorer, Safari, Chrome, Opera, or other major browsers, which can be an issue, since many ad issues today are browser specific, and not only that, but isolated to Internet Explorer.  Still, as a first line of defense, Firebug is a no-cost option you can start using today.  If you’re looking for browser-agnostic tools, you can look to Chrome’s built in toolset, or consider trying Fiddler or Charles, which function a bit differently, but have the same ability to pull HTML code apart and organize it call by call.

3 comments

  1. This Ad Ops article is too good -Trace an Ad with Firebug. I use Firebug but never thought of putting it online and explaining step by step. Good Job Ben. Thank you very much. Also other articles are also nice. I will also try to post some Ad Ops related stuff.

  2. Further geekness – a lot of the latest versions of different browsers, like in Chrome, if you right click on a chunk of the page and select “inspect element” which drills into the source HTML and expose basically what you used to need FireBug to do.

  3. That’s true, and a great tip – the newer browsers, including IE come are coming with developer tools pre-packaged, pretty convenient for Ops folks!

Leave a Reply

Your email address will not be published. Required fields are marked *