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+"&timestamp="+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

  1. Write Capture
  2. Ghostwriter
  3. Control JS
  4. Krux PostScribe
  5. 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


  1. asynchronously loads JS
  2. parses JS
  3. replaces document.write with 
    elelement.innerHTML
  4. 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