Google Chrome Ad Blocking

What You Need To Know

Google has teamed up with the Coalition for Better Ads and aims to force all Internet publishers to adopt their standards to make advertising more user friendly in early 2018.

This will be accomplished by releasing a new version of Chrome that will automatically block all ads on web sites that choose not to adopt the better ads standards. We are already aware of some publishers receiving early notifications from Google Webmaster Tools that their site has compliance issues. In addition to this, we have learned that when a compliance issue is detected webmasters will be given a 30-day grace period to resolve the issue before Chrome will start blocking their ads.

While it is your choice to comply or not, we believe that choosing non-compliance would be disastrous for most publishers since Chrome currently commands a 60% browser market share and you could face the loss of 60% or more of your ad impressions.

You might be asking why Google is doing this and the reason is clear: to combat ad blocking. The primary reason why users install ad blockers is pop-up ads and prestitial ads that cover up page content. Some of the more offensive ads even force users to wait up to 10 seconds before allowing users to dismiss them. Google has come to the conclusion that eliminating these types of unwanted ads from the Internet will lessen the demand for users to install ad blockers. I suppose time will tell if this risky gamble pays off, but one thing is for sure: we're all in this grand experiment together and we stand ready to do everything in our power to help you get through it.

Affected Ad Formats

One of the most interesting aspects of this situation is that the better ads standards are still very new and evolving, so they may change over time but right now we know for certain that the following ad formats are subject to compliance issues:

Concerning Large Mobile Ads

Another potential concern is large ads that take up more than 30% of the screen height on mobile phones. This is somewhat alarming as the most popular mobile 300x250 size exceeds 30% of the screen height of even the most modern phones. As we have yet to hear of Google flagging any 300x250 ads, however, we believe they may be making a concession on this rule. What we can say for certain though is that they have flagged larger 300x600 ads on mobile so those should almost certainly be replaced with 300x250 or possibly even 300x100 ads to remain compliant.

Lightboxes and Overlays

There is no doubt that many publishers will face compliance issues with our lightbox or overlay formats. They have been incredibly popular with advertisers because they are highly effective. This is why it's so unfortunate that we must suggest you discontinue using them on tablets and mobile phones. Fortunately that is easy to do with our responsive zone hiding feature which allows you to hide zones on tablets and mobile phones.

If you wish to continue running them on desktop there is one important thing you must understand, which is that site visitors must not be able to see the content of your page before the lightbox or overlay loads even if for a fraction of a second.

We're aware of one way that you can ensure the lightbox or overlay always appears before you page content becomes visible. At the very top of your page source code, what you must do is initialize a splashscreen that fills up the entire browser window. It's important that the splashscreen does not contain any text because Google actually checks that the lightbox or overlay does not cover up any text. Taking that into consideration you should stick with a minimalist approach that's just a colored background with your logo centered over it and perhaps an infinite progress icon.

The key to making this technique work is that you need have some JavaScript in your page that can be called when the lightbox or overlay is no longer visible so that you can make your content visible. Fortunately this is an easy problem to solve. You can simply include a global lightboxCloseCallback() or overlayCloseCallback() function in your page code and it will be executed when the lightbox or overlay is no longer visible.

For a live example of this technique in action you can take a look at our lightbox and overlay examples pages, which both implement a basic spinner splashscreen.

To accomplish that the following code is inserted at the very top of the page immediately after the opening body tag:

<style type="text/css">
  body { overflow: hidden; }
  .splashouter {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white;
  }
  .splashinner {
    position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px;
  }
  .splashloader {
    border: 16px solid #cccccc; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<div id="splashscreen" class="splashouter">
  <div class="splashinner">
    <div class="splashloader"></div>
  </div>
</div>

<script type="text/javascript">
  var lightboxCloseCallback = function() {
    document.getElementById('splashscreen').style.display = 'none';
    document.body.style.overflow = 'visible';
  };
  var overlayCloseCallback = function() {
    document.getElementById('splashscreen').style.display = 'none';
    document.body.style.overflow = 'visible';
  };
  window.addEventListener('load', function() {
    setTimeout(
      function() {
        if ((window._avp && !window.AVP) || (!document.getElementById('lightbox') && !document.getElementById('overlay'))) {
          document.getElementById('splashscreen').style.display = 'none';
          document.body.style.overflow = 'visible';
        }
      },
      1000
    );
  });
</script>

As you can see the browser scrollbars are disabled while the entire browser window is simply filled with a white background and the spinner is centered in the middle of it. You barely even notice it being there before the lightbox or overlay opens right? Well, that brief moment where your page content is invisible thanks to the splashscreen covering it up is what makes the difference between compliance and non-compliance.

Two New Effects

Initially when we started looking at the better ads guidelines we thought that the lightbox and overlay were pretty much dead. That turned out not to be the case once we were made aware of above workaround. However, by that time we'd already developed two new effects that we were considering as replacements for the lightbox and overlay. Since we had already built them we figured why not release them?

Castaway

Castaways are best utilized for large masthead banners that appear for a limited amount of time and disappear automatically or if a visitor manually closes them. However, they can also be effectively deployed between content in articles if paired with our in-view technology. What's really great about castaways is that they push content down rather than covering it up, so they are very user friendly.

To learn more about the castaway you might like to check out a live example and we've also put together a tutorial showing how to generate the necessary coding to display them.

Smoke Screen

The smoke screen is very similar to the castaway, but it does actually cover up content. We just said not to do that though right? Technically the smoke screen much like the crawler and the shoutbox is a large sticky ad. As long as it does not exceed 30% of the screen height you will achieve compliance. We do, however, advise against running this type of ad on mobile phones given the inherent limitation of their screen height. For mobile it just makes more sense to utilize the crawler, which as noted above is compliant so long as it does not exceed 100px in height.

To learn more about the smoke screen you might like to check out a live example and we've also put together a tutorial showing how to generate the necessary coding to display them.

Final Thoughts

That was tough to digest and I apologize for that, but I hope this article has sufficiently informed you enough to develop a plan for your web site going forward into 2018. The exact release date of the Chrome update is currently unknown and the only confirmation we have from Google is that it will be in early 2018 but no sooner. As things stand, we're recommending you consider January 1, 2018 as the deadline to be safe. There is no harm in being ahead of the game if it turns out to be later than that.

Have Questions?

If you have any questions please contact support and we'll be happy to help in any way we can. Feel free to comment below as well. In fact, if you've found some additional information about these upcoming changes that would be a great way to share it with others users who may also benefit from it.