If you’re a member of the BlogHer Publishing Network, you may have received a pretty overwhelming e-mail a month ago regarding this new thing called “ad viewability” and the need to “improve ad viewability scores.” If you were confused about it, you’re not alone. I received e-mails from several fellow bloggers overwhelmed by the literature. To be honest, it posed a serious challenge for me both as a designer and a blogger.
Here are just a few of the questions that ran through my head:
- Is BlogHer the only ad network doing this? If so…
- Is BlogHer really worth it?
- Will I lose readership in trying to improve my ad viewability scores on my mobile-responsive theme?
- Can I actually improve my ad viewability scores?
First, BlogHer is NOT the only ad network implementing the new IAB Viewability standards. It’s an industry wide thing, and I’ll talk about it a little more in-depth in this post. Since I really do think it’s worth having BlogHer as a publishing network, the second question is null. Question #3 totally depends on what I did with Question #4. Now that I could work with.
But before I get to the meat of the subject, let’s talk a bit about why BlogHer and other CPM, or cost-per-mille, networks like Gourmet Ads, are changing their ad-placement policies. The #1 reason may be in your hands this very second: mobile devices. The following is a screenshot from my Google Analytics breaking down which devices people use to read my blog:
During the past month, I experimented with several different ads (like the Tune-in bar), different ad placements and ad units as I learned more about viewability. You might have seen things out of place momentarily as I figured out what’s best for my blog. As a blog designer that likes to change things up, while also making some money on ads, it’s a never-ending project.
This year I’ve seen different blog traffic patterns (read: more traffic), and it has made it much, much easier for me to see where traffic comes from. Using Google Analytics data, I tweaked my blog design earlier this year to make it easier for that traffic to navigate my site. People are using their iPhones and Android devices more than ever to browse the web. And this plays a huge role in the advertisement industry. Here’s the meat of that e-mail BlogHer sent us a month ago:
The IAB definition says that 50% of an ad unit must be fully loaded and visible for at least 1 second with no scrolling to be counted as viewable.
“Good” Viewability numbers are 60% or higher, with many campaigns requesting 70% or higher for all impressions.
Ad units that are performing below campaign standards will not receive inventory for Viewability Guarantee campaigns – this is evaluated on an ad-unit by ad-unit case, rather than a site-by-site, so having one high-viewability unit will ensure you can participate in all campaigns while you work on your other placements.”
Ok, so what does that mean? In a nutshell, advertisers are spending millions on ads that sometimes never load on webpages. Whether they’re below the fold, or people scroll past them too quickly, or the blog has a mobile-responsive theme (more on that in a bit), the ads are served…but not seen. In other words, BlogHer’s scripts pull the ads on your blog, but since they’re not viewed for 1 second (if at all) it’s a failed ad for the advertiser and your viewability score goes down.
Viewability gives advertisers the right to pay for ads that humans will see, and not just render on a non-viewable part of a website. I think it’s pretty fair. If I were paying for advertisements, I want the ads to be seen, not just served. Gourmet Ads has an excellent blog post explaining Viewability, including a short video showing different options for increasing viewability.
I had a quick phone conversation with Jenny Lauck at BlogHer about all things Viewability. I learned that the advertisers themselves are measuring the viewability of their ads…not just BlogHer. They don’t want their ads to be served on sites that have less than 70% viewability. That’s huge!
Want to know what my overall viewability score was, per that e-mail? 62%. It got even worse once I logged in and saw the numbers for each ad unit. I think the viewability score for my main sidebar ad was only 19%. Remember, the viewability score for each ad unit trumps the overall viewability score across ads. So in order to qualify each ad unit for the highest-paying ads BlogHer’s advertisers have to offer, that individual ad unit’s viewability score needs to be 70% or better. Yikes. Jenny suggested I make my leaderboard ad at the top “sticky” like my navigation bar. Although I know that it will increase my viewability rate for that ad, I know it will be extremely annoying for readers (and myself), so that’s staying put for now.
Remember when I mentioned mobile-responsive themes? A mobile-responsive theme is one that adapts to the width of the device. Responsinator.com is an excellent tool to see a mobile-responsive theme in action. Mobile-responsiveness is excellent for reading content. However, in order for it to accomplish that, the sidebar gets moved below the content…all the way to the bottom. Given the rules of viewability, this creates a big problem.
This left me with two possible actions to improve viewability:
- hide my main sidebar ad on mobile views
- insert ads visible only on mobile devices
Luckily I was able to do both. I emailed the BlogHer Ads team (they were awesome to work with!) and asked them to create a supplemental 300×250 ad unit in my BlogHer account that would only show on mobile views. My site is built on the Genesis framework, and for simplicity’s sake, I will be using Genesis Simple Hooks to show you how to add the supplemental ad code below your header on mobile views only. We will also be using the Widget Logic plugin and modifying your functions.php file.
Steps to Increase Ad Viewability Rate
Step 1: Repositioning Main Sidebar Ad
Remember when we had to place our sidebar ads above-the-fold? This was an industry-wide practice to ensure that ads were seen. Now, with the new IAB Viewability standards, the industry is shifting away from “above-the-fold” and “below-the-fold” ad definitions. Websites no longer have consistent “folds” due to the variety of tablets and smartphones. Above-the-fold placement of ads could actually hurt your ad revenue.
Let’s look at how an above-the-fold ad placement can hurt your viewability rate.
The red dotted line marks where a lot of my content begins. I love big, beautiful “pinnable” images as much as the next blogger does, but we see readers scroll past that image and the main ad. That hurts viewability. If you look on my sidebar now, you’ll see that I’ve moved that ad further down the sidebar. BlogHer recommends that your ad(s) be as close as possible to where a reader will spend more than 1 second viewing your site. This is where it made the most sense for me to move my main ad.
Step 2: Hiding Sidebar ad(s) on mobile responsive view using Widget Logic
Remember my tutorial on how to hide BlogHer ads on sponsored posts? This step will look familiar.
If you don’t have sponsored posts that need to be hidden on your blog to comply with BlogHer, this step will be super easy. Using the space created in each widget (Appearance > Widgets) by Widget Logic, simply copy and paste this code and click ‘Update’ to save the changes:
If you do have sponsored posts, we will need to modify that code so that now we are also hiding it from mobile view. Where ‘XX’ appears, swap it out with the number WordPress assigned to your sponsored category (screenshots on that post may be found here). Simply copy and paste the code into the area that Widget Logic creates in the individual widget.
I think it is extremely important for me to add that this conditional statement will not work with some cache plugins. I had to disable my cache plugin (Quick Cache Pro) because my main ad would not appear on desktop, but it appeared on mobile, completely defeating the purpose of the coding. Once I disabled the cache plugin, it worked.
Christina had great success using WP Super Cache while still suppressing the ad on mobile views. She was kind enough to provide me with a screenshot of her settings.
I really think my cache not working has everything to do with my shared-hosting environment. I plan on switching to A Small Orange in the coming weeks, and I’ll update this post when I do. Right now I’m using CloudFlare to speed up my site (tutorial).
Step 3: Adding Supplemental Ad to mobile views only
The BlogHer Ads team was a lucrative help in this step. I’ve worked closely with Christina over the past month working on this. I know they’re in the stages of creating an in-depth document covering all of this, but I thought you would like to know how to do this before that document came out. The following code was extracted from http://www.dfactory.eu Again, being extremely careful (and backing up your functions.php file just in case) insert the following code at the bottom of your functions.php document. Do not include lines 1 or 2. That’s just letting you know that it is PHP code.
Once that is saved, we move on to the second part. Using Genesis Simple Hooks, you will be adding the shortcodes [ only_mobile ] before and [ /only_mobile ] after your supplemental ad code in the genesis_before_content_sidebar_wrap Hook.
So, it will look like this on your dashboard. Make sure you check off the box “Execute Shortcodes on this hook?” so that the ad only shows on mobile.
These steps should help improve your viewability score regardless if you’re on BlogHer Ads, GourmetAds or any other ad network. The only problem I’ve encountered with suppressing my sidebar ad was with my cache plugin. It simply was not compatible.