Introduction

The Pre-Game Ad Wrapper is an easy way to show video ads before games, downloads, or other content. The latest version of the Ad Wrapper automatically pulls in the ad tags that have been associated with your account, so all you have to do is put the code in your page, place your game or other content within the part of the code we’ve marked for you, and you are done. The Pre-Game Ad Wrapper works by hiding your content while a snippet of Javascript plays an ad within the Bolt Player 3.0. Once the ad is finished, the Bolt Player hides itself, and reveals your content. Here’s an example of what the Wrapper looks like in action.

How to Use It:

First, if you have not already, go to app.intergi.com and login. Then select “Pre-Game Wrapper” from the “Advertising” menu.

Here you should find a snippet of code that looks like this:

<div style="width:640px;height:360px;">

	<div id="my-game" style="display:none;position:absolute;">
		Your content goes here
	</div>

	<div>
		<script
			data-post-ad-container="my-game"	
			data-config="/path/to/your/unique/config.json"
			data-width="100%"
			data-height="100%"
			type="text/javascript"
			charset="utf-8"
			src="http://cdn.playwire.com/bolt/js/zeus/embed.js">
		</script>
	</div>

</div>

Be sure to use the custom code you were provided at app.intergi.com, instead of this code! The above code is just an example; your code is customized for your site. And if you don’t see any code, it’s because no pre-game ad tags have yet been set up for you. Instead, you should see instructions on the page for contacting us to request pre-game tags. To set up the wrapper on your site, copy your code and past it into the page where your content is displayed. Insert your content – your game, download, etc. – where it says “Your content goes here” You are free to change the ID of the DIV containing your content. If you change it, please also change the value of the data-post-ad-container. For example, if you want your DIV to have the ID “game_content”, then you should set data-post-ad-container=”game_content” as well.

Customizing the Player Size: You can change the size of the Bolt Player to fit your site. To do so, you just need to change the preset dimensions, which are specified in the DIV that begins the code snippet. The default size is 640×360. We recommend choosing dimensions with a 16:9 aspect ratio, but it’s up to you.

Advanced Integration: Lazy Loading

Add this to your <script> tag:

data-autoload="false"
data-id="myPlayer"

The data-id specifies the ID of a DIV that will be created for the Player when it appears to play the ad. You can change the ID; just make sure it is unique (i.e., no other element on the page should have the same ID).

Add this code below your <script> tag:

<script>
function render() { 
	if (typeof window.Zeus.renderPlayer != 'undefined') { 
		window.Zeus.renderPlayer("myPlayer",function() { 
		window.Zeus.playMedia("myPlayer"); }); 
	} else { 
		setTimeout(render(), 100); 
	} 
}
</script>

Call render() to display the Wrapper

For example, you could add a button that, when clicked, causes the ad to play, then shows the game, like this:

<button onclick="render()">Click To Play</button>

Advanced Integration: Callbacks, Event Listeners, Etc.

Because the Pre-Game Ad Wrapper is built around Bolt Player 3.0, you can utilize all the API functions offered by Bolt. To learn more about these, please explore the Bolt Player 3.0 API documentation.

What if visitors to my site have AdBlock?

The pre-game wrapper has the ability to detect if Ad-Block is enabled in a users’ browser. Currently if AdBlock is enabled the Bolt Player will skip the ad call all together and immediately attempt to make the “post-ad-container” that was specified in the embed visible. The Bolt Player does this by adding css declaration visibility: visible; and display: block; to the container.

Note: When specifying a value for post-ad-container do not use the word “ad” – Ad-Block natively hides / blocks containers that have an id with “ad” in the value.