Overview

The Pre-Content Unit is an easy way to show video ads before games, downloads, or any 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 <div id=”my-content”> – inside the area denoted by “Your content goes here”. The Pre-Content Ad Wrapper works by hiding your content while a snippet of Javascript plays an ad within the Bolt Video Player. Once the ad is finished, the Bolt Video Player hides itself, and reveals your content.
1

Sign-In to Playwire:

You should have a Playwire account already and have been approved for Pre-Content Ads by the Playwire team.
  • If you already have a Playwire account, sign-in to the Playwire Platform here
  • If you do not have a Playwire account, sign-up for the Playwire Platform here
2

Embed Code/Customization:

  • After logging into your Playwire Account, click “Advertising” from the left navigation
  • From the expanded menu, click “Pre-Content”
  • From the Embed Code section, click the copy button which will copy the embed code to your computer’s clipboard
  • Click the “Customize” tab to view the Pre-Content Customizer
  • Within the Customizer, you can change the Background color, Loader color and Loader style
  • You also have the ability to show a custom logo
3

Simple Embed Example:

  • Paste your embed code into the <body> of your web page
  • Use the embed from the Playwire backend in production, NOT the example in this section
  • The default size is set to 640×360, you can edit the size by editing the parent <div> dimensions
  • Ads will autoplay on page load, if you need to delay or control when it plays, use the Lazy Load implementation in the next step.
Important

Embed code will NOT work without a web server or local server environment such as MAMP or XAMPP

<!DOCTYPE> must be declared at the top of your HTML document or you may encounter errors in Internet Explorer


<!DOCTYPE html>
<html>
<head>
	<title>Pre-Content Example</title>
</head>
<body>
s
<!-- Embed MUST be placed in <body> to work properly -->

<!-- Change dimensions in div below -->
<div style="width:640px;height:360px;">

	<!-- Place your content within this div -->
	<div id="my-content" style="display:none;position:absolute;">
		Your content goes here
	</div>

	<script
		data-hidden-container="my-content"	
		data-config="//cdn.playwire.com/test-configs/pre_content.json"
		data-width="100%"
		data-height="100%"
		type="text/javascript"
		charset="utf-8"
		src="//cdn.playwire.com/bolt/js/zeus/embed.js">
	</script>
	
</div>

</body>
</html>

4

Lazy Loading:

  • Copy your embed as stated in Step 2
  • Add data-autoload=”false” (Line 19) to the embed script, this will prevent the player from rendering on the page
  • Add data-id=”myPlayer” (Line 20) to the embed script, you will use this to target the player in your JavaScript
  • In this example, we will make a button (Line 32) that calls the render() function
  • In the render() function (Line 37-47) we check to make sure the Bolt object is ready on the page
  • We then call renderPlayer( ) to render the player to the DOM and then the playMedia( ) callback function to initiate a play
  • The ad will play and the post-ad-container “my-content” will appear when the ad completes
  • Callbacks, Event Listeners, Etc… – Explore the Bolt Video Player API documentation for more info

<!DOCTYPE html>
<html>
<head>
	<title>Pre-Content Example</title>
</head>
<body>

<!-- Embed MUST be placed in <body> to work properly -->

<!-- Change dimensions in div below -->
<div style="width:640px;height:360px;">

  <!-- Place your content within this div -->
  <div id="my-content" style="display:none;position:absolute;">
	Your content goes here
  </div>

  <script
	data-autoload="false"
	data-id="myPlayer"
	data-hidden-container="my-content"	
	data-config="//cdn.playwire.com/test-configs/pre_content.json"
	data-width="100%"
	data-height="100%"
	type="text/javascript"
	charset="utf-8"
	src="//cdn.playwire.com/bolt/js/zeus/embed.js">
  </script>
	
</div>

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

<!-- Lazy Load JavaScript -->

<script>
	function render() {
		var button = document.getElementById('render'); 
		button.style.display = 'none';

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

</body>
</html>

Lazy Load Demo

What if visitors to my site have AdBlock?

The Pre-Content Unit 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 “hidden-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 hidden-container in our embed code, do not use the word “ad” because Ad-Block natively hides / blocks containers that contain the term “ad” for its id or class.
  • Was this Support Article Helpful ?
  • yes   no