Use Different MRAID Banner Formats

With 3D Cube banners, the visitor can reveal additional content in a 3D effect.

Add the following code and define values to your banner to have the 3D cube effect:

                  new Adform.Cube({
                                vertical: false,
                                autoRotate: 3000,
                                swipeEventStep: 60,
                                customNavigationIcon: false, 
                                swipeFinger: "assets/finger.png",
                                preventPageScrolling: false,
                                assets: [
                                        "assets/wall1.png",
                                        "assets/wall2.png",
                                        "assets/wall3.png",
                                        "assets/wall4.png"
                                ]
                        });

To see a full code example on Adform Studio:

With a 3D cube store locator, you can add a map with a store location to one of the cube's walls. The viewer can swipe or click the 3D cube to reveal the store's map.

To add a store locator to one of the walls on your 3D cube, in the assets array, add custom HTML:

                 new Adform.Cube({
                                vertical: false,
                                autoRotate: 3000,
                                swipeEventStep: 60,
                                customNavigationIcon: "assets/arrow.png",
                                swipeFinger: "assets/finger.png",
                                preventPageScrolling: false,
                                assets: [
                                        "assets/wall1.png",
                                        {
                                                type: "html",
                                                src: "assets/store-locator.html",
                                                scrollableElement: "overlay",
                                                navigation: true
                                        },
                                        "assets/wall3.png",
                                        "assets/wall4.png"
                                ]
                        });

To see a full code example on Adform Studio:

With a slice box, you can split the different sides of a banner into customizable rows. Each row reacts independently when the animation starts and creates a visually appealing transition.

To add a slice box to your 3D cube banner, insert the following code and define the values.

var slicedUnit = new SlicedUnit({
    width: 300,
    height: 250,
    minScale: 0.95,
    sliceCount: 10,
    sliceSideCount: 4,
    sliceRotationDuration: 0.6,
    sliceRotationDelay: 0.1,
    shadow: '#006496',
    autoRotationDelay: 3,
    autoRotationTimeout: 25,
    useVerticalSlices: false,
    useVerticalRotation: false,
    useSinglePerspective: true,
    useOffsetCompensation: false,
    content: [
        {src: 'assets/Panel_1.png', onClick: Adform.getClickURL('clickTAG1')},
        {src: 'assets/Panel_2.png', onClick: Adform.getClickURL('clickTAG2')},
        {src: 'assets/Panel_3.png', onClick: Adform.getClickURL('clickTAG3')},
        {src: 'assets/Panel_4.png', onClick: Adform.getClickURL('clickTAG4')},
        {src: 'assets/Panel_5.png', onClick: Adform.getClickURL('clickTAG5')}
    ],
    className: 'slicedUnit'
});

To see a full code example on Adform Studio:

Outstream is a video ad that starts playing automatically (without any visitor interaction) once the banner loads completely or when it's more than 50% visible. By default, the video sound is muted, but if a viewer clicks the video, the video expands to full screen mode with the sound enabled. The viewer can exit full screen mode by clicking a close button, which appears in the expanded state.

To see a full code example on Adform Studio:

With dynamic content, you can have the ad content change without needing to create a new banner. Every time a visitor refreshes the web page, the server loads randomly predetermined content in the same ad space.

Insert the following script in the <head> element of the container:

<script src="http://s1.adform.net/banners/scripts/mobile/dco.js"></script>

Use the following script to create dynamic content:

<script type="adform/template" data-client="4790" data-template="11780" data-messages="82993283">
    {{#messages}}
        <div >
            <div id="text1" class="text">{{text1}}</div>
            <div id="text2" class="text">{{text2}}</div>
            <div id="text3" class="text">{{text3}}</div>
        </div>
    {{/messages}}
</script>

Keep in mind that:

To load more ad messages, manipulate text data, or call a function after AdMessage loads, include the following code:

Adform.DCO.loadMessages(1, function(data, total) {//total returns how many AdMessages there are in total
  data.messages[0]['text3']  = '!'; //text var manipulation
  return function () { 
    //action when admessage is loaded e.g. start animation
  }
});

To see a full code example on Adform Studio:

You can use Adform's product recommendation solution (fee-based dynamic content optimization, DCO) to show several products at once in a single banner. The visitors first see the products that they were most interested in.

Insert the following script in the <head> element of the container:

<script src="http://s1.adform.net/banners/scripts/mobile/dco.js"></script>

Use the following script to create dynamic content:

<script type="adform/template" data-client="4790" data-template="4944" data-messages="" data-engine="2">
    {{#messages}}
        <div class="product">
            <div class="product_name">{{product_name}}</div>
            <div class="product_price">from <span>{{product_price}}</span></div>
            <img class="product_image" src="{{product_image}}">
            <a onclick="mraid.open('{{$link}}');" class="cta">Find out more</a>
        </div>
    {{/messages}}
</script>

Keep in mind, that:

to see a full code example on Adform Studio:

With the scratch effect, visitors 'scratch' the predefined area and reveal the ad message.

To add the scratch effect to a banner, insert the following code snippet and define the values:

Adform.Scratch.init({
        width: 0, 
        height: 0, 
        image: "assets/image.jpg",  
        percentage: 75, 
        radius: 30,
        delay: 0, 
        zIndex: 0, 
        intensity: 0.6, 
        fadeDuration: 500 
});

To see a full code example on Adform Studio:

A slider banner displays several images (slides) that transition smoothly from one to another. The images change after a defined period of time or after a specified viewer interaction.

To have your banner display slides, use this code snippet and define the values:

new Adform.Slider({
        vertical: true,
        pagination: true,
        autoSlideTime: 3000,
        slideFinger: "assets/finger.png",
        preventPageSwiping: false,
        assets: [
                "assets/slide1.png",
                "assets/slide2.png",
                "assets/slide3.png",
                "assets/slide4.png"
        ]
});

To see the full code example on Adform Studio:

By obtaining a visitor's geolocation, you can show custom functions (such as locating the nearest store or displaying different text or images).

The geolocation information includes approximate latitude and longitude. You can access this information by entering the following line of code:

var location = Adform.getLocation() // Returns {lat: Number, lng: Number} object

Markers can be loaded directly through an object or through a JSON file:

         var markers;
                var req = new XMLHttpRequest();

        req.onreadystatechange = function() {
            if (req.readyState == 4 && req.status == 200) {
                markers = JSON.parse(req.responseText);
            }
        };
        req.open('GET', 'locations.json', true);
        req.send();

JSON file, or a simple object should contain latitude, longitude, and a title for each marker:

{
    "title": "Adform Vilnius",
    "latitude": 54.694997,
    "longitude": 25.298734
},
{
    "title": "Adform Copenhagen",
    "latitude": 55.672294,
    "longitude": 12.588974
}

Polite loading delays the loading of creative assets (such as images) until the web page has finished loading.

To implement the polite load feature on an MRAID banner, you must insert the code manually: