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 2: Downloading and installing the filesYou 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 adNext 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-rollIn the bottom of the example page you see the following code:
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.