INTERSTITIAL DOCUMENTATION

INTERSTITIAL DOCUMENTATION

The template is made as basic as possible so you have a simple starting point to begin building your creative. Keep in mind the interstitial needs to be setup responsive to cater for all the different screen sizes available. We’ll take care of MRAID and stuff for you if the ad is booked in-app.

TEMPLATE PREVIEW

The template consists of the following assets:

• index.html
• code.js
• style.css

index.html
The html is fairly basic. It links the .css and .js files. It includes the core library:

	<script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>

And it defines a standard html video player:

	<video id="video" autoplay>
  		<source src="video.mp4" type="video/mp4">
		<source src="video.ogg" type="video/webm">
  		<source src="video.ogv" type="video/ogg">
		Your browser does not support the video tag.
	</video>

If you’re making the ad for in-app the above is sufficient.

If you’re making the ad for mobile web the above code will not autoplay in-line within your ad in all browsers.

Recently Apple and Google decided to allow autoplay in their latest mobile browsers.But only if videos are muted. On iOS you also have to set the playsinline attribute, because by default videos will play fullscreen. So you have the choice to make the video muted and autoplay inline with this code:

	<video id="video" muted playsinline autoplay>
  		<source src="video.mp4" type="video/mp4">
		<source src="video.ogg" type="video/webm">
  		<source src="video.ogv" type="video/ogg">
		Your browser does not support the video tag.
	</video>

And you can add an un-mute button or add controls to the video tag to allow audio playback.

All browsers that don’t support autoplay/playsinline for muted video, will only play after user interaction. And some will play in the native player and not inline. Check these sites  https://webkit.org/blog/6784/new-video-policies-for-ios/ and http://walterebert.com/blog/html5-video-autoplay-mobile-revisited/ and other sources on this topic.

As a third option we offer the smartVideoPlayer. The SmartVideoPlayer allows for auto-initiated delivery of video across devices to play in-line within your ads. Al the documentation about the smartVideoPlayer can be found here

code.js
The code.js file is where the click is implemented. You can change the URL in this file. Or designate it to a different element or add multiple clickable elements.

  //default click, it's possible to designate another element for this
 portrait.ontouchstart = doc.body.onclick = function(e){ 
 stopPropagation(e);
 ADTECH.click('layer', 'http://www.adsolutions.com'); 
 };

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

So if you want two different clicks you could do something like this:

  //click on button1
 button1.onclick = function(e){ 
 stopPropagation(e);
 ADTECH.click('button1', 'http://www.yoururl.com'); 
 };
  //click on button2
 button2.onclick = function(e){ 
 stopPropagation(e);
 ADTECH.click('button2', 'http://www.yoururl.com'); 
 };

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to [email protected] (WeTransfer preferred)

Final creative or requests for a preview can be send to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.