All Collections
Specifications and Guidelines
HTML and Playable Creative Guidelines
HTML and Playable Creative Guidelines
A guideline for HTML, MRAID, Playable creatives as standalone or video end cards.
Mitali Devasir avatar
Written by Mitali Devasir
Updated in the last hour

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

  • Creative code should be snippets of raw HTML (or JS) code. 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">
  • Creative code should not be full HTML documents or webpages like the eg below.

<html>  
<head>
<title>nike.com</title>
</head>
<body>
<a href="https://www.nike.com">
<img src="http://nike320x50.jpg">
</a>
</body>
</html>

  • Code 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 creative code.

  • 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" />

  • Creative code should not contain <iframe> due to rendering and reporting issues.

  • Image assets should be in JPG, PNG or GIF.

  • Video assets should be MP4.

  • Recommended file sizes are-

File Size

Optimal

Average

Sub-optimal

HTML/MRAID/Playable Creative

200-300kb

700kb-1mb

>1mb

Video + HTML/MRAID/Playable end card

<=1mb

<2mb

>=2mb

  • You can use our Ad Viewer Tool to see how your creative renders. However, please note that the final rendering behavior might differ from exchange to exchange.

  • 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.io

    then it should be used in HTML in the following way
    {CLICK_URL}https%3A%2F%2Fwww.kayzen.io

    where {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

Applovin

Chartboost

Fyber

Ironsource

Mopub

Unity

Vungle (Coming soon)

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

  • 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

Applovin

Chartboost

Fyber

Ironsource

Mobilityware

Unity

Vungle

  • Note: Adcolony doesn’t support HTML or MRAID end card

Did this answer your question?