JavaScript Code to Capture Networks Served Ad

Question

Hi,

I have a website where we use the Google Ad Manager to serve ads on the site. I would like to create a "Report this Ad" link that sends someone email about the problem, but it also needs to tell them the exact ad that was displayed at that moment.

There is just a small snippet of code that Google replaces with the ad code, example below.

<script type="text/javascript" language="javascript">
    GA_googleFillSlot("replaced_description_300x514_3");
</script>

On the Google site we have an ad network setup which does the same thing, replacing it's code with an actual ad. A generic example of what that code might look like is below.

<!-- begin ad tag -->
<script language="JavaScript" type="text/javascript">
ord=Math.random()*10000000000000000;
document.write('<scr' + 'ipt language="JavaScript" src="http://ad.doubleclick.net/adj/removed-tag/removed-location-data;dma=removed-num;org=removed-org-type;state=removed-state;own=removed-owner;sz=728x90;ord=' + ord + '?" type="text/javascript"></scr' + 'ipt>');
</script><noscript><a href="http://ad.doubleclick.net/jump/removed-tag/removed-location-data;dma=removed-num;org=removed-org-type;state=removed-state;own=removed-owner;sz=728x90;ord=123456789?" target="_blank"><img src="http://ad.doubleclick.net/ad/removed-tag/removed-location-data;dma=removed-number;org=removed-org-type;state=removed-state;own=removed-owner;sz=728x90;ord=123456789?" width="728" height="90" border="0" alt=""></a></noscript>
<!-- End ad tag -->

We have several different networks that serve ads in a similar but different fashion.

Is there a bit of JavaScript magic that I could use to figure out the RESULT of those sets of JavaScript code? In other words, the image or flash file that was ultimately displayed? Can I read a list of all images in the DOM at some point using JavaScript?

I'm not sure where to start to figure out what ad is displaying. Of course, viewing source just shows the original Google code.

Any suggestions for where to start to figure out what ad is displayed?

Answer 1

It seems that the answer is quite simple. Just throw a <DIV> around the contents and pull it's innerHTML attribute with JavaScript. That will tell you the full contents of that ad AFTER it's been modified.

Answer 2

Joel, Can you give an example of how this is done? I'm trying to do the exact same thing.

Answer 3

Here's a function that just grabs the innerHTML of the ad. Then, I wrap the ad in a form and add a hidden element (abcd_input) so that when they click on the link it updates the hidden value and submits the data to me. Not a perfect solution, as my sales reps need an actual "screen shot" of the ad itself, not the code of the ad. But, it gives a technical person all the info they probably need.

<script type="text/javascript">
    function reportAd() {
     var theAd = document.getElementById('abcd_div');
     var theForm = document.getElementById('abcd_form');
     var theInput = document.getElementById('abcd_input');
     theInput.value = "";
     theInput.value = theAd.innerHTML;
     theForm.submit();
     return false;
    }
</script>