For an HTML creative to be served and renderd properly on programmatic RTB through your Kayzen in-house bidder, your ad-markup should adhere to these guidelines:

DO's and DONT's

  • Ad-markup should be snippets of raw HTML (or JS) code.
<a href="https://www.nike.com"> <img src="http://nike320x50.jpg"> </a><script src="https://display-ad.com/ad-location-js-file"><script><style>some css style</style><img src="https://impression-pixel-url">
  • Ad-markup should not be full HTML documents or webpages.
<html> 
<head>
<title>nike.com</title>
</head>
<body>
<a href="https://www.nike.com">
<img src="http://nike320x50.jpg">
</a>
</body>
</html>
  • Tag must not include single-line HTML comments: // or <!--
    you can use tools such as http://minifycode.com/html-minifier/ to remove comments and extra lines from your markup.
  • All references to external assets must be absolute URLs instead of relative URLs and HTTPS instead of HTTP.
<img src="https://play.kayzen.io/advertiser/logo.png" />
  • For your bidder to track clicks and have those available in APIs or the Kayzen UI, the click URL in your markup should be encoded as follows:
    Example plain URL: https://www.kayzen.io
    Example encoded URL: {CLICK_URL}https%3A%2F%2Fwww.kayzen.io

    Please use our creative helper tool to encode your plain Click URL to encoded format.
  • Ad markup should not contain <iframe> due to rendering and reporting issues.
  • ad markup and assets size should not exceed 5 MB
  • Image assets should be in JPG, PNG or GIF.
  • Video assets should be MP4.

MRAID requirements

  • Include the following to the start of your ad markup/MRAID tag:
    <script src="mraid.js"></script>
  • All javascript code executed to display ad and reference DOM should happen after MRAID.ready.
  • Per the MRAID spec, all MRAID ads are required to leverage the mraid.open() method when the a user clicks to go to a landing page. Using href anchor tags or window.open or window.location to open links will result in click-tracking discrepancies.
  • If you plan to implement impression tracking into your MRAID tag, you must implement logic such that your impression trackers are fired only when the MRAID ad becomes viewable to the end-user.
if ( mraid.viewableChangeEventWasDetected() ) 
if( mraid.isViewable() == true)
fireMyImpressionTrackers();
else if ( mraid.isViewable() == false)
doNothing();

Recommendations

Recommended specifications

  • You can use our Ad Viewer Tool to see how your ad markups renders and behaves.
  • Serve HTML creatives that fill the entire space regardless of its size. For example, center the main image (see below on centering CSS) and provide a full-screen background image that is consistent with and matches the main image.
  • Use media queries for responsive design.
  • Use to follow example as a guideline to center your creative .
<style type='text/css'> 
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
padding: 20px;
text-align: center;
-webkit-text-size-adjust: none;
}
</style>
<img src="http://www.fictionalCDN.com/example300x250.png">
  • When sending in-ad events, it is advised to make sure that each event is fired only once per impression. You can use the following snippet as an example
var raiseEvent = (function () {
var eventCalls = []
function makeHttpRequest(url) {
var xhr = typeof XMLHttpRequest !== 'undefined'
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('get', url, true);
xhr.send();
}
return function (url) {
if (eventCalls.indexOf(url) === -1) {
eventCalls.push(url);
makeHttpRequest(url);
}
}
})();
raiseEvent('​https://api-events.kayzen.io/v1/ev?tp=direct&api_key={api_key}&idfa={IDFA}&gaid={GAID}&os={OS}&app_event={app_event}');
  • To utilise the full potential of HTML/MRAID inventory, we recommend using our Ad template markup. It is a fully responsive ad unit that is interactive, can be served as 320x50 and 300x250 banners and all full screen formats (tablet and smartphone, various screen sizes and both orientations portrait and landscape), and can be used to display both video and static images. The Ad unit can be configured to also send VTR and interaction events for performance measurement.

This is a sample markup of our Ad unit Template. If you wish to use our template on your campaigns, please contact your Programmatic Success Specialist.

<script src="mraid.js"></script> 
<script src="https://b6b5p6y2.ssl.hwcdn.net/content/56eebc10-dac9-410c-b425-d5a2fc0b921e-playablekit-0.7.1.js>
<script src="https://b6b5p6y2.ssl.hwcdn.net/content/e9524036-0127-4c7b-a9d4-afc9560d5965-pk-dl-0.4.0.js" data-endpoint="https://api-events.kayzen.io/v1/ev?tp=direct&api_key=38435517dc6479524c07bbfb1456709e0cd4d196&postback_type=playable&gaid={DEVICE_PLATFORM_ID}&os={DEVICE_OS_NAME}&bid_id={CONVERSION_ID}&app_event=event_name"></script>
<script>
PlayableKit({
appPath: 'https://b6b5p6y2.ssl.hwcdn.net/content/',
appLauncher: 'main_X.X.X.js',
config: {
addCloseButton: false,
closeButton: {
style: 'cross',
image: '',
color: '#000000',
opacity: 0.1,
delayTime: 7,
fadeTime: 1,
},
application: {
ios: {
impressionUrl: '',
clickUrl: '',
appName: '',
appIcon: '',
appPublisher: '',
appDescription: '',
appRating: 3.7,
appReviewCount: 37354,
ctaButtonText: 'Install Now',
ctaButtonColor: null,
mode: 'previd-carousel', // One of: 'carousel', 'video', 'previd-carousel'
contentLayout: 'portrait', // One of: 'portrait', 'landscape'
slides: [
'',
],
videoUrl: '',
videoPlaceholder: null,
videoIsMuted: true,
preVideoSkipDelay: 5,
},
android: {
impressionUrl: '',
clickUrl: '',
appName: '',
appIcon: '',
appPublisher: '',
appDescription: '',
appRating: 4.2,
appReviewCount: 26176,
ctaButtonText: 'Install Now',
ctaButtonColor: null,
mode: 'previd-carousel', // One of: 'carousel', 'video', 'previd-carousel'
contentLayout: 'portrait', // One of: 'portrait', 'landscape'
slides: [
'',
],
videoUrl: '',
videoPlaceholder: null,
videoIsMuted: true,
preVideoSkipDelay: 5,
},

}
}
});
</script>

Your feedback helps us improve our articles. Please pick one of the emojis below

Did this answer your question?