Load ads asynchronously
in Drupal
Agenda
Basic Info
Live Demonstration
Michael Schmid
@schnitzel
Boris Baldinger
@borisbaldinger
Team
Initial situation
Customer
wants
ads
Skyscrapers
Rectangles
Halfpage Ads
Banners
Flyouts
Wideboards
Our response
Yes! We can do that!
What would you have answered?
But then
there were...
Problems
Lack of Knowlegde
we didn't do that before
Have you ever seen an
AD TAG?
They look pretty Cute
<script>
document.write("<script src="http://ad3.adfarm1.adition.com/js?wp_id=1234"><\/sc" + "ript>");
</script>
But actually
Ads are evil
Why?
First response
if(typeof(ad_wid) == 'undefined'){ var ad_wid = Math.round(Math.random()*2000000000); var ad_count=0;}try{adjsver=Adition_Environment.getVersion();}catch(e){adjsver=0;}var iframe, ref;try{a=Adition_Referrer();iframe=a[0];ref=a[1];}catch(e){iframe=0;ref='-'}var os;try{os=Adition_OSId();}catch(e){os=''}var browser;try{browser=Adition_BrowserId();}catch(e){browser=''}var h5;try{h5=Adition_Environment.H5('5938844910190985557');}catch(e){h5=new Array('','')}var screen_res;try{screen_res=Adition_ResId();}catch(e){screen_res=''}var fvers;try{fvers=Adition_Flash();}catch(e){fvers=''}var prfstr;try{prfstr=Adition_Prfstr(2576752);}catch(e){prfstr=''}document.write('<script type=\'text/javascript\' src=\'http://ad3.adfarm1.adition.com/banner?sid=2576752&adjsver='+adjsver+''+prfstr+'&co=1&fvers='+fvers+'&iframe='+iframe+'&ref='+ref+'&os='+os+'&browser='+browser+'&h5='+h5[0]+'&h5s='+h5[1]+'&wi='+ad_wid+'&ac='+(++ad_count)+'&screen_res='+screen_res+'&prf[category]=&prf[environment]=desktop&prf[width]=1437&wpt=J&clickurl=\'></script>');
Second Response
document.write('\x3Cscript type="text/javascript">\n "undefined"==typeof oobClickURL&&(oobClickURL="");"undefined"==typeof AdOob&&(AdOob=function(a){if(0\x3Ca.length){var b,c=new Date,a=a+"×tamp="+c.getTime();(new Image).src=a;try{b=top.AdClicks=top.AdClicks||[],b[b.length]={url:a,time:c.getTime()}}catch(d){}}});\n\x3C/script>\n\x3Cdiv id="adBanner_5938845661810196825" style="padding:0;margin:0;display:inline-block;">\n\x3Cdiv id="obaButton_5938845661810196825" style="position:relative;padding:0;margin:0">\x3C/div>\n\x3Ca id="adlnk_5938845661810196825" href="http://ad3.adfarm1.adition.com/redi*lid=5938845661810196825/sid=
2576752/kid=535078/bid=2162802/c=16917/keyword=/sr=12/clickurl=" target="_blank">\x3Cimg src="http://imagesrv.adition.com/banners/986/files/00/02/72/76/000000160374.gif" alt="" border="0" width="728" height="90"/>\x3C/a>\n\x3C/div>\x3Cscript type="text/javascript">\n (function(a){"ms"==a&&(document.getElementById("adlnk_5938845661810196825").onclick=function(a){return function(){AdOob(a)}}(oobClickURL))})("");\n\x3C/script>\x3Cscript type="text/javascript">\n(function() {\n var domId = \'obaButton_5938845661810196825\',oba=\'\',btr = \'false\',position= \'top-right\'||\'top-right\';\n if (oba != \'\' || btr == \'true\') {\n var oba_script = document.createElement(\'script\');\n oba_script.setAttribute(\'type\',\'text/javascript\');\n oba_script.setAttribute(\'charset\',\'utf-8\');\n oba_script.setAttribute(\'src\', \'http://imagesrv.adition.com/js/adplayer/oba_priv.sjs?oba=\'+oba+\'&domId=\'+domId+\'&btr=\'+btr+\'&pos=\'+position);\n \n document.getElementsByTagName(\'head\')[0].appendChild(oba_script);\n\n }\n })();\n\x3C/script>');
The Result
They use
document.write()
1. only works on the initial page load
2. blocks the page from loading the rest of the content
Ajaxified Environment
Have you ever tried to load ads in an ajax response?
It doesn't work!
The solution
to all our problems
But first things first
we had options
Options
- Write Capture
- Ghostwriter
- Control JS
- Krux PostScribe
- OpenTag
What did we choose?
PostScribe
Why?
only framework under active development.
Fast and easy
well documented
How to Implement
Includes
<script src="/htmlParser/htmlParser.js"></script>
<script src="/postscribe.js"></script>
Execution
<div id="myAd"></div>
<script type="text/javascript">
$(function() {
postscribe('#myAd', '<script src="remote.js"><\script>');
});
</script>
What it does
- asynchronously loads JS
- parses JS
- replaces document.write with
elelement.innerHTML - restarts the fun
Execute
in your
ajax call
Benefits
and
Downsides
Benefits
1. Possibility to load ads after a full page load
2. Faster page loading overall
Downsides
1. Disabled JavaScript breaks the functionality
2. Asynchronously loaded ads my cause flickering
Live DEmo
remember
Ads are still
EVIL
Thank you
questions?
Boris Baldinger
@borisbaldinger
Michael Schmid
@schnitzel
Using postscribe in drupal
By Boris Baldinger
Using postscribe in drupal
This presentation is about using postscribe to load ads asynchronously in drupal.
- 4,264