Trouble with local lazy loader & javascript invocation code

[Sperber]

Hey there,

I´m really not a developer but I guess my question fits best in here. What´s it all about:

Revive offers javascript invocation codes. These codes are the most recommendend as they even can be used for asynch requests. That´s great, but there is a downside with that because the javascript codes contain strings like: "<!--" and  " -->" . Why is this a problem? We are using an own local lazy loader to server different ads on different screen resolutions to make our ads mobile friendly. To serve a leaderboard on a mobile device with a resolution of 300px obviously makes no sense. So we are wrapping the ad locations with a lazy loader request and a conditional, that targets the screen resolution:

    <div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">
            <script type="text/lazyad">
            <!--
            [HERE GOES THE INVOCATION CODE]
            -->
           </script>
    </div>   

Of course, we have 4 different requeste per ad location to fit the most used screen resolutions. So we can cover almost 99% of all mobile visitors. Blows up the source code, but heck, it works and by now we couldn´t find a better solution we are capable to implement.

As you can see in the lazy loader code above, the lazy loader recognizes the start and end of the ad code by the elements "<!--" and "-->" . If you are now using a javascript invocation code and put this in the lazy loader request, it looks like this - and I guess the problem becomes visible to most of you:

    <div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">
            <script type="text/lazyad">
            <!--

<script type='text/javascript'><!--// <![CDATA[

    OA_show(1);

// ]]> --></script><noscript><a target='_blank' href='https://xyz.com/1/www/delivery/ck.php?n=96d7740'><img border='0' alt='' src='https://xyz.com/1/www/delivery/avw.php?zoneid=1&amp;n=96d7740' /></a></noscript>

            -->

 

           </script>
    </div>   

 

The request would now be interpreted by the lazy loader like this:

    <div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">
            <script type="text/lazyad">
            <!--

// <![CDATA[<!--<script type='text/javascript'>

OA_show(1);   

// ]]> -->

 

and would create a corrupt request, as the lazy loader would stop "reading" the rest of the request:

 

</script><noscript><a target='_blank' href='https://xyz.com/1/www/delivery/ck.php?n=96d7740'><img border='0' alt='' src='https://xyz.com/1/www/delivery/avw.php?zoneid=1&amp;n=96d7740' /></a></noscript>

            -->

           </script>
    </div>   

 

This has forced us all the time to only use iframe invocation tags, since they don´t utilize the "-->" string. Now we want to bundle the javascript requests from 3 to 4 per page to only one call - and unfortunal, this only works with the invocaion code format above with "-->" .

Has anyone an idea how to solve that problem?

Regards,

Sperber.

[Erik Geurts]

My recommendation would be to stop using that custom lazy loading you developed and instead start using the built-in asynchronous tags that have been part of Revive Adserver for more than 1.5 years. Those async tags already automatically bundle all ad zones into a single ad server call.

[Sperber]

Hi Erik,

may be you´ve missed, that we are not using the lazyloader with asycns in mind. Revive could handle this pretty neat by itself. We are using the loader to show different ads (regarding px size) for different screen resolutions. With the lazy loader it reloads the ad location, i.e. changing a phone from landscape to portrait, and comes up with a now scaled ad that fits best to the new screen resolution - without having the user to reload the whole page just because the ads overlap the new screen resolution, breaking the layout or making the text unreadable.

In short - we have to use the lazy loader for this, since there seems to be no alternative to have the mobile styles mobile friendly over all different types of resolutions and devices.

[Erik Geurts]

Perhaps look at a different solution for that device and screen size detection. I've heard people mentioning mobiledetect.net.