JavaScript Code to Capture Networks Served Ad - javascript

We use Google Ad Manager to serve ads. 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 a 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><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=""></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.

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>

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.

Related

Adding a a tracking pixel to my ecommerce cart

This site is probably overkill for the level of technical input I need for my query but the only other option is to ask Weebly support who are useless.
Essentially I have a tracking pixel from google to see when people have through adverts and bought something on our site.
However, the way you have to edit the site through Weebly's editor means that when you put the tracking pixel in, it is encoded with
<script type="html/template" id="tracking-pixel-receipt_page">
But the tracking pixel is itself a script:
<script type="html/template" id="tracking-pixel-receipt_page">
<!-- Google Code for Made a Sale Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 11111111;
var google_conversion_language = "en";
var google_conversion_format = "1";
var google_conversion_color = "ffffff";
var google_conversion_label = "ryOQCOuHhF0Q9tbjyAM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src=" //www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/957934454/?label=ryOQCOuHhF0Q9tbjyAM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
</script>
So as you can see it comes encoded as HTML when I look at my site.
Because you can't get in there and edit on Weebly to type="text/javascript", I just wanted to ask you guys who I can get the tracking pixel to work with the script that Weebly forces it into.
Maybe this is very simple, but I have no experience with these things beyond basic HTML so forgive my ignorance.
Thanks for your assistance :)
There are a couple of things you could try.
See if the Weebly editor has a button for adding raw input or disabling the automatic encoding.
See if Weebly gives you direct access to the site header and footer file.
Contact Weebly and ask them to put the raw code in your site's footer.

Dynamically change javascript code from HTML page

I have a site that show ads.
These ads are JavaScript snippets given by the ads provider.
I'd like to know whether it's possible to automatically replace the JavaScript snippet of these ads in my page by another JavaScript snippet to show ads from other ad provider after some time user is browsing the page (say 1 minute).
I looked for a solution but I failed to find one.
So a practical example:
How to change the code below
<div id="myAd">
<div id="headbanner"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2874724721134868";
/* girlsgamesalon-468x60 */
google_ad_slot = "4183777947";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
by
<div id="myAd">
<script type="text/javascript">document.write("<scr" + "ipt type='text/javascript' src='http://advertising.youraddprovider.com/ad/getoffers/?instanceID=xx18fdbb471&" + Math.random() + "'></scri" + "pt>");</script>
</div>
after 1 minute that user is browsing the page.
Is impossible to change the javascript code. You have to haldle that with server side code, like php, c#.net, etc, etc.
Example in php:
if(someconditionismet)
{
echo "<script src='thejsfileforthiscase.js'></script>";
}
else
{
echo "<script src='theotherjsfile.js'></script>";
}
Update asked for the user:
You could use
document.write("<script src='javascriptfile.sj'></script>")
But it will delete the whole content of you page which mean that if you a html tag, document.write will delete and will write just the tags. There is a work around but as i told you, DO NOT USE IT.
And with server side, you have to learn php, or c#.net, asp.net, etc, etc. I already answered you. If you want i can give you some good toturials to start.

Syntax error while trying to add CDATA within script tags dynamically

So there is an ad code which I try to add to the DOM dynamically, something that looks like this:
<script type="text/javascript"><!--<![CDATA[
JAVASCRIPT CODE
//]]>--></script>
If I paste this code directly in the source code, it works, but if I try to insert it to the DOM with jQuery it throws some untraceable errors - at least I cant trace it. Actually this:
The interesting part is that Firebug connects this error to random scripts in the page which contain jQuery. The ad code is inserted into the DOM this way /element is a jQuery object/:
element.html(data.content);
What I have tried yet:
I have tried to remove the <!-- --> html comment tags.
I have tried to wrap the wole code to a script tag dynamically created by jQuery.
I even tried to remove the CDATA tags, but that broke everything, I think it is important for the main ad handler script provided by the ad manager company.
Any help would be appreciated, thanks in advance!
(Please dont care about the method, it must be done with ajax.)
EDIT: The problem still persists, but I think there must be a problem with the ad code, so I accepted the first useful answer for this topic.
Try like this:
<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
<!-- (For styles, it is different) -->
<style type="text/css">
/*<![CDATA[*/
...
/*]]>*/
</style>
And if you really need compatibility with very old browsers that do not recognize the script or style tags resulting in their contents displayed on the page, you can use this:
<script type="text/javascript"><!--//--><![CDATA[//><!--
...
//--><!]]></script>
<!-- (For styles, it is different) -->
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
...
/*]]>*/--></style>
With <![CDATA[ you can embed JS in XML (and XHTML) documents without the need to replace special XML characters like <, >, &, etc by XML entities <, >, & etc
Use this one
<script type="text/javascript">
//<![CDATA[
//YOUR CODE
//]]>
</script>
Let me know if problem still persist.

How can I load ad code last on the page or asynchronously if the ad uses document.write?

I am helping out with a website and we are having issues with page load time because of the ads that sometimes take a few seconds to load. Since the ads are called using < script> tags the browser stops parsing the page until the ads are fully loaded. What we are looking for is a way to load the ads from the client side so that the page can be displayed entirely and then the ads will start loading, thus greatly improving user experience.
I have tried a lot of things to get this to work but no solution actually shows the ads. You can see the site at http://magic.tcgplayer.com/. There is one ad as a banner, at the top of the page, and another one in the right "column". Both ads are loaded using < script> tags. I have tried to load using lazy loading javascripts but they didn't work. I have tried using the writeCapture.js (an excellent script by the way) but the ads don't load. I looked at the bezen.org and labjs.com solutions but I'm not sure how to apply the ideas from those resources. Also note that the ad script is on a remote server and cannot be copied to our server.
Any help is greatly appreciated.
I try to find some way to async load google ad too, and I find it.
A big site douban use iframe to hold the js and async load iframe.
This is the js code:
function google_ad() {
function createIframe() {
var ad_frame = document.createElement("iframe");
ad_frame.src = "/js/google_ad.htm";
ad_frame.id = "google_ad_frame";
ad_frame.scrolling = "no";
ad_frame.width = "260px";
ad_frame.height = "260px";
document.getElementById("google_ad").appendChild(ad_frame);
};
if (window.addEventListener) {
window.addEventListener("load", createIframe, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createIframe);
} else {
window.onload = createIframe;
}
}
And this is the code for iframe, which is from google adsense:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-1281485759256908");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-1281485759256908", "ad_right");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
<script type="text/javascript">
GA_googleFillSlot("ad_right");
</script>
So, I just use this:
<div id="google_ad" style="margin-top:20px;text-align:center;border:solid 17px #FFFFFF;">
<script type="text/javascript">google_ad();</script>
</div>
And, it loads the frame.
Put the ad in an iframe. The iframe should load the JavaScript with document.write().
Since things evolved it is now possible to use the defer or async attribute.
I load my scripts with async but defer is safer for older browsers.
See W3 Schools which contains details for both async and defer.

Calling Remote Javascript

Basically, Google Adwords give you a code so you can track how well your campaigns are working. You put in on your order thank you page to track and order, so you can see which keywords bring in the most orders. It gives me a code like this:
<!-- Google Code for Purchase/Sale Conversion Page -->
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = xxxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "purchase";
//-->
</script>
<script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxxxx/?label=purchase&guid=ON&script=0"/>
</noscript>
When the user clicks one of my ads it sets a cookie with the keyword he clicked from etc, and then when he reaches this bit of a JS on the thank you page it realises he has a cookie and does the necessary tracking.
The problem is, for the thing I'm promoting right now the order thank you page is not on my server. I can place javascript on the page to track orders but only in the following format:
<SCRIPT language="javascript" src="xxxx"></SCRIPT>
With the 'xxxx' bit being the only thing I can change.
If I put the Google JS code in a file on my server, and then call the file on my server from his thank you page, will it achieve the same effect? If not is there any way to do this using what I have available?
If you are not tracking prices or anything but just conversions as defined by a page hit, then you could also go the iframe route. Have the client site open an iframe pointing to your server which then includes the googel code. Personally though, I think the pixel option is better, so long as it is not disallowed or ignored by Google (you will have to experiement to find out if this is the case)

Categories

Resources