Load Advertisement (script) after page using jquery

Question

I'm trying to optimize the page render and download and I'm stuck in this situation... I'd like to load an advertise at the end of page load, I made a simple test PAGE

Code:

<!DOCTYPE html>
<html lang="en">
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
          var AdBrite_Title_Color = '443E3E';
          var AdBrite_Text_Color = '443E3E';
          var AdBrite_Background_Color = 'D1CFCF';
          var AdBrite_Border_Color = '443E3E';
          var AdBrite_URL_Color = '443E3E';
          try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
          $(document).ready(function(){                    
          });    
    </script>     
  </head>  
  <body style="background: #90EE90;">
  <div id="page" style="">              
      <div id="loginbox" style="position: fixed; top: 150px; left: 250px;">          
          <span style="white-space:nowrap;"> <!-- AD MUST BE HERE-->
          <a target="_top" 
             href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1866421&afsid=1">
           <img src="http://files.adbrite.com/mb/images/adbrite-your-ad-here-banner-w.gif" 
              style="background-color:#443E3E;border:none;padding:0;margin:0;" 
              alt="Your Ad Here" width="11" height="60" border="0" />
          </a></span>        
      </div>                
    </div>     
  </body>
</html>

Where there is the HTML Comment originally there were:

<script type="text/javascript">
document.write(String.fromCharCode(60,83,67,82,73,80,84));
document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1866421&zs=3436385f3630&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');
document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));
</script>

I need to load this element after page using jquery, I tried many solution, binding document.write action, adding a <script></script> element but nothing works...

I really need an help ;)

Mike Robinson · Answer 1 · 2011-12-19T19:09:34.613

2

I actually did this on the newsweek.com site using a script called writeCapture.js. It intercepts the document.write method and switches all the ad code to html injection (really fancy stuff!).

Anyway, to see a working example hit up (newsweek.com) thedailybeast.com and enter newsweek.ads.refresh() in the console. As for documentation, the writeCapture site will explain everything.

edited Dec 19 '11 at 19:09

answered Feb 10 '11 at 00:43

Mike Robinson

24,971
8
61
83

Marcx · Accepted Answer · 2011-02-13T22:56:03.370

2

At the end I solved my problem, loading an iframe after page load using jQuery...

Create a specific page for ADV, then loading the iframe

$(document).ready(function(){     
  $('#advtop').html('<iframe src="http://www.blablabla.ext/ad.php?pos=top"></iframe>');
});

The AD script won't slow the page load, and when the document is ready the iframe is placed in the correct position, without causing ADV replacing everything, also ADV get the correct URL referrer

Hope this could help someone...

edited Feb 13 '11 at 22:56

answered Feb 10 '11 at 14:24

Marcx

6,806
5
46
69

i had the same issue and that is exactly how i solved it too. – mkoryak Feb 10 '11 at 14:27
this is against TOS for some ad platforms since the ad no longer has context – Jonathan Ong Jul 20 '12 at 02:30

score 0 · Answer 3 · answered Feb 10 '11 at 00:38

0

I do this on my site using the following code:

function adScript(){
    var s1 = document.createElement('script');
    s1.src='http://put_your_url_here';
    s1.type = 'text/javascript';
    s1.onload = function(){
         // initialize the page to use the script
    }
    document.getElementsByTagName('head')[0].appendChild(s1);
}
adScript();

Essentially, the 'adScript' function is called in the '$(document).ready' jQuery event. This dynamically creates a script tag. The browser loads the remote script. Once loaded, your 'onload' function is executed.

Hope that helps.

Bob

answered Feb 10 '11 at 00:38

rcravens

8,320
2
33
26

Hi, I tried your way, but AD replace everything... I need an help, you can see the edited page http://www.marcocarettoni.it/testad.php :) – Marcx Feb 10 '11 at 01:49
that add does replace everything because it uses document.write which only works correctly as the page is *rendered* – mkoryak Feb 10 '11 at 14:28
@mkoryak is correct. You need to get rid of all the document.write stuff. You should be able to do s1.src='your_url'. – rcravens Feb 10 '11 at 14:40

Load Advertisement (script) after page using jquery

3 Answers3