wiley / madgex-lazy-ads Goto Github PK

Deliver synchronous ads asynchronously, without modifying the ad code. Also, conditionally load ads for responsive websites using a media query or the ad container's dimensions.

License: MIT License

JavaScript 76.15% CSS 4.02% HTML 19.83%

madgex-lazy-ads's Introduction

Lazy Ads

Deliver synchronous ads asynchronously, without modifying the ad code. Also, conditionally load ads for responsive websites using a media query or the ad container's dimensions.

Demo

Here's a little demo. It lazily loads and unloads each ad depending on the environment, a green background and the ad should load (a timestamped image instead of real ad in the demo), red and it will unload (if loaded): Demo

The problem

Ads have long been the elephant in the room in regards to Responsive Web Design, with few providers supporting the fluid, flexible layouts that define responsive websites. Here at Madgex we deal with over 30 ad providers and many show no signs of supporting responsive layouts.

Approach 1 - Hide the ad container using CSS

It's trivially simple to hide the ad using CSS if a media query condition is met. However, this doesn't prevent the ad code from executing. An ad impression is still recorded, even if the ad isn't actually visible. Furthermore, potentially pointless network round-trips to load the ad content would still take place. This is detrimental to the site's speed and performance, especially on a mobile device.

Approach 2 - Force the ads to be flexible

Forcing images or flash objects to be flexible quickly creates illegible ads on small screened devices. Furthermore, some ad providers wrap ads in multiple layers of unsemantic, inline pixel width defined elements. These can be difficult (or highly brittle, or outright impossible) to make flexible.

Approach 3 - Wait for ad providers

Seeing as most ad providers are still using the 90's-web document.write as a delivery technique, we're not holding our breath.

Our proposed approach

Leave ads scripts intact, but wrap them to prevent inline execution. Place load criteria on the element wrapping the ad, either using dimensions, or a media query. On DOMready, lazily inject the ads if the criteria is met.

Putting it all together

The lazy ads loader sits on top of a couple of polyfills & tried and tested open source projects:

PostScribe by Krux Digital, Inc. overrides document.write to provide async support.
indexof polyfill for indexOf support on older browsers (via MDN)
Media.match media queries polyfill for older browsers.
domReady a tiny, sturdy DOMReady implementation for older browsers.

Once minified & gzipped the script weighs in at ~6.5KB.

An additional benefit - performance

This asynchronous approach to loading ads also provides a fair performance boost for the page content as document.write is no longer blocking rendering. This performance bottleneck has been widely documented, yet ad providers continue to use the technique.

Installation

Install via npm:

npm install --save lazy-ads

Basic usage

Load the script.

  <script src="../path_to/lazyad-loader.min.js" async></script>

Wrap the ad script to prevent it from running inline. The data-lazyad attribute is a required hook.

  <!-- wrap all ad scripts in a lazyad div & lazyad script  -->
  <div class="ad" data-lazyad>
    <script type="text/lazyad">
      <!--
        AD SCRIPT HERE (including wrapping <script> tag)
      -->
    </script>
  </div>

Important: The HTML comments wrapping the ad script are required. They prevent the ads closing </script> tag from closing our text/lazyad script tag prematurely.

Adding conditions

Media query

This ad will only load if the viewport is a screen & at least 800px wide on load.

  <!-- wrap all ad scripts in a lazyad div & lazyad script  -->
  <div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">
    <script type="text/lazyad">
      <!--
        AD SCRIPT HERE (including wrapping <script> tag)
      -->
    </script>
  </div>

Container dimensions

This ad will only load if the ad container is at least 728px x 90px on load.

  <!-- wrap all ad scripts in a lazyad div & lazyad script  -->
  <div class="ad" data-lazyad data-adwidth="728" data-adheight="90">
    <script type="text/lazyad">
      <!--
        AD SCRIPT HERE (including wrapping <script> tag)
      -->
    </script>
  </div>

Support

IE7 and up, and modern browsers (Chrome, FF, Opera etc).

How to build

You need to have Node.js & NPM installed before you start.

If you don't have the Grunt command line interface, install it as a global package

npm install -g grunt-cli

Clone the lazy-ads repo

git clone https://github.com/madgex/lazy-ads.git

CD into the directory

cd lazy-ads

Run grunt to create the distribution packages in the dist/ directory

grunt

Feedback

Although we've had initial success in this approach we're keen to hear your feedback.

MIT license

Lazy Ads is released under the MIT license.

madgex-lazy-ads's People

Contributors

Stargazers

Watchers

madgex-lazy-ads's Issues

HTML comments in ad-code

Hey guys,

I'm using lazy-ads on wihel.de and in the whole I'm very happy with it. But i noticed that some html-comments from the advertisers are displayd within the delivery with lazy-ads. I asked them if they can prevent this behaviour and they told me, that they put these comments in the way it should be, e.g.

They told me also that it looks like lazy-ads removes the "!" from these comments and then these comments are presented on my site. Is there any setting or magic I can do so the html-comments from the advertisers will work as expceted and are not changed (so they are not appearing on the site)?

add or remove after resize

I have to load different ads in portrait-mode than in landscape mode of tablets and smartphones.

I'm already using https://github.com/JoshBarr/on-media-query, so I could trigger any kind of event to get lazy-ads to check again.

Is there something?

Fails to Render DFP Ad

I'm trying to implement Lazy Ads in a simple test environment, but can't seem to get a successfully rendered DFP ad.

Here's what I've got at the moment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lazy Ads Test</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/lazyad-loader.min.js" async></script>
  <script>
    (function() {
    var useSSL = 'https:' == document.location.protocol;
    var src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
  </script>
  <script>
    googletag.defineSlot('/XXXXXXXX/Homepage_Leaderboard', [728, 90], 'homepage_leaderboard').addService(googletag.pubads());
    googletag.enableServices();
  </script>
</head>
<body>
  <h1>Lazy Ads Test</h1>
  <div class="ad" data-lazyad>
    <script type="text/lazyad">
      <!--
        <script>googletag.display("homepage_leaderboard");</script>
      -->
    </script>
  </div>
</body>
</html>

And here is the rendered div:

<div class="ad" data-lazyad="" data-lazyad-loaded="true">
    <script type="text/lazyad">
      <!--
        <script>googletag.display("homepage_leaderboard");</script>
      -->
    </script>
  <script>googletag.display("homepage_leaderboard");</script>
</div>

If I update the div to include an ID of "homepage_leaderboard", the ad renders but does so inline without any reduction in page load time.

It seems to me that the HTML comments don't fully wrap the googletag script as it seems to be closing the opening lazy ads script.

Any thoughts? Thanks very much in advance.

Support for Adcash footer script

Found your script and it seems really awesome!
I've been checking it on multiple advertisers and different type of ads, and they all work perfect.

However, I can't get Adcash footer script to work, and can't figure out why.

  <div class="ad" data-lazyad>
    <script type="text/lazyad">
    <!--
<script data-cfasync="false" type="text/javascript" src="http://www.tradeadexchange.com/a/display.php?r=1016629"></script>
    -->
    </script>
  </div>

(The script works fine without lazy-ads)

Any help will be appreciated.

Wrong package.json

Can you add new field required by NPM: "main": "dist/lazyad-loader.js" ?
https://github.com/substack/browserify-handbook#how-node_modules-works

add class to loaded ad

When an ad is loaded it would be useful if the surrounding div gets an additional class that marks the ad as loaded.
So you can add some css only to loaded ads.

<div class="ad loaded" data-lazyad>…</div>

Can this be used w/ html instead of a script?

I have some iframe ad tags I'd like to drop in there, but it doesn't seem to work.

lazy-ads not working with multiple Google AdSense placeholders of same format, Solution?

When you have three placeholders of Google AdSense, the ad snippet you place there from Google is always the same.
However, if you wrap each of those snippets into a lazy-ad, only the first one executes...

In the console, I get these errors:
Uncaught TypeError: Cannot read property '1' of null
(anonymous function)

it is a resource that gets loaded from
http://googleads.g.doubleclick.net/pagead/adview?ai=C5Z9jY9YnVfehDerx7QaIvY…6sq_AQcZfTwpN0SRatdIWXmV0WUgAb_vM3Rpdegx8QBoAYh2AcA&sigh=7Ec_ESyXWa0&vis=1

Anyone having used lazy-ads with multiple AdSense placeholders of same format (e.g. three times 300x250) ?

Does lazy ads affect impressions?

I'm, as a marketing professional, interested to know if and how lazy ads affect impressions count?

Parent div size rules

First off, fantastic plugin. Wish everybody would use this.

Is there any plans to add more flexibility, for example if the parent div is a min/max width, then show the proper ad. The media query option works well only if the ad is really in the body.

Thanks!

Async Google AdSense Code inside lazy-ads?

Anyone having experience whether it makes sense to wrap the async Google AdSense snippets inside the lazy-ads? I would say yes because google async only means it runs in parallel to the page load, inside the lazy-ads wrapper it would load after page load, correct?

"<" sign after every ad. PUBMATIC tags

Hi, I have tried all I could yesterday but I could not figureout why it shows < under every ad I have placed.
I have checked in Developer Tools that it's from Pubmatic Tag, but without your code embeding their ads tag it is all good, without "<".

http://newsflashnews.com

I can't seem to get it to run.

You can see a JS Bin here:
http://jsbin.com/hahofuja/1/edit?html,output

Would you be able to tell me if I have the syntax set incorrectly?

You can contact me on Twitter @pixelfuture if you would like. Thank you!

Please add logging to debug only

ln 2030: log('Injecting lazy-loaded Ad', el);
ln 2146: log('Lazy-loaded count: ', counter, timeToComplete);

Best practises

Hi mate,
Interisting looking plugin. Any best practices in mind for imlementing with Google analytics scripts?
Thx!

<script> tag inside lazy <script> tag

Hi,
some advertisers provide just a single line for inserting their ads from their adservers, e.g.

<script language="javascript" type="text/javascript" src="..."></script>

At a first try this did not work out, the error was "$ is not defined".
Do I have to replace the one-liner by something else like a function calling the script of the advertiser?

Thanks for any hints.

tagname is not defined

When I use the current version 1.0.1 from 01-04-2014 I get "Uncaught ReferenceError: tagname is not defined"

When I use the version from March 14, (7977611) it all works.

Another thing:
In the test/index.html the lazyad-loader.js get's included. This file doesn't exist in 1.0.1. It's renamed to lazyads-loader.js, with an s.

Use getBoundingClientRect() where available

Use getBoundingClientRect().width where available (modern browsers) fallback to offsetWidth.

HTML comments in ad tag

Due to stripCommentBlock HTML comments within ad tags will not work. This is because all instances of  are removed instead of just the first/last.

I'm coming with a PR for this in a few minutes.

Using with Google DFP - performance question

Been on a performance kick lately and thus the async loading of lazy-ads is great. I'm just wondering if there's a suggested way to handle Google DFP ads.

If I async load lazy-ads in the head, I need to load DFP's code in the head too otherwise I get a ReferenceError: googletag is not defined error from the googletag clls in the html.

I don't want to load the DFP script src in the head to avoid blocking and an http request, but if I inline it in the head, we're starting to get code bloat.

Is there any way to async lazy ads and the DFP code without the lazy-ads wrapped googletag calls firing off reference errors?

Thanks.