Documentation

Ad Placeholder for HTML5 Games

Thank you so much for purchasing our item from codecanyon.

Overview

Ad Placeholder is to help simulate ads on HTML5 Games, you can integrate and display static or takeover ads through different Ads Serving Platform. It is build and only compatible with HTML5 games from here.

Installation

Follow the steps below to setup your ads:

1. Download the ads integration file: Download ads.zip
2. Copy and place ads folder into game folder, below is the files:
   • ads/ads.css - Stylesheet file
   • ads/ads.js - Javascript file
3. Insert the ads.css in HTML5 Game /game/index.html after main.css.

                             
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="ads/ads.css">
                             
                           

4. Insert the ads.js in HTML5 Game /game/index.html before init.js.

                             
   <script src="js/main.js"></script>
   <script src="js/loader.js"></script>
   <script src="ads/ads.js"></script>
   <script src="js/init.js"></script>
                             
                           

5. Two type of ads placeholder can choose to insert
   • Static Ads Live Demo
   • Takeover Ads Live Demo

Static Ads

Follow the steps below to add static ads:

1. Insert Ad Placeholder HTML tag in HTML5 Game /game/index.html

                                   
   <!-- CANVAS START-->
   <div id="canvasHolder">
       <canvas id="gameCanvas" width="1280" height="768"></canvas>
   </div>
   <!-- CANVAS END-->
   
   <div id="adHolder">
       <div id="adLeft" >
   
           <!-- PLACE AD CODE HERE !-->
           
       </div>
   
       <div id="adRight" >
   
           <!-- PLACE AD CODE HERE !-->
   
       </div>
   
       <div id="adBottom" >
   
           <!-- PLACE AD CODE HERE !-->
   
       </div>
   
       <div id="adSideLeft" >
   
           <!-- PLACE AD CODE HERE !-->
   
       </div>
   
       <div id="adSideRight" >
   
           <!-- PLACE AD CODE HERE !-->
   
       </div>
   </div>
                                   
                                 

2. Place your ad code here

                             
   <!-- PLACE AD CODE HERE !-->
                             
                           

Takeover Ads

Follow the steps below to add takeover ads:

1. Insert Ad Placeholder HTML tag in HTML5 Game /game/index.html

                                  
   <!-- CANVAS START-->
   <div id="canvasHolder">
       <canvas id="gameCanvas" width="768" height="1024"></canvas>
   
       <div id="adTakeoverHolder">
           <div id="adTakeoverContent">
               <div id="adTakeoverClose">CLOSE</div>
               <!-- PLACE AD CODE HERE !-->
           </div>
       </div>
   
   </div>
   <!-- CANVAS END-->
                                  
                                

2. Place your ad code here

                            
   <!-- PLACE AD CODE HERE !-->
                            
                          

3. Or place your ad script to run in ads.js

                             
   function initAds(){
       //ad close button
       $('#adTakeoverClose').off().on('click', function(e) {
           toggleGameAds('stop');
       });	
       
       //place your ad events
   
   
   }
                             
                           

Functions

This section is for takeover ads only.

Now that your ads is ready, next you need to tell when to show and hide the ad placeholder in the game.

1. Function to show/hide ad placeholder
   • You can show ad by running function below.

                                         
     toggleGameAds('play');
                                         
                                       

   • Or you can show ad with callback param by running function below, callback function will call once the ad is close.

                                         
     toggleGameAds('play', 'function', 'parameter');
                                         
                                       

   • And hide the ad by running function below.

                                         
     toggleGameAds('stop');
                                         
                                       

2. When to show ad placeholder in game
   • Suggest to place takeover ad at main page, before game start, and after game finish. Look for goPage function in game.js and place execute the command to show ad in different pages.

                                         
     switch(page){
         case 'main':
             //show ad at the landing page
             toggleGameAds('play');
         break;
         
         case 'game':
             //show ad before game start, replace this with startGame() function;
             toggleGameAds('play', "startGame");
         break;
         
         case 'result':
             //show ad at the result page
             toggleGameAds('play');
         break;
     }
                                         
                                       

Note Some Ad platform come with auto play and close event, and you can remove adTakeoverClose HTML tag button, call function to close ad when ad is finish in complete event.