How To Serve Responsive Ads?

andrewatfornax · September 12, 2018

Yep, no reason why it would not from my point of view.

AngryWarrior · October 16, 2018

Yeah looking for this too!

This should really be something that is implemented into Revive Ad server with responsive ads. I hope the developers are considering this...

remy_php · November 21, 2018

Hello, everyone.

I also try to play with the responsive

My strategy is as follows:

For each advertising slot on the site I define 2 zones
One for the mobile, one for the rest.

Once the page is loaded, an js algo defines whether to display mobile ads or others.
This algo launches the showAdvertisings() function

$(document).ready(function() {
    iniAdvertisings();
});

function iniAdvertisings()
{
    showAdvertisings(isMobile());
}

function isMobile()
{
    return true; // TODO
}

/**
 * Sélectione quel publicités doivent être affichée.
 *
 * @param mobile
 */
function showAdvertisings(mobile)
{
    $('.advertising').each(function() {
        var $div = $(this);
        if ($div.data('mobile') === mobile) {
            showAdvertising($div);
        }
    });
}

/**
 * Base on javascript invocation code
 *
 * @param $div
 */
function showAdvertising($div) {

    /*
    <!-- Revive Adserver Balise javascript - Generated with Revive Adserver v4.1.4 -->
       var m3_u = (location.protocol=='https:'?'https://revive.lxc/revive/www/delivery/ajs.php':'http://revive.lxc/revive/www/delivery/ajs.php');
       var m3_r = Math.floor(Math.random()*99999999999);
       if (!document.MAX_used) document.MAX_used = ',';
       document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
       document.write ("?zoneid=12");
       document.write ('&amp;cb=' + m3_r);
       if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
       document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
       document.write ("&amp;loc=" + escape(window.location));
       if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
       if (document.context) document.write ("&context=" + escape(document.context));
       if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
       document.write ("'><\/scr"+"ipt>");
     */

    var m3_r = Math.floor(Math.random()*99999999999);
    if (!document.MAX_used) document.MAX_used = ',';
    var charset = document.charset ? document.charset : (document.characterSet ?document.characterSet : '');

    var url = (location.protocol==='https:'?'https://revive.lxc/revive/www/delivery/ajs.php':'http://revive.lxc/revive/www/delivery/ajs.php');
    var params = {
        'zoneid': $div.data('zone_id'),
        'loc': escape(window.location),
        'cb': m3_r
    };

    if (document.MAX_used !== ',') {
        params.exclude = document.MAX_used;
    }
    if (charset) {
        params.charset = charset;
    }
    if (document.referrer) {
        params.referer = escape(document.referrer);
    }
    if (document.context) {
        params.context = escape(document.context);
    }
    if (document.mmm_fo) {
        params.mmm_fo = 1;
    }

    var query = jQuery.param( params );
    var src = url+'?'+query;

    console.log('params: ',params);
    console.log('url: ', url);
    console.log('query: ', query);
    console.log('src: ', src);

    loadScript(src, $div);
}

/* Does not work */
function loadScript(src, $parent)
{
    var sNew = document.createElement("script");
    sNew.async = true;
    sNew.src = src;
    //var s0 = document.getElementsByTagName('script')[0];
    //s0.parentNode.insertBefore(sNew, s0);
    $parent.append($(sNew));

    // var $script = $('<script type="text/javascript">');
    // $script.attr('src', src);
    //
    // $parent.append($script);
}

But before asking the question of the isMobile() algo.
It is my showAdvertising() function that causes me problems.

I was inspired by the javascript invocation code but there is something wrong.

My question is: How to initialize an advertising banner dynamically?

============================

Here is another strategy based on Asynchronous JS Tag invocation code.

The idea here is to let the pub be initialized again. But they are hidden.
The mobile detection algo/descktop will only have to make them visible.

(Which is very easy ? )

But I wonder if that's not a big problem. Because the ads are displayed twice! and therefore are counted twice?
How is Revive handling this?

Edited November 21, 2018 by remy_php

remy_php · November 21, 2018

Otherwise I can take inspiration from the noscript part of the javascript invocation code.

What does the JS part bring more?

remy_php · December 10, 2018

remy_php · December 11, 2018

Bonjour à tous.

I think I've found a way to display a zone dynamically.

All that remains is to choose which ads to display depending on whether you are on mobile or not.

/**
 * https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
 *
 * @returns boolean
 */
MY_REVIVE.isMobile = function ()
{
    var isMobile = false; //initiate as false
    // device detection
    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
        isMobile = true;
    }

    var oMediaQueryList = window.matchMedia("only screen and (max-width: 760px)");
    if (oMediaQueryList && (typeof(oMediaQueryList) === 'object')) {
        isMobile = oMediaQueryList.matches;
    }

    return isMobile;
};

klaush · January 7, 2019

Ok, it is not so difficult to serve responsive ads with pictures/graphics. You only have to make the picture/graphic responsive with some code and save it with "do not alter html":

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
max-width: 728px;
height: auto;
}
</style>
</head>
<body>

</body>
</html>

remy_php · January 8, 2019

Salut klaush

Thank you for your contribution.

Your solution can probably be suitable for most use cases.

In my case I should never change the size of the banners.
And the banners to display are not the same on mobile and desktop.

So I'm forced to make terrible scams. ( https://forum.revive-adserver.com/topic/5207-js-dynamic-display-of-a-zone-in-the-page/ )

mdmcginnis · December 10, 2024

I am now successfully serving mobile ads (300 x 250 px) on mobile devices and banner ads (728 x 90 px) on wider screens:

Sign In

How To Serve Responsive Ads?

Recommended Posts

andrewatfornax

AngryWarrior

remy_php

remy_php

remy_php

remy_php

klaush

remy_php

mdmcginnis

Join the conversation

Browse

Activity

More Resources