Implementing MRaid.js in HTML Ads

Question

I am developing an iOS app for displaying banner Ads with MRAID compatibility. I researched on it and had few samples to work with. I have successfully linked my mraid.js file into my HTMl code. The problem I am facing here is soon after the Ad gets loaded, I am not getting any Statechange events triggered. Here is my Sample HTML code. I also have the mraid.js file in the same folder.

In the code below, I am listening for a StateChange event. But the event is not getting triggered even after the ad loads. I am new to coding HTML/Js. Is there anywhere I am wrong? can anyone please correct me if I am wrong somewhere.

Thanks,

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="mraid.js"> </script>
        <script>
            if (mraid.getState() != 'ready') {
                mraid.addEventListener("stateChange", function(state) {
                                       if (state == 'default') {
                                       alert ("State Changed");
                                       startAd();
                                       }
                                       });
            } else {
                startAd();
            }


            var startAd = function() {
                alert ("Start Ad");
                mraid.useCustomClose(true);
            }

            </script>


        <iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bd1ksct1&bgcolor=%23000000&wmode=opaque&clickTag=http%3A%2F%2Fwww.somewebsite.com&t=1369101780" width="728" height="90" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    </body>
</html>

score 1 · Accepted Answer · answered May 23 '13 at 15:13

1

You may have a race condition going on that you're losing.

It's possible mraid isn't defined, but that's probably ok.

Further, I suggest checking that the state === 'loading' rather than != 'ready' or what the specs suggest.

In fact, 'ready' despite being an event, is not an official state. That's most likely your issue.

answered May 23 '13 at 15:13

John Cappiello

101
2

Thanks for your input John. I tried with state === 'loading' as well, but no luck. The problem here is that the stateChange event is not getting broadcasted in the mraid.js file. I am pretty much sure that the mraid JS file is injected into the HTML file such that I get the current State as 'loading' when the page initially loads. – Karthik May 23 '13 at 17:46
Finally figured out the problem. Its not that mraid.js will trigger the events on itself when the page loads. The Statchange event must be called externally by the SDK (in my case the UIwebView's delegate methods - didFinishLoad). – Karthik May 25 '13 at 00:53

score 1 · Answer 2 · answered Dec 29 '14 at 19:41

The MRAID Best Practices recommends defining mraid.js as soon as possible - maybe put it in the head:

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

Also take note of this documentation:

Start with the MRAID.addEventListener for ready as shown below. Put the rest of the MRAID code in displayAd or similar initialization function. The state must be “ready” before any MRAID APIs can be used. Failure to observe this requirement risks unpredictable failures for the ad when it tries to use MRAID functionalities that are not yet available to it. Occasionally the ready event is fired before the creative has an opportunity to register a listener. Therefore using logic like this example represents a best practice.

function init() {
  var success = false;
  if (document.readyState === 'complete') {
    if (typeof mraid !== 'undefined') {
      if (mraid.getState() === 'loading') {
      mraid.addEventListener('ready', displayAd);
      } else if (mraid.getState() === 'default') {
      displayAd();
      }
      success = true;
    }
  }
  return success;
}

score 0 · Answer 3 · answered Feb 17 '14 at 22:37

0

startAd() should be initialized before call or declared using instruction, like: function startAd() { ... }

answered Feb 17 '14 at 22:37

Andrey

1
1

score 0 · Answer 4 · answered Feb 17 '14 at 22:41

0

Here is example from MRAID 2.0 spec:

function showMyAd() { 
    ... 
} 

if (mraid.getState() === 'loading') { 
    mraid.addEventListener('ready', showMyAd); 
} else { 
    showMyAd(); 
}

answered Feb 17 '14 at 22:41

Andrey

1
1

Implementing MRaid.js in HTML Ads

4 Answers4