java - Implementing MRaid.js in HTML Ads

I am developing an iOS app for displaying banner Ads with MRAID patibility. 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=".html?hash=bd1ksct1&bgcolor=%23000000&wmode=opaque&clickTag=http%3A%2F%2Fwww.somewebsite&t=1369101780" width="728" height="90" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    </body>
</html>

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./iframe/embed.html?hash=bd1ksct1&bgcolor=%23000000&wmode=opaque&clickTag=http%3A%2F%2Fwww.somewebsite.&t=1369101780" width="728" height="90" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    </body>
</html>

Share Improve this question asked May 22, 2013 at 18:48 Karthik 131 gold badge2 silver badges7 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 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.

The MRAID Best Practices remends 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 === 'plete') {
    if (typeof mraid !== 'undefined') {
      if (mraid.getState() === 'loading') {
      mraid.addEventListener('ready', displayAd);
      } else if (mraid.getState() === 'default') {
      displayAd();
      }
      success = true;
    }
  }
  return success;
}

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

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 - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)