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

Link to comment

Share on other sites

remy_php

Link to comment

Share on other sites

tom83

Link to comment

Share on other sites

stephan

Link to comment

Share on other sites

tom83

Link to comment

Share on other sites

stephan

Link to comment

Share on other sites

tom83

Link to comment

Share on other sites

stephan

Link to comment

Share on other sites

Join the conversation

Browse

Activity

More Resources