MOBILE WPS DOCUMENTATION

Adsolutions / Documentation  / MOBILE WPS DOCUMENTATION

MOBILE WPS 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 Interscroller needs to be setup responsive to cater for all the different screen sizes available.

TEMPLATE PREVIEW

The template consists of the following assets:

  • index.html
  • code.js

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

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

And it contains the following div:

<div id="smartPlayerContainer">

This is a placeholder for theSmartVideoPlayer. The SmartVideoPlayer allows for auto-initiated delivery of video across devices to play in-line within your ads. (more information on this player can be found here)

code.js
In the .js file the player is created:

/**
* Creates a SmartVideoPlayer that...
* - Plays inline/autoplay video, since option "mode" is left out, remaining at the default of SmartVideoPlayer.mode.INLINE_AUTOPLAY.
*
* - Is attached to div with ID "smartPlayerContainer". We use a reference to the div instead.
*
* - Loads the appropriate video depending on device (mp4, webm, or ogv). OGV is required for inline autoplay on 
*	 devices such as iPhone that do not natively support inline autoplay.
*
* - Immediately plays the video, since option "autoplay" is left out, remaining at the default of true.
*
* - Shows a poster image once the video is finished.
*/
//ADTECH.require(['SmartVideoPlayer','TwitterAPI','RemoteRequest','VPAID','EngadgetAPI'], function(SmartVideoPlayer,twitter,rem,VPAID,EngadgetAPI) {
ADTECH.require(['SmartVideoPlayer'], function(SmartVideoPlayer) {
    var player = ADTECH.modules.SmartVideoPlayer.createPlayer({
	    container: 'smartPlayerContainer',
		    width: 300,
			height: 168,
			autoplay:false,
			name:'video',
             id: 'player',
			src: {
			    mp4: 'video.mp4',
				webm: 'video.webm',
				ogv: 'video.ogv'
			},
			    poster: 'video.jpg'
			});

(more information on this player can be found here)

You can also spot two event listeners that control when the video is playing:

ADTECH.addEventListener("partlyInView", function(e) {
		if(isPlaying === false){  
			doSomething();
		}
	});
	ADTECH.addEventListener("almostInScrollPosition", function(e) {
		if(isPlaying === false){  
			doSomething();
		}
	});
	ADTECH.addEventListener("inScrollPosition", function(e) {
		if(isPlaying === false){  
			doSomething();
		}
	});
  ADTECH.addEventListener("outOffScrollPosition", function(e) {
		if(firstPlay === true && isPlaying === true){
			player.pause();
			isPlaying = false;
			if(!isMuted){
				player.muted = true;
				sound.style.display = "none";
			}
		}
	});
	ADTECH.addEventListener('updatePercentage',function(e){
		if(e.perc<0.2){
						player.pause();
						isPlaying = false;
					}else{
						player.play();
						isPlaying = true;
					}	
	});

The code.js file is also the spot 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.

	ADTECH.ready(function(){
	clk.onclick = function(){
		ADTECH.click('main','http://www.adsolutions.com');
	};

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

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.