Offbeat Home's clever new ad blocking under-layer

April 2 2014 | arielmstallings
A word of praise for Offbeat Home & Life's witty little sub-in adverts for when I have AdBlock turned on! It was a great reminder to whitelist Offbeat Home & Life, as I like to do for sites like this which I enjoy and wish to continue enjoying.

I wouldn't have thought twice about it without the little note (which I think is new, because I've not seen them before).


offbeat home ad block

Yay! It *is* new, you're right! As we're experimenting more with allowing Offbeat Home & Life's readers to support the site directly, we figured this would be a good way to remind smarties using AdBlock (which I use all day every day myself!), that we DO rely on ad revenue and if they want to be a part of keeping the site online, they have the power to get involved.

This little bit tech of was totally a team effort:

  1. Offbeat Home's assistant editor Caroline was inspired by how OkCupid does their ads, and pitched the idea.
  2. Then Offbeat Bride's editor Catherine mocked up the octopus graphics, leaning heavily on OkCupid's language.
  3. Then the Empire's developer Kellbot worked the techy magic to make it all work.

If any other web publishers love this idea, here's the code concept, courtesy of the Offbeat Empire and our developer, Master Kellbot:

AdBlock works primarily by setting the height and width of an ad image to 0, as well as replacing the image with a transparent one. By creating a container under the ads (or just using an existing one if you've got it) we can set the background image of that container to our special message. When the ads load, our message is covered. When the ads disappear, it is exposed.

In order to make the background div clickable we have to do some javascript tricks. A quick line of jQuery pulls it off for us:


In order to keep this behavior from bubbling up when AdBlock is off, we have to call the stopImmediatePropagation() event on ad clicks:

$(".ad-container a img").click(function(event){

There's one interesting bug I haven't quite ironed out: AdBlock can be inconsistent with how it handles ads. Sometimes it doesn't collapse the ad image, leaving an invisible ad target area that might get clicked when you go to hit "that's fair." When this happens the click takes you to the advertisement that AdBlock is hiding… which, admittedly, is not the worst possible outcome in terms of Empire support. Not that we want misclicks, but until we can figure out how to make that work better, it's semi-ok for now.

We've currently got a challenge out to Offbeat Home & Life readers: if 100 of them can come on at monthly subscribers at $5/mo, then we can get rid of our more invasive banner ads. Currently, we're at 26 subscribers. We'll see if this new ad blocker under-layer helps inch that number toward our goal!

Here are the financial realities: Offbeat Home & Life makes less per month than Offbeat Bride makes per day. It barely breaks even, and it certainly doesn't make me any money. As I've told staff, at this point, Offbeat Home & Life is basically something we do for fun. My hope is that reader support can help to change that, but if not… we'll keep doing the site up for as long as it feels fun, and then cross that Difficult Decision bridge when we get there.

  1. So if you disable Adblock for just this site, do you guys still get the ad revenue?

    • Do you mean if you use Adblock, do we lose the ad revenue? If so, the answer is "Sorta and yes."

      We have two different kinds of banners in the sidebar:
      * The banners under "Sponsors" are purchased up front, so if you use AdBlock you won't see them, but we've already been paid. (That said: if you don't see them, you don't click them… and if no one clicks the ad, the sponsor will not continue purchasing them.)
      * The banners under "Advertisements" only pay if they get or views or clicks. So with those ads, it's a more direct AdBlock = Less revenue situation.

      Oh wait, I think I totally misunderstood you. The answer is Yes: if you whitelist Offbeat Home & Life, we get more ad revenue.

  2. I love that feature! I had forgotten I started using Ad blocker until that pop-up came up and reminded me I had to whitelist OBE.

  3. I recently re-added adblock (I was lazy about resetting my internet stuffs when getting a new computer) and appreciated the reminder. Your ads aren't obtrusive and are in line with what you guys do, so I don't mind them. Plus, I wan you guys to stick around. =]

    Also, it bums me out that OBH&L doesn't make you guys money. After graduating from OBB, much of the wedding stuff no longer applies to me so I don't go there often. I hope you are able to keep OBH&L going. I really like that you guys can cover a broad range of topics on that page!

  4. What we need is an adblocker that blocks the ad from appearing in our browser, yet clicks on the supplied link to let the advertiser see a view (sending any resulting detritus to /dev/null). We don't get any annoying ads (sorry, they are ALL annoying) and you still get your click-through revenue … win / win

  5. Reading this reminded me of a question that I've wondered about for a long time. I'm a religious follower via feedly (since the demise of my precious google reader), but only click through if I want to comment. How does something like feedly count in your pageviews etc.? That is, am I essentially robbing you of a pageview by reading the full article in my reader or does the way feedly gets the article count as a page view?

    • Yep, you're essentially robbing me of a pageview, but rewarding me with long-term reader loyalty (which is theoretically worth more than a pageview), so it all works out.

      I'm a committed RSS user myself, and what I like to remind my fellow RSS nerds is that there are very few of us left. For example: Offbeat Bride has 60,000 followers on Facebook… as compared to 3000 RSS followers. People who read via RSS do indeed cut into our pageview counts, but it's relatively so few people that it really doesn't matter. Besides, RSS followers see every single post — including every single sponsored post.

      Following via RSS means you're pretty loyal to the site — which is valuable in different ways. It's not pageviews, but in some ways… it's a bigger deal.

      That said, if you want to alleviate your guilt, support the Offbeat Empire in other ways! πŸ™‚

      • I'm neither an RSS reader nor a Facebook follower. And yet, I read every post, and give you multiple page views each day just by typing "o" into my browser and letting auto-fill take over. I am either the laziest IT professional in the world or a near-perfect reader.

  6. Heh. I already had the empire whitelisted, but this was the reminder I needed to e-mail Adblock and ask for a "whitelist by default" option, because I read mostly smaller sites I do not at all begrudge the ad revenue, and would prefer to just block the icky sites.

  7. I have mixed feelings about this. I have AdBlock turned on for OBE specifically because of the AddThis Smart Layer pop-ups (the little windows in the bottom right). I commented when those were added how annoying I found them, and the response was basically "turn on AdBlock."

    I love Offbeat Home, and love supporting it, and I get it, you gotta do what you gotta do as a business. Just for feedback's sake, those pop-ups are the reason I have AdBlock on and for now, why I'm choosing not to whitelist OBE. I'd love to reconsider when the AddThis pop-ups are gone, so keep us in the loop if anything changes there.

    • I absolutely *FULLY* support readers using AdBlock — you'll note I'm not telling anyone to turn it off or whitelist the sites. I use AdBlock all day every day, and as you can attest, I totally recommend it! So I'm definitely not suggesting that anyone stop using AdBlock — I'm just saying that if you use AdBlock, now you can consider supporting the site in other ways. πŸ™‚

      Personally, if I had to choose, I'd rather folks support Offbeat Home & Life directly via Tugboat, than than whitelisting the ads. When it comes to individual ad views and clicks, ads just don't make that much money. Unless you click every ad, every day, there's no way I'd make $5/mo off a reader whitelisting the site. (Separate from money, it also means much more to me personally when readers support the site directly.)

      That said, I understand that your REAL issue here is that you don't like the AddThis smartlayer, which sadly isn't going anywhere. It's proven to be a hugely useful tool for me as a publisher, and while I respect that some readers won't like it (and support them using AdBlock!) there are no plans to remove it. Keep using AdBlock, and all's well. πŸ™‚

    • You can block the AddThis Smart Layer while allowing all the other scripts (and therefore all the other ads) if you use a script blocker program such as NoScript. AddThis annoyed me for a long time, so I had it blocked while allowing the other scripts the Offbeat Empire is running. I eventually decided I didn't mind it that much and am now allowing that script along with the others.

      I'd like to support the Offbeat Empire directly at some point, but for now allowing ads that slightly annoy me is about all I can do.

  8. I just wanted to add one dissenting note… banner ads on most sights really annoy me, but I really enjoy the ones on Offbeat Home and Life, and Offbeat Bride! They often feature vendors whose products I enjoy browsing, and I'd never have known about them if you hadn't given them the ad space. So… thank you!

    • YAY! This is great to hear. πŸ™‚ Yeah, we're really selective about our sponsors, so it's generally high-quality folks over there… the advertisements (which are served up by AdSense and Glam Media) tend to be more national brands like Kraft or Hidden Valley and shit, so they're less awesome… but they pay the bills. πŸ™‚

  9. OK Cupid has a very similar under layer for its ads that totally worked on me. When I first saw it, I was like 'Yeah! I am a badass with my adblock. Take that stupid ad!' Then after seeing it a few more times I decided I liked the site enough that I wanted to support them and signed up for a premium account. I really love this approach because I think it makes the reader feel empowered to make a choice to support something they like instead of guilty about the loss of revenue.

  10. Just a little sidenote regarding the sponsoring: while I'm a horrible person because I have been intending to sponsor since you started with the program and am finally just now doing it, I would probably have gone for a slightly higher monthly "subscription." Heck, if I'm not going to go to the fitness studio, that 20 bucks a month might as well be put to better use! πŸ˜‰

    Also, you might want to try a high single-sum with "no strings attached." I know that the patron deal is supposed to offer some perks for your investment, but I'm guessing that there might be others like myself who think, "I don't know, MonthX is going to be super busy at work/home/co-op/etc. I can't offer any valuable input during that time" but who might still prefer to make a single contribution for various reasons.

    That said, I'm sure you put a lot of thought into the "products" and of course you don't want to have an overwhelming selection. Just thought I'd offer my input. πŸ™‚
    Keep up the good work!

    Edit: Just realized that you can give an additional one-time donation while purchasing the product (thus allowing any product to be a high single-donation), but of course "new customers" such as myself don't know this.

  11. I know Pinterest-ed pictures with graphics aren't a common thing around here.. but I wish there was one so this idea/code could receive more traffic! I think it's a great idea (and will pin it as is, of course).

  12. This would make me stop following a blog. I think you should find another source of revenue to make up the loss of ad revenue.

Comments are closed.