MRAID

MRAID or "Mobile Rich Media Ad Interface Definitions" is IAB standard enabling consistent ad experience across all platforms.

Why use MRAID?
MRAID gives us the opportunity to use standardized rich media banners accross different plaforms - both web and Android/iOS native applications.
This makes banner creation workflow and debugging easier because a single banner works on all platforms as defined by the standard.

How to create MRAID compliant banners?
To create a banner ad that complies with the IAB MRAID standard for DELFI follow the instructions below or read the detailed Adform MRAID specifications here.


INSTRUCTIONS

MRAID is for mobile rich media banners only!

Using MRAID
Include MRAID script in the head section of the published banner html file. MRAID script does not have to be included with the banner as it will be provided by the platform the banner will be displayed in.

<script src="mraid.js"></script>

Add the following code to the element that you want to open the clicktag.

var banner = document.getElementById('banner');
banner.addEventListener('click', function() {
	window.mraid ? mraid.open(Adform.getClickURL('clickTAG')) : window.open('http://www.delfi.ee/?ct_ok');
});

The code above locates the html element with the id of "banner" and adds a click event to it. The click event checks if mraid exists and if it does uses it, if not then it just opens the clicktag url.
This is for local testing because the mraid script does not exist locally and logs errors otherwise.

For more detailed information about Adform MRAID go HERE


Adobe Animate CC

Below you can find a template file for Adobe Animate CC that includes mraid.js script tag in the head section and clicktag script on canvas element. Follow to instructions below to create a IAB MRAID standard compatible banner in Adobe Animate CC.

Template: delfi-aa-cc-mraid-template
Video tutorial: How to create an mraid banner in Adobe Animate CC

  1. Download the template file
  2. Unpack the delfi-aa-cc-mraid-template.html template file frome delfi-aa-cc-mraid-template.zip file
  3. Open Adobe Animate CC
  4. Create new HTML5 Canvas
  5. Click on Publish Settings
  6. Add checkmark in front of Center stage
  7. Add checkmark in front of Make responsive
  8. Add checkmark in front of Scale to fill visible area
  9. Click on Advanced tab
  10. Click on Import New...
  11. Select the delfi-aa-cc-mraid-template.html
  12. Click Open
  13. Click OK
  14. Make the banner
  15. Publish the banner
  16. Compress the banner into ZIP file
  17. Send the banner zip archive file to DELFI

Tumult Hype

The DELFI Tumult Hype MRAID template file is set up so that the mraid.js has been included in the head section of the banner and a clicktag is set up on the banner container element.

Template: delfi-tumult-hype-mraid-template
Video tutorial: How to create an mraid banner in Tumult Hype

  1. Download the template
  2. Unpack delfi-hype-mraid-template.zip file
  3. Open the delfi-hype-mraid-template
  4. Make the banner
  5. Go to File -> Advanced Export...
  6. Remove checkmark from Support Internet Explorer 6-9
  7. Add checkmark to Use external runtime URL:
  8. Insert https://tumult.com/hype.runtime to the input field
  9. Click Export 1 Slice...
  10. Save the banner
  11. Compress the banner into ZIP file
  12. Send the banner zip archive file to DELFI

Adobe Edge Animate and Google Web Desinger

Adobe Edge and Google Web Designer do not allow templates that have a reference to a local JavaScript file that is not used actually available. Because of that creating a MRAID compatible banner using either of those programs leaves two possibilites.

Add MRAID script and clicktag manually
Create the banner as you would normally. Publish it and add the scripts as described in the instructions section of this page.

Do not add MRAID
Option is to create a mobile banner that does not have MRAID script included in the head section. We will convert the banner when uploading it. But in this case the banner must not include any click or touch events because this will duplicate the event and cause multiple windows to open.
The banner conversion into MRAID banner will add the MRAID script into the head section of the banner and add a global clicktag. This works only on banner that have a single clicktag and cannot be used on banners that have multiple clicktags or other click event based events.

  • Banner must be responsive
  • Banner must not have click events