How to Display Alternate Content to AdBlock Users

Ad blocking software like AdBlock and Ghostery are installed on millions of computers and thus affecting the bottom line of web publishers who are dependent on online advertising networks like Google AdSense to pay their bills. It takes time and effort to maintain a website but if the visitors are blocking ads, the revenues are reduced. Ars Technica says this is equivalent to running a restaurant where people come and eat but without paying.

As a website publisher, you have a few options. You can detect Adblock on the visitor’s computer and hide your content if the ads are being blocked. That’s going too far but you may ask for donations (OK Cupid does this) or request social payments (Like or Tweet to view the whole page) from AdBlock users.

The other more practical option is that you display alternative content to people who are blocking ads. For instance, you may display a Facebook Like box or a Twitter widget in the place of ads, you may run in-house ads promoting articles from your own website (similar to Google DFP) or you may display any custom message (see example>>>)

to the visitor.

Before we get into the implementation details.  It contains regular AdSense ads but if you are using an Ad blocking software, a Facebook Like box will be displayed inside the vacant ad space.

It is relatively easy to build such a solution for your website. Open your web page that contains Google AdSense ads and copy-paste the following snippet before the closing

tag. The script looks for the first AdSense ad unit on your page and if it is found to be empty (because the ads are being blocked), an alternative HTML message is displayed in the available ad space.

You can put a Facebook Like box, a YouTube video, a Twitter widget, an image banner, a site search box or even plain text.

<script> 
  
  // Run after all the page elements have loaded
  window.onload = function(){ 
  
    // This will take care of asynchronous Google ads
    setTimeout(function() { 
      
      // We are targeting the first banner ad of AdSense
      var ad = document.querySelector("ins.adsbygoogle");
      
      // If the ad contains no innerHTML, ad blockers are at work
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
        
        // Since ad blocks hide ads using CSS too
        ad.style.cssText = 'display:block !important'; 
        
        // You can put any text, image or even IFRAME tags here
        ad.innerHTML = 'Your custom HTML messages goes here';
      
      }
      
    }, 2000); // The ad blocker check is performed 2 seconds after the page load 
  }; 
  
</script>


One more thing. The above snippet only detects blocking of AdSense ads and replaces them with alternate content. The process would would however not be very different for BuySellAds or other advertising networks.

Find How Many Visitors Are Not Seeing Ads on your Website

Adblocking software like AdBlock Plus have become mainstream and now pose a significant threat to web businesses that are dependent on online advertisements. The problem is so severe that Google and Amazon are paying the writers of AdBlock Plus to whitelist their ads. This may be seen as some kind of extortion but with billions of dollars at stake, the advertising companies have chosen to take the more profitable route.

It is estimated that ~5% of website visitors are blocking ads (PDF report) and the situation could be far worse for websites that have a more tech-savvy audience. If you are curious to know how many people visiting your own site are blocking AdSense and other ads, here’s a little trick.

Track Adblock Users with Google Analytics

Open your website template and copy-paste the snippet below before the closingbody. This code will detect the presence of adblocking software on the visitor’s browser and, if found, an event gets logged into your Google Analytics account.

<script> 
  
  window.onload = function() { 
  
    // Delay to allow the async Google Ads to load
    setTimeout(function() { 
      
      // Get the first AdSense ad unit on the page
      var ad = document.querySelector("ins.adsbygoogle");
      
      // If the ads are not loaded, track the event
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
 
        if (typeof ga !== 'undefined') {
 
            // Log an event in Universal Analytics
            // but without affecting overall bounce rate
            ga('send', 'event', 'Adblock', 'Yes', {'nonInteraction': 1}); 
 
        } else if (typeof _gaq !== 'undefined') {
 
            // Log a non-interactive event in old Google Analytics
            _gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
 
        }
      }
    }, 2000); // Run ad block detection 2 seconds after page load
  }; 
  
</script>

The snippet works for both Universal Analytics and the older version of Google Analytics tracker that used the _gaq object. As a web publisher, your only option is to serve alternate content to AdBlock users so the visitors at least see some content in place of the ads.

One big caveat though – it will fail if the ad blocking extension installed on the visitor’s computer has blocked Google Analytics as well. Some of the popular choices like μBlock, NoScript and Ghostery do block Google Analytics so the approach won’t work and you may have to build your own in-house solution – like downloading an image hosted on your own server and then counting the hits to that image through the Apache server logs.

How I Make Software Demos using Animated GIFs

Animated GIFs, like the ones you see below :

are easy to produce and can be used for short software demos, help videos and everything else that doesn’t require audio narration. Here are some reasons why an animated GIF may be a better alternative to screencast videos:

• People love sharing animated GIFs on social sites, especially Tumblr and Google Plus. Facebook doesn’t support animated GIFs yet but that could change.
• Animated GIFs render inside any browser without requiring plugins and, best of all, you may embed the GIF images in your email newsletters as well.
• Now that Google Image Search supports GIFs, your image-only screencasts have a better chance of getting discovered. Remember to use proper Alt and Title tag swith the images.

Bret Victor’s excellent writeup on Learnable Programming includes several micro-videos that explain the concepts of programming. Bret has used HTML5 (MP4) videos but such short video demos are also a perfect candidate for GIF animations.

Screencasting with Animated GIF Images

I have previously written a guide on creating GIF screencasts using a free tool called Screencast-o-Matic but there are a few downsides with that approach – one, you need Java on your machine to record the screencast video and second, the GIFs carry a watermark (or you upgrade to the paid version).

There are other alternatives though.

The GIF screencasts that you have seen on Digital Inspiration are mostly produced with Camtasia Studio. When you are done recording your screen with Camtasia, press Ctrl+P to open the Production Wizard, choose Custom Production Settings from the drop-down and then select GIF for the file format.

                 Produce animated GIF screencasts with Camtasia Studio

GIF files can become large and it is therefore important that you choose the most optimized encoding options. Set Colors as “Automatic” or choose a lower value for lower file size. The Dithered Color Reduction should be selected only when you are producing GIFs from videos but not for regular screen recordings.

If you are not using Camtasia, LineCAP is a good option – it is a free and light-weight utility available for both Mac and Windows.

With LineCAP, you can record your screen as well as save the recording as an animated GIF in a single step. Launch the program and adjust the frame such that it entirely encloses the scene. Hit the “Record” button, choose a name for your GIF file and start the demo. You may also move the capture frame during the recording. LineCAP produces good quality GIF screencasts and animations are smooth though the files are often large in size.

The other choice would be that you record a screencast video, use any of thesescreencasting tools, and then use a GIF encode to convert the video file into a GIF. Instagiffer and QGifer are easy-to-use tools for making GIFs from video.

                             Make Animated GIFs from Screencast Videos

Instagiffer is Windows-only and more popular while QGifer is open-source and available for Mac, Windows and Linux. If you are planning to make a short video demo or screencast that is not more than 10-20 seconds long, consider producing an animated GIF image.

Google: Stuffing Lot of Keywords in Web URLs Is Spam

This is what Matt Cutts told Stephan Spencer when asked about the optimal length of a keyword-rich URL (web address). Excerpts:

Matt Cutts: If you can make your title four- or five-words long – and it is pretty natural. If you have got a three, four or five words in your URL, that can be perfectly normal. As it gets a little longer, then it starts to look a little worse. Now, our algorithms typically will just weight those words less and just not give you as much credit.

Stephan Spencer: So, would something like 10 words be a bit much then?

Matt Cutts: It is a little abnormal. I know that when I hit something like that – even a blog post – with 10 words, I raise my eyebrows a little bit and, maybe, read with a little more skepticism.  Link.