Adding AdinPlay Ads to Your Site

The JavaScript snippet

Adding the following code (known as the "JavaScript snippet") to your site's templates is the easiest way to get started using AdinPlay Ads. The code should be added near the top of the <head> tag and the string 'XXXXX' should be replaced with the property ID (also called the "AIP ID").

<!-- AdinPlay Ads -->
<script>
var aiptag = aiptag || {};
aiptag.cmd = aiptag.cmd || [];
aiptag.cmd.display = aiptag.cmd.display || [];
aiptag.cmd.player = aiptag.cmd.player || [];

//CMP tool settings
aiptag.cmp = {
	show: true,
	button: true,
	buttonText: "Privacy settings",
	buttonPosition: "bottom-left" //bottom-left, bottom-right, top-left, top-right
}
</script>
<script async src="//api.adinplay.com/libs/aiptag/pub/XXXXX/tag.min.js"></script>

The above code does two main things:

Initializes a global aiptag.cmd function (called the aiptag.cmd command queue) that allows you to schedule commands to be run once the AdinPlay Ads JavaScript library is loaded and ready to go.
Starts asynchronously downloading the AdinPlay Ads JavaScript library from api.adinplay.com, always use async mode to download the AdinPlay Ads JavaScript library for better user experience. Please make sure the AdinPlay Ads JavaScript library is always loaded after the settings are set like the example above

Custom implementations may require adding additional code to the last line of the JavaScript snippet. However, you should not change the order or the code that loads the AdinPlay Ads JavaScript library.

Displaying and Refreshing Display Ads

The string 'XXXXX_placement' should be replaced with the placement ID (also called the "AIP PLACEMENT ID").

Displaying Display Ads

<div id='XXXXX_placement'>
    <script type='text/javascript'>
    aiptag.cmd.display.push(function() { aipDisplayTag.display('XXXXX_placement'); });
    </script>
</div>

Refreshing Display Ad

aiptag.cmd.display.push(function() { aipDisplayTag.display('XXXXX_placement'); });

Destroying Display Ad

aiptag.cmd.display.push(function() { aipDisplayTag.destroy('XXXXX_placement'); });

Destroying All Display Ads

aiptag.cmd.display.push(function() { aipDisplayTag.destroy(); });

Displaying Video Ads

Create a container to display the Video Ad

<div id="videoad"></div>

Initialize the Video player, this should be done only once per page load.

aiptag.cmd.player.push(function() {
	aiptag.adplayer = new aipPlayer({
		AD_WIDTH: 960,
		AD_HEIGHT: 540,
		AD_DISPLAY: 'default', // Options: default, fullscreen, center, modal-center, fill
		LOADING_TEXT: 'loading advertisement',
		PREROLL_ELEM: function(){return document.getElementById('videoad')},
		AIP_COMPLETE: function (evt)  {
			/*
			 *********************
			 *****  WARNING  *****
			 *********************
			 Do NOT remove the PREROLL_ELEM from the page.
			 It will be hidden automatically after the ad completes.

			 The 'evt' parameter can be one of the following:
			 video-ad-skipped
			 video-ad-completed
			 video-ad-error
			 video-ad-empty
			 video-ad-timeout
			 user-has-adblock
			 preroll_elem-doesnt-exist
			 */
			console.log("Video Ad Completed: " + evt);
		}
	});
});

Show the Video Ad, the string 'XXXXX_video_placement' should be replaced with the video placement ID (also called the "AIP VIDEO PLACEMENT ID").

//check if the adslib is loaded correctly or blocked by adblockers etc.
if (typeof aiptag.adplayer !== 'undefined') {
	aiptag.cmd.player.push(function() { aiptag.adplayer.startVideoAd('XXXXX_video_placement'); });
} else {
	//Adlib didnt load this could be due to an adblocker, timeout etc.
	//Please add your script here that starts the content, this usually is the same script as added in AIP_COMPLETE.
	console.log("Ad Could not be loaded, load your content here");
}

Displaying Rewarded Ads

Add the following functions to the aipPlayer initialisation.

AIP_REWARDEDNOTGRANTED: function (state)  {
	//This event is fired when a rewarded ad is:
	//timed out, empty, unsupported or closed by the user.
	//don't grand the reward here
	alert("Rewarded ad state: " + state); //state can be: timeout, empty, unsupported or closed.
},
AIP_REWARDEDGRANTED: function ()  {
	alert("Reward Granted");
}

like this

aiptag.cmd.player.push(function() {
	aiptag.adplayer = new aipPlayer({
		AIP_REWARDEDNOTGRANTED: function (state)  {
			//This event is fired when a rewarded ad is:
			//timed out, empty, unsupported or closed by the user.
			//don't grand the reward here
			alert("Rewarded ad state: " + state); //state can be: timeout, empty, unsupported or closed.
		},
		AIP_REWARDEDGRANTED: function ()  {
			alert("Reward Granted");
		},
		AD_WIDTH: 960,
		AD_HEIGHT: 540,
		AD_DISPLAY: 'default', // Options: default, fullscreen, center, modal-center, fill
		LOADING_TEXT: 'loading advertisement',
		PREROLL_ELEM: function(){return document.getElementById('videoad')},
		AIP_COMPLETE: function ()  {
			/*
			 *********************
			 *****  WARNING  *****
			 *********************
			 Do NOT remove the PREROLL_ELEM from the page.
			 It will be hidden automatically after the ad completes.

			 The 'evt' parameter can be one of the following:
			 video-ad-skipped
			 video-ad-completed
			 video-ad-error
			 video-ad-empty
			 video-ad-timeout
			 user-has-adblock
			 preroll_elem-doesnt-exist
			 */
			console.log("Video Ad Completed: " + evt);
		}
	});
});

Show the Rewarded Ad without pre-loading

//check if the adslib is loaded correctly or blocked by adblockers etc.
if (typeof aiptag.adplayer !== 'undefined') {
	aiptag.cmd.player.push(function() { aiptag.adplayer.startRewardedAd({preload: false, showLoading: true}); });
} else {
	//Adlib didnt load this could be due to an adblocker, timeout etc.
	//Please add your script here that starts the content, this usually is the same script as added in AIP_REWARDEDCOMPLETE.
	console.log("Rewarded Ad Could not be loaded, load your content here");
}

Show the Rewarded Ad with pre-loading

//The code below is to preload an rewarded ad, you can determine when you want to show the rewarded ad after the preloading
function preload_rewarded() {
	//check if the adslib is loaded correctly or blocked by adblockers etc.
	if (typeof aiptag.adplayer !== 'undefined') {

		//It's important the EventListener rewardedSlotReady is added only once.
		if(aipAPItag.rewardedSlotEventListener !== true) {
			aipAPItag.rewardedSlotEventListener = true;
			aiptag.events.addEventListener("rewardedSlotReady", function (e) {
				if(e.detail.isEmpty !== true) {
					//rewarded ad is ready to show
					if (confirm("Do you want to watch an ad now to get your reward?")) {
						aiptag.adplayer.showRewardedAd();
					}
				} else {
					//There is no rewarded ad available
					alert("Rewarded Ad not available");
				}
			}, false);
		}

		//set the preload flag to true to use preloading of the rewarded ad
		aiptag.cmd.player.push(function() { aiptag.adplayer.startRewardedAd({preload: true, showLoading: false}); });
	} else {
		//Adlib didn't load this could be due to an adblocker, timeout etc.
		alert("Rewarded Ad Could not be loaded, handle your content here");
	}
}

Interstitial Ads

Knowing when an interstitial ad is available

The following event will be triggered when there is an interstitial ad available Please make sure this Event Listener is set before the JavaScript snippet: //api.adinplay.com/libs/aiptag/pub/XXXXX/tag.min.js is loaded

//Interstitial ad available event
document.addEventListener("aip_interstitialadavailable", function(e) {
	console.log("An interstitial ad is available");
});

Disabling Interstitial Ads

Add the following setting to the initialisation just after var aiptag = aiptag || {}; Please make sure this setting is set before the JavaScript snippet: //api.adinplay.com/libs/aiptag/pub/XXXXX/tag.min.js is loaded interstitial ads will need to be enabled, please contact our team to enable Interstitial Ads

/ disable interstitial ads
aiptag.disableInterstitialAd = true;

CMP tool settings for capturing user GDPR consent

aiptag.cmp = {
	show: true,
	button: true,
	buttonText: "Privacy settings",
	buttonPosition: "bottom-left" //bottom-left, bottom-right, top-left, top-right
}

If you choose not to use the Consent tool button its important to implement aipAPItag.showCMPScreen(); as described below. To comply with the GDPR to show the Consent tool settings menu to revoke or change your consent settings.

<a href="javascript:void(0)" onclick="aipAPItag.showCMPScreen()">Privacy settings</a>

You can use the following functions to show or hide the settings button. (this can be useful when in game for example.)

aipAPItag.hideCMPButton();
aipAPItag.showCMPButton();

The CMP can call the following events

Event: Description
"aip_consentnotrequired": No consent required, consent tool is not loaded.
"aip_consentscreen": CMP shows the consent screen
"aip_consentscreenoff": CMP removes the consent screen
"aip_consent": CMP has gathered consent or a preexisting cookie was found. Consent data can now be read from the CMP.
"aip_consentapproved": Visitor gave positive consent to all vendors/purposes
"aip_consentrejected": Visitor rejected all vendors and purposes

Examples

//CMP shows the consent screen
document.addEventListener("aip_consentscreen", function(e) {
	console.log("CMP shows the consent screen");
});

//CMP removes the consent screen
document.addEventListener("aip_consentscreenoff", function(e) {
	console.log("CMP removes the consent screen");
});