Last Updated: Sep, 2023
For an HTML creative to serve and render properly on programmatic inventory through your Kayzen in-house bidder, your creative code should adhere to following guidelines. This guide covers different use cases of using an HTML creative- Standalone HTML, Playable creative, HTML end card and Playable end card of a video creative
HTML Creative Recommendations
Following are some of the best practices that should be adhered for HTML creatives
File size: The html code/file that we either input into the console or upload when we create a html Creative, lets call this "index.html" needs to be small <10kb
Assets: This file can load up to <5mb assets from a CDN.
It is best-practice to load all your assets inline from one .js file using base64 image encoding.
What to upload/input?
Creative code can be snippets of raw HTML (or JS) code, for example:
<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">
or full HTML documents like the following example below:
<!DOCTYPE html><html><head><script type="text/javascript">window.KAYZEN_CTA_URL="{HTML_CLICK_URL}"; window.KAYZEN_ANALYTICS_URL="https://api-events.eventstracker.io/v1/ev?tp=direct&postback_type=playable&gaid={DEVICE_PLATFORM_ID}&idfa={DEVICE_PLATFORM_ID}&os={DEVICE_OS_NAME}&bid_id={CONVERSION_ID}&api_key={API_KEY}&can_claim=1";</script><script type="text/javascript" src="mraid.js"></script><title>Bolierplate</title><meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="stylesheet" href="https://b6b5p6y2.ssl.hwcdn.net/content/59e23abb-fb1f-4614-9ba5-f374ce0c8e97-index.css"><script src="https://b6b5p6y2.ssl.hwcdn.net/content/f9d00b1d-493e-485d-8952-d8ec064a69cd-game.js"></script></head><body><div id="mainContainer"><div id="loading"><div class="loadingContainer"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div><div id="cta"> INSTALL </div></div></body></html>Code Tips
Creative code should not contain <iframe> due to rendering and reporting issues.
Code should not include single-line comments: // or <!--
Code should be minified
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" />
File size:
Our Best-practice is as follows...
Total: <2mb
Main ad / index.html <10kb - The file you upload into Kayzen Console or the code snippet you input: eg ."Index.html" In some cases It will be sent in the bid-response and should therefore be very small.
Assets <5mb - load up to <5mb assets from a CDN
Assets Tips:
It is best-practice to load all your assets inline from one .js file using base64 image encoding. The less external loads the better.
Image assets should be in JPG, PNG or GIF.
Video assets should be MP4.
Previewing your Creative:
You can use our Ad Viewer Tool to see how your creative renders. However, please note that the final rendering behaviour might differ from exchange to exchange.
Tracking Clicks
For Kayzen to track clicks and have those clicks visible in the dashboard you need to add click tracking macros in your HTML creatives. Please use macro {HTML_CLICK_URL} to enable this. Please follow this link (customers only) for more details on how to use this macro.
If for any reason, you prefer not to use Click url mentioned in Tracker Asset in the html creative and rather use a different click url in HTML, then please use the macro {CLICK_URL} for Kayzen to track clicks . For instance,
If your target Landing URL is:
https://www.kayzen.iothen it should be used in HTML in the following way
{CLICK_URL}https%3A%2F%2Fwww.kayzen.iowhere {CLICK_URL} is a macro that is required for Kayzen to record clicks and the final landing url is encoded. The final landing url can be any valid url- store url, MMP url, mweb url, deeplink URL etc. In addition, you can use our creative helper tool to encode your plain Click URL to correct encoded format.
Note: We strongly recommend you to use {HTML_CLICK_URL} rather than {CLICK_URL} macro
MRAID Creative Requirements
MRAID (Mobile Rich-Media Ad Interface Definitions) is a framework for mobile advertisers and publishers that allows rich media ad creatives to run across all compliant devices and applications. MRAID framework is extensively used to create Playable creatives as well.This section talks about best practices and requirements to run MRAID and Playable creatives on your Kayzen in-house bidder
All recommendations for HTML creatives specified above also apply here.
When adding the creative please select MRAID 2.0 in the console.
Include the following to the start of your MRAID creative tag:
<script src="mraid.js"></script>
All JavaScript code executed to display ad and reference DOM should happen after mraid.ready()
Most exchanges will render the timer and the close button. Do not add your own.
As per the MRAID spec, all MRAID ads are required to leverage the mraid.open() method when 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 and a lot of exchanges such Chartboost, Applovin, Ironsource etc. do not support window.open() function in an MRAID creative.
All URLs within the ad must be secured (Correct: HTTPS:// Wrong: HTTP://).
In order to get the size of the ad, you must use mraid.getMaxSize().
If you plan to implement impression tracking in your MRAID tag, you must implement it in such a way that your impression trackers are fired only when the MRAID ad becomes viewable to the end-user. Sample example below
if ( mraid.viewableChangeEventWasDetected() )
if( mraid.isViewable() == true)
fireMyImpressionTrackers();
else if ( mraid.isViewable() == false)
doNothing();
MRAID Playables
All the specifications required for MRAID creatives apply here as well.
If your creatives are user interactive, please mark the creative attribute: User Interactive (e.g., Embedded Games) while adding creatives in the user interface
You can add in-ad events in your playable creatives and analyze them right in Kayzen dashboard. Below is a sample example. You can find more information in this doc.
https://api.events.kayzen.io/v1/ltv?tp=direct&postback_type=playable&device_id=D3F15CAE-B2DB-4FZD-9B34-X78C88C81538&os=ios&bid_id=892501088-1552511436&app_event=launch&can_claim=1
Following exchanges currently support standalone MRAID playables
Exchange | Rewarded | Interstitial |
Applovin | ✅ | ✅ |
Chartboost | ✅ | ✅ |
Fyber | ❌ | ✅ |
Ironsource | ❌ | ✅ |
Unity | ✅ | ✅ |
HTML/MRAID creatives as video end card
You can also use your HTML/MRAID or Playable code as a companion ad/ end-card of a video creative
When using the HTML creatives as video end cards, you can use the macro {HTML_COMPANION_CLICK_URL} instead of {HTML_CLICK_URL}. Both macros function in similar way and track clicks, {HTML_COMPANION_CLICK_URL} helps in tagging the click as originating from companion ad.
The specifications are similar to standalone HTML/MRAID, Playable creatives respectively.
Exchanges which support Video + HTML (non-mraid) EC
Applovin | Appodeal | BidSwitch |
Chartboost | Fyber | Ironsource |
Mobilityware | Pubnative | Rubicon |
Smaato | Unity | Vungle |
Exchanges which support Video + Mraid EC
Exchange | Rewarded | Interstitial |
Applovin | ✅ | ✅ |
Chartboost | ✅ | ✅ |
Fyber | ✅ | ✅ |
Ironsource | ✅ | ✅ |
MobilityWare | ✅ | ✅ |
Unity | ✅ | ✅ |
Vungle | ✅ | ✅ |