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.

iptag.cmd.player.push(function() {
	aiptag.adplayer = new aipPlayer({
		AD_WIDTH: 960,
		AD_HEIGHT: 540,
		AD_DISPLAY: 'default', //default, fullscreen, center, modal-center, fill
		LOADING_TEXT: 'loading advertisement',
		PREROLL_ELEM: function(){return document.getElementById('videoad')},
		AIP_COMPLETE: function (evt)  {
			/*******************
			 ***** WARNING *****
			 *******************
			 Please do not remove the PREROLL_ELEM
			 from the page, it will be hidden automaticly.
			*/
			console.log("Video Ad Completed: " + evt);
		}
	});
});

Show the Video Ad

//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(); });
} 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', //default, fullscreen, center, modal-center, fill
		LOADING_TEXT: 'loading advertisement',
		PREROLL_ELEM: function(){return document.getElementById('videoad')},
		AIP_COMPLETE: function ()  {
			/*******************
			 ***** WARNING *****
			 *******************
			 Please do not remove the PREROLL_ELEM
			 from the page, it will be hidden automaticly.
			*/
			console.log("Video Ad Completed: " + evt);
		}
	});
});

Show the Rewarded Ad

//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(); });
} 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");
}

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");
});

Manually opening / resurfacing the consent layer

Some examples of how to use this to preview on your site (foo.com):
Test CPRA messaging -- http://foo.com/?fc=alwaysshow&fctype=ccpa
‍Test GDPR messaging -- http://foo.com/?fc=alwaysshow&fctype=gdpr

‍Note: If you expect to see a message but don't see it, or it's not behaving as expected, try clearing your cookies (or using Incognito mode) to reset any saved state and try again.