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.

The Best Websites to Learn Coding Online

The Learn to Code movement has picked up momentum worldwide and that is actually a good thing as even basic programming skills can have a major impact. If you can teach yourself how to write code, you gain a competitive edge over your peers, you can think more algorithmically and thus can tackle problems more efficiently.

Don’t just download the latest app, help redesign it. Don’t just play on your phone, program it. — Obama.

There’s no reason why shouldn’t know the basics of coding. You can automate tasks, you can program your Excel sheets, improve workflows, you can extract data from websites and accomplish so much more with code. You may not be in the business of writing software programs but knowing the basics of coding will help you communicate more effectively with developers.

Gone are the days when you had to enroll in expensive computer training classes as now exist a plethora of web-based courses that will help you learn programming at your own pace in the comfort of your web browser.

The Best Sites to Learn Programming

If you are ready to take the plunge, here are some of the best websites that offer courses in a variety of programming languages for free. I have also added a list of companion ebooks that will give you a more in-depth understanding of the language and they don’t cost anything either.

	Online Courses & Screencasts	Programming Books (Free)
JavaScript	Code Academy, Learn Street,Code Combat, Code Avengers	Eloquent JavaScript,JavaScript Guide,Speaking JS, JS The Right Way, Oh My JS,Canvassing
HTML & CSS	Code Academy, Don’t Fear The Internet, Tutsplus, Learn Layout, A to Z CSS, Dash, Web Accessibility, The Hello World,Khan Academy, HTML5 from Scratch	Mozilla, Dive into HTML5, 20 Things I Learned, HTML Dog,HTML & CSS, HTML5 for Designers, DOM Enlightenment, HTML Canvas
jQuery	Code Academy, Tutsplus, Code School	jQuery Fundamentals,Learn jQuery
Python	Code Academy, Google, Learn Street, Python Tutor,IHeartPY	Python for You and Me,  Dive into Python, Learn Python the Hard Way,Think Python, Python for Fun, Tango with Django,Django
Ruby & Ruby on Rails	Code Academy, TryRubyCode Learn, Railscasts, Rubymonk,Learn Street	Why’s (Poignant) Guide to Ruby, Learn Ruby the Hard Way, Learn to Program, Learn Rails by Example
PHP	Code Academy	PHP Programming,Practical PHP
Also see: How to Learn Regular Expressions (RegEx)
Google Apps Script	Getting Started, Office Hours, Google Scripts Examples,Learning Apps Script
WordPress	Treehouse, WordPress TV
Linux & Shell Scripting	Stanford.edu, Explain Shell	Conquer the Command Line
Node.js	Nodetuts, Node School	The Node Beginner Book,Mixu’s Node book, Node Up and Running,Mastering Node.js
Angular JS	Code School, Egg Head, Learn Angular	Angular JS Tutorial,Thinking Angular,Angular Tutorial, Getting Started (Adobe)
Also see: Learn Touch Typing & Code Faster
Git (version control)	Code School, Git Immersion,GitHub Training, Udacity	Pro Git, Learn Git, Gists in Github
Objective-C (iOS & Mac)	Code School, Stanford, iTunesU
Chrome Dev Tools	Code School, Dev Tools Secret, Chrome Dev Tools Tutorial,Udacity, Building Browser Apps
Go Language	Golang.org, GopherCasts	Programming in Go, Go by Example, Learning Go,Building Web Apps with Go, Learning Go
Java	Learn Java, Coding Bat, Java Udemy, Learneroo	Programming in Java,Thinking in Java, O’Reilly Learning Java, Think Java, Java & CS, Java for Python Devs
Android App Development	Udacity (Google Developers), Coursera, The New Boston,Google University, App Development Essentials, Code Learn,App Inventor (Visual)
D3 (data visualization)	Data Visualization for the Web, Dashing D3, D3 Tips & Tricks
Also see: Learn VIM, the text editor for programmers
SQL (Databases)	SQL Zoo, SQL @Stanford, Essential SQL, SQL for Nerds,Intro to SQL, SQL Bolt, PHP & MySQL
Everything Else	Udacity, edX.org, Coursera, Udemy$, Lynda$, Pluralsight$,Treehouse$, Open Consortium, One Month Rails$

Teaching Kids to Code

If there are kids in the family, you should download either Tynker (Android/iOS) or the Hopscotch app for iPad and they can learn the basics of programming through games and puzzles.

There’s also Scratch, an MIT project that allows kids to program their own stories and games visually. Scratch is available as a web app or you can download it on your Mac/Windows/Linux computer for offline use. Microsoft TouchDevelop, Blockly and Alice are some other web apps that will introduce the concepts of computer progamming to your children.

On a related note, the following chart from Google Trends shows the relative search popularity of various programming languages over the last 5 years. The interest in PHP has dipped over the years, JavaScript has more or less maintained its position while the popularity of Python & Node.js is on the rise.

Newsgator vs Bloglines vs Google Reader

Here, we are comparing the three most popular web-based RSS readers - Newsgator Online Web Edition, Bloglines and Google Reader. All of them are server-based aggregation systems. 

For our comparison, we created a new account in each of the services and imported the CNet's Blog 100 OPML Source File [#] The scores for comparison categories are mentioned in brackets.

Setting up a New Account:
Bloglines and Google Reader require an email address to create an account that also becomes your login. Your email is verified before you can start using these services. In Newgator Online, the username and email address are different. The e-mail address is also not verified. (NG: 5, GR: 4, BL: 4)

Adding New Feeds:
All these services allow importing of OPML file or directly adding new feeds by specifying the URL. Google Reader was faster than Newgator and Bloglines when importing new content from the OMPL file. During the Import process, only Newsgator lets you further select or deselect feeds mentioned in the OPML file. Bloglines and Newsgator imported all the feeds without giving any such option. (NG: 4.5, GR: 4, BL: 4)

Navigating the Feeds:
Unlike Newsgator Online, Bloglines and Google reader support shortcut keys. With a single key, you can mark the entire session as read. Or open the original post in a new window. (NG: 2, GR: 4, BL: 4.5)

User Interface:
Bloglines displays information in two HTML frames - the left pane has all the feeds listed while the right pane shows corresponding posts, search results and other tips. Newsgator sports a similar interface to Bloglines but it scrolls both the panes together. This gets annoying particularly when a feed has long posts or lot of posts. Google Reader has a very different interface based on Ajax technology . It shows individual posts title on the left pane and the actual post on the right pane. To read a post, you will need to click it. I like Bloglines simple yet uncluttered interface. (NG: 3, GR: 4, BL: 5)

Finding New Source:
All these three services provide a search feature. In my comparison, I searched for feeds related to "Google" - Most of the search results in Newsgator were irrelevant. Even the Official Google blogs were missing in the search results. Google, as expected, wins by a huge margin, both in terms of relevance and freshness of content. Though Bloglines results were disappointing, Bloglines is the only service that lets you limit your search to your subscriptions only. (NG: 1, GR: 5, BL: 2)

Customization Features:
In Bloglines, you can choose either to view complete entries or Summaries or Titles only. You can also attach notes to individual feeds. Google Reader uses labels. Bloglines provides multiple options for sorting feeds. You can filter items in Bloglines based on the time the item was published. In Google Reader, feeds can be filterned based on labels or Title of the feed. (NG: 2, GR: 3, BL: 4)

Other Good Features:
Newsgator Smart Feeds let you track reference to any URL. This is a feature similar to the Google link: syntax. 

Both Newsgator and Bloglines display the number of subscribers associated with each feed but Bloglines even goes a step further, it displays the list of public subscribers. Google has no such option till now. 

Bloglines let you create a custom blog (hosted on Bloglines) to store and share your clippings and favorites. Clipping facility is available in Newsgator also but Bloglines provides a nice WYSIWYG editor for further rich-editing of clips. (NG: 2, GR: 2, BL: 4)

Conclusion:
Here are the final scores:

Google Reader: 26
Bloglines: 27.5
Newsgator Online Web Edition Free: 19.5

Bloglines wins but Google Reader, still in beta, is close. Google Reader outperformed everyone when searching for new content but Bloglines interface and usability make it a big winner.