jQuery preloader advertisement tutorial.

jQuery Pre-roll Ad Tutorial & Files

Welcome to this short tutorial on how to install this jQuery Pre-roll advertising script on your gaming- or media portal! It does require some knowledge of the jQuery framework. If you have no experience with it, please go through the jQuery Beginner Tutorial. Please also have a look at step 5, to really help me out!

Step 1: Before you begin

This pre-roll advertising script was developed using the jQuery JavaScript Library v1.4.3. I haven't tested it on future versions, but I guess it should work perfectly. The jQuery pre-roll script also uses jQuery SWFObject v1.1.1, this is already embedded in the package. Make sure you first load the jQuery JS script in the HEAD of your HTML code, before inserting the code of the pre-roll plugin!

Step 2: Downloading and installing the files

You can download the ZIP package with the jQuery Pre-roll ad plugin here. Unzip the files and upload them somewhere on your server. The package contains a development version and a minified one for production. Insert the JS script BELOW the jQuery JS in the
<head></head>
section of your HTML.The script has been tested and debugged to work on IE 6,7,8, Firefox, Google Chrome and Safari (Mac). Only in IE 6 the progress bar might look a bit weird.

Step 3: Changing your HTML code to work with the pre-roll ad

Next step is to insert the additional HTML code into the body of your page to make it all work:
                    <div id="gameframe"></div>
                    <div id="adframe">
                        <div>Advertisement</div>
                        <div id="plad"></div>
                        <div id="progress"></div>
                    </div>
                    <noscript>	
                        <div>
                             <!--Game embed code should be placed here here-->
                        </div>
                    </noscript>
                   
This is the code that will be filled by the pre-roll ad script. The "gameframe" will hold the game and hide it until it is loaded. The "adframe" will contain the actual advertisement shown during the game is loading. Inside this div you see the div with id "plad", which will contain the actual ad. The "progress" div will show the game loading progress. Important: The code above has been stripped of CSS, to make your life easier I have created a working example. Feel free to browse around the source code and take whatever you need!

Step 4: Configuring the pre-roll

In the bottom of the example page you see the following code:
                <script type="text/javascript" language="javascript">
                var af = 'adframe';
                var gf = 'gameframe';
                var gid = 'gameswf';
                var adinvoke = '<iframe class="medrectangle" src="/ads/300x250.html" scrolling="no"></iframe>';
                
                function skipad() {
                    $('#plad').html('<div></div>');
                    $('#'+af).hide();
                    $('#'+gf).css('width','640px');
                    $('#'+gf).css('height','640px');
                }
                $('#gameframe').preloadad(
                    {  // calls the init method
                      swf	 	: 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
                      width  	: 640,
                      height 	: 640,
                      gameid	: gid,
                      gameframe : gf,
                      adframe 	: af,
                      adcode	: adinvoke,
                      pltime 	: 10000,
                      gametype	: 'swf',
                      base		:'http://games.balloontowerdefense.net/b/',
                      skiptxt	: 'Click here to show the game',
                      showad	:'1'
                    });
                </script>
                    
Make sure the above script is placed just before the body close tag. I am just going to run throught the most important stuff for integrating the script. At first you see width and height properties in the .preloadad() and skipad() functions. Be sure these values match the exact witdth and height of a game. At the top of the script you see var adinvoke. As you can see I have put an iframe in here loading a HTML page, containing a 300x250 ad. Loading ads in an iframe prevents your gamepage to freeze, in case an ad won't load. Please replace src with the location of your ad HTML file.

Next we move on to the .preloadad() function. Inside of this function you see several options been invoked, like width, height, etc. The options you should configure are:
  • Width: actual width of the game
  • Height: actual height of the game
  • pltime: time in milliseconds the ad will show
  • base: Some games require additional files to be loaded, like e.g. an XML file. Just set this to the root from which your game loads.
  • skiptxt: the text that will be shown in the link to close the ad
  • showad: should be default set to 1 to show the ad, and 0 to directly load the game. This can be handy if you e.g. don't want to show ads in front of a Mochi Media game, that already has ads embedded.

Step 5: wrapping up

I really hope this tutorial was helpful to you! It really took some time for me to develop this script and write this tutorial. It's not obligated, but I would really appreciate you place a link (without a rel="nofollow") somewhere on your portal to one of my sites. To do this you can grab one of the following codes: