one-part creative and mraid.expand()

[Generic Person]

 I am trying to understand MRAID one-part creative and mraid.expand(). 

The specification says that expand() on a banner will expand to a panel but use the existing webview. But it does not seem to mention more details.

Following is my hypothesis on how this would works E2E, and would really appreciate if you can validate/refute points below:

(1) Consider a simple case where creative consists of a single image of 300x680. 

(2) This image is shown as banner initially (where banner is of size 300x50), a cropped image of 300x50 is shown to the user. 

      Essentially, I am thinking that for a one-part creative, banner is just cropped version of expanded panel. 

      ASK: Can you please confirm. 

(3) When banner is expanded, a panel is shown, same webview is used, there are no network calls. 

(4) The complete image of size 300x680 is shown to the user on the screen. 

(5) This image might be anchored at top-left corner, but there are no guarantees of where on the screen this image is shown, unless this is specified by the creative. 

     ASK: Can you please confirm. 

(6) As close Region is automatically provided by MRAID, I assume that tapping on close region will automatically call mraid.close() , and I do not have to do anything extra to call mraid.close() method. 

    ASK: Can you please confirm. 

Does this make sense? 

Any pointers to get more or any example one-part creative code that I can look at. 

Thanks in advance. 

[Nathan Carver]

One of the problems with the MRAID spec document is that it is intended for ad designers so that they know the JavaScript interface. But it is interpreted by SDK developers who must implement it. When words like "WebView" are used, it can be very confusing. In this case, it does not mean "technically implement with an iOS WebView", it really just means "the web-based viewer seen by the user."

For your question, I'll also quickly discuss a one-part creative. This simply means that everything the ad needs is in one URL. As opposed to a two-part where there is one URL for the banner and one for the expanded panel.

So a one-part creative typically has two DIV elements, one hidden panel and one displayed banner. When the user taps on the banner, the panel is displayed. If there were no call to mraid.expand(), then the panel would be clipped.

In your example, the container starts as a 320x50 for iphone and the banner is 300x50. No problem. The ad displays inside the container.

The user taps on the banner, displaying the panel. Since the ad designer also made a call to mraid.expand(), the consumer now sees the entire panel. For implementation, you can use the same container you started with, or you can use another container that uses the same resource. It's up to you. But there are no network calls from the ad unit.

If the panel is smaller than the screen, say a 300x250 medium rectangle, then the ad designer is in charge of where it displays inside the container. They may want top-left, center-center, or center-bottom, but it is outside the role of the container to do anything except provide the display space.

As far as controlling that display, the ad designer assumes the usual rules of the web. If they do nothing, the ad will be top-left just like any other web page.

The close region is a different from the ad designer calling mraid.close() on the front end. The close region is always available (even if it has an alternate graphic) and always in the top-right corner. mraid.close() as a call from the creative could be linked to any HTML element anywhere on the page. But, in the end, they both instruct the container to return to the default state and send a stateChange event that the designer can listen for.

Let me know if this clarifies.

Thanks,

-Nathan

--
You received this message because you are subscribed to the Google Groups "ORMMA-discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ormma-discussi...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[chris....@motrixi.com]

Nathan...

What do you know about 3 part creatives?

I am building a
- banner
- expandable (with form and fields / submission)
- thank you page

So far I am displaying the banner and when clicked, the expandable.

How would one "expand" the third layer of creative (thankyou page) ?

Does this require me to write my own function?

I saw toggleLayer, but cannot find any documentation on it.

Thanks in advance

[Nathan Carver]

Chris,

I would suggest that your scenario requires a two-part creative with three stages.

Stage One would be your HTML banner that uses mraid.expand(url). The URL is to page that you host.

Stage Two is your hosted page showing the form which then posts to Stage Three which is your thank-you page. Because expand(url) doesn't show any forward-back buttons, this should hopefully give you the user experience you're planning.

Thanks,

-Nathan

For more options, visit https://groups.google.com/d/optout.

[chris....@motrixi.com]

Nathan,

I appreciate the quick response...

I am not sure what you mean by "three stages" ... I previously wrote all my functions to show/ hide elements as the form was submitted with jquery.

Can I write my own jquery functions to do this?

will "toggleLayer();" help me accomplish this?


does "expand();" just display the div with the id="expanded"?

[chris....@motrixi.com]

Nathan,

I understand expand(); can only be used once,  but I am still confused on how I will be advancing from the actual 'form submit' to the 'thankyou' page.

I changed added 'onsubmit="submit();' on my submit button

        <div id="submit"><input type="image" src="http://d1brdofu76fhhj.cloudfront.net/mini/300_AA/join_submit.gif" name="submit" class="submit" onsubmit="javascript:submit();"/></div>

         the submit(); function is written in jquery

the banner and expandable 'clear' as soon as i click submit



Do I have to use the 'customClose(true);' ?   if so where do i implement this?

If i made provided my code, would that help?

On Wednesday, May 21, 2014 10:57:02 AM UTC-4, Nathan wrote:

[chris....@motrixi.com]

Nathan,

I appreciate the advice,


I now have my banner

<div id="adContainer" style="width:320px;margin:0px;padding:0px;background-color:#ffffff;">
            <div id="normal" style="display:none;width:320px;height:50px;margin:auto;position:relative;top:0px;left:0px;">
                    <img width="320" height="50" src="http://d1brdofu76fhhj.cloudfront.net/XXXX/320_AA/320x50_ENG-banner.jpg" onclick="javascript:expand();"/>
               </div>
 
</div>


My expand function now points to the "Second Stage" that contains the form

function expand()
{  
    mraid.expand('https://c9.io/XXXXXX/workspace/testy/mini-iPhone.html');
   
}


Now my issue is that im losing my CSS when i load the page on expand();
- i only see bootstrap styles


Is there a reason for this? way to resolve this issue?


thanks

On Wednesday, May 21, 2014 10:57:02 AM UTC-4, Nathan wrote:

[Nathan Carver]

Hi Chris,

So I tried to use "stage" to identify the parts of your ad so that we would have vocabulary beyond the MRAID terms.

I simply think your ad has three stages. Banner. Form. Thank you.

If I were implementing it, I would put the banner stage in the original MRAID creative and use an mraid.expand(url) --- not an mraid.expand.

That URL would be a full HTML page you host that has the form. 

When you use mraid.expand(url), you are getting something very much like mraid.open(url), but without the browser chrome. This can make a website look like the expandable part of an ad.

That means that when the user clicks submit on your form and it redirects to your thank you page, it does so in the expanded container MRAID created for you.

"toggleLayer" is not part of the MRAID spec, but you may have found it in some of the test ads of the webtester project. These ads will soon be replaced with new ones from the IAB. You're welcome to adapt the code in those ad units. I just think that using mraid.expand(url) is simpler.

Thanks,

-Nathan

[Nathan Carver]

Chris,

I would recommend fully-formed paths to your CSS files, or inlining all the CSS onto your mini-iPhone.html page. Does that help?

Thanks,

-Nathan

[Nathan Carver]

Chris,

I'm thinking that you should not be limited by the one expand call. If you are supplying the url to mraid.expand(url) then when you submit and the form handler responds, it should simply load the thank you page in the existing space.

Happy to review the code if you want.

Thanks,

-Nathan