JS - Dynamic display of a zone in the page.

remy_php · December 10, 2018

Good morning, everyone.

I need to dynamically display a zone in an existing page.

Let me explain:

1 ) The user loads a page from the site.
The zones present with the invocation code are loaded.

2 ) Now, following user actions or other events, I need to display a new advertising zone.

But inserting the invocation code in the page is not enough...

$('.advertising_slot_result').append('<ins data-revive-zoneid="17" data-revive-id="******************************"></ins>');

How to do this?

Obviously, I want the display and click count on this new area to be operational...

Edited December 10, 2018 by remy_php
add exemple

remy_php · December 11, 2018

Bonjour,

I propose the following solution .

1) Use the invocation code at site level

https://documentation.revive-adserver.com/display/DOCS/Invocation+Code:+Website+Level

<head>
    <!-- ... -->
    <script type='text/javascript' src='http://revive.lxc/revive/www/delivery/spcjs.php?id=1'></script>
</head>

2) This gives the possibility to use the OA_show(zone_id) function to invoke the zones

    function OA_show(name) {
        if (typeof(OA_output[name]) == 'undefined') {
            return;
        } else {
            document.write(OA_output[name]);
        }
    }

But we're not going to use it!

What interests us here is the OA_output

3) We write a small function that will retrieve the html code in OA_output and insert it neatly into our page at the desired location.

MY_REVIVE.show = function($parent, zone_id) {
    $parent.append(EDB_REVIVE.getHtml(zone_id));
};

MY_REVIVE.getHtml = function(zone_id) {
    var output = OA_output;
    if (typeof(output[zone_id]) === 'undefined') {
        console.error("Zone " + zone_id + " n'existe pas.");
        return '';
    } else {
        return output[zone_id];
    }
};

Example of use:

MY_REVIVE.show($('#add_slot'), 15);

What do you think of that?

Edited December 11, 2018 by remy_php

tom83 · February 7, 2023

Hi,

i also wanted to place ads into my website depending on the available screen (mobile or desktop). Therefore I have created two zones (one with 320x50 and the other with 800x250).

In my HTML I put the following code:

adUnit = document.getElementById("revive-responsive-top");
adWidth = adUnit.offsetWidth;

    if ( adWidth >= 800 ) {
      /* Billboard 800x250 */
       adUnit.innerHTML = '<ins data-revive-zoneid="18" data-revive-target="_blank" data-revive-id="xxx"></ins>';
    } else {
      /* Mobile Banner 320x50 */
      adUnit.innerHTML = '<ins data-revive-zoneid="10" data-revive-target="_blank" data-revive-id="xxx"></"></ins>';
   }

</script>
<script async src="//www.example.de/adserver/www/delivery/asyncjs.php"></script>
</div>

After that I have the following result: Only the 320x50 ad is shown, even if there is a desktop > 800.

What do I have to do in order that there is a selection between 320x50 and 800x250?

Do I have to do further changes in the Revive Script and if so, please can you instruct what and where I have to modify something.

Thanks in advance.

Best

Tom

stephan · February 17, 2023

tom83 · February 21, 2023

Hi stephan,

thanks for your reply. It does not work and I have already applied the changes of the link to my script. It is somehow sad, because there is nowhere in the web a detailed instruction how to integrate the display of zones according to the size of the screen and how to make them work.

I also tried a second alternative as follows, but here both zones/ads are just displayed next to each other:

</div>

</div>

Please help!!! I do not want to have large banners in my mobile screen anymore.

Best

Tom

stephan · March 11, 2023

Hello Tom,

you have to show/hide the banner via css.

With my patch only visible banner are initialised.

tom83 · March 26, 2023

Hello stephan,

I think you mean the first version I mentioned in the the thread, right?

adUnit = document.getElementById("revive-responsive-top");
adWidth = adUnit.offsetWidth;

    if ( adWidth >= 800 ) {
      /* Billboard 800x250 */
       adUnit.innerHTML = '<ins data-revive-zoneid="18" data-revive-target="_blank" data-revive-id="xxx"></ins>';
    } else {
      /* Mobile Banner 320x50 */
      adUnit.innerHTML = '<ins data-revive-zoneid="10" data-revive-target="_blank" data-revive-id="xxx"></"></ins>';
   }

</script>
<script async src="//www.example.de/adserver/www/delivery/asyncjs.php"></script>
</div>

Can you explain where and what I have to do in the CSS in order to acomplish the show/hide?

Do I also have to integrate more script into Revive than the one above?

That would be of great help and I believe, not only for me.

Thanks in advance.

Best

Tom

stephan · April 10, 2023

Whats the problem with showing and hidding via CSS?
.xxx { display: none}
@media screen and (min-width: xxxpx) {
.xxx { display: block}
}

Sign In

JS - Dynamic display of a zone in the page.

Recommended Posts

remy_php

remy_php

tom83

stephan

tom83

stephan

tom83

stephan

Join the conversation

Browse

Activity

More Resources