Jump to content
bryanwoj

How To Serve Responsive Ads?

Recommended Posts

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.

 

<div class="advertising_slot advertising_top">
    <div class="advertising" data-zone_id="1" data-mobile="false" data-revive-id="*"></div>
    <div class="advertising" data-zone_id="12" data-mobile="true" data-revive-id="*"></div>
</div>

 

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.

<div class="advertising_slot advertising_top">
    <div class="advertising" data-zone_id="1" data-mobile="false"
style="display:none">
        <ins data-mobile="false" data-revive-zoneid="1" data-revive-id="*" ></ins>
    </div>
    <div class="advertising" data-zone_id="12" data-mobile="true"
style="display:none">
        <ins data-mobile="true" data-revive-zoneid="12" data-revive-id="*" ></ins>
     </div>
</div>

 

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 by remy_php

Share this post


Link to post
Share on other sites

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;
};

 

Share this post


Link to post
Share on other sites

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>


<a href="link" target="_blank" /a><img src="picture" alt="Sigma" class="responsive" width="728" height="90">

</body>
</html>

Share this post


Link to post
Share on other sites

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/ )

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...