java - 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

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.

score 1 · Accepted Answer

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 · Accepted Answer

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

score 0 · Accepted Answer

Here is example from MRAID 2.0 spec:

function showMyAd() { 
    ... 
} 

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

java - Implementing MRaid.js in HTML Ads

4 回答 4

Related

Reference