Google Adsense has rolled out a new family of ad formats called Page-level Ads to experiment with a new format of ads for website publishers.
Adsense Page-level Ads introduce two new formats of ads – anchor/overlay ads and vignettes. Both ad formats are mobile-only and will display only on mobile-optimized websites.
In this tutorial, I will walk you through steps that you can add to your WordPress website. I will also explain Page-level ads, introduce you to different types of page-level ads, and suggest ways you can implement and track them.
(If you use Adsense ads on your website, just navigate to www.yourwebsite.com/#googleads on a mobile device and you might see a preview of page-level ads. You don’t need to be approved for such a format to see this!)
This is how one of the ads (Anchor/overlay ads) look for WPism. See the “Advertising with Google” anchor ad at the bottom of the page.
A bit of Disclaimer first;
I was recently invited by the Google Adsense research team here in London headquarters for feedback on upcoming projects. I am not revealing anything from the private research session in this blog post.
About Page-level Ads
Page-level ads are the new format of Adsense advertisements available to the publishers. The feature is still in beta and is available only to limited Adsense publishers.
Google Adsense hasn’t announced these new Ad formats officially, but it has started rolling out to publishers and testing them.
Adsense, however, published about upcoming Anchor ads back in 2013, and their advertising platform Google Adwords announced the new ad formats for advertisers in September 2014.
Latest update: Page-level Ads are now available for all publishers.
With a rapid increase in mobile consumption, it’s become necessary for Adsense to introduce innovative Ads that highly convert on mobile devices. Responsive Ad Units, available to all Adsense publishers, are one of the most useful solutions available at present for mobile devices.
Page-level ads are completely built with Mobile in mind and they definitely look promising to both advertisers and Adsense publishers.
Why add Page-level Ads?
So, you might be thinking about why you should add page-level ads if responsive ads are already working for you. Here’re a few reasons why you might want to implement such ads.
- Page-Level ads are the new ad formats from Google Adsense introduced to offer you an innovative way to monetize your content. It might help you to increase your earnings.
- Page-level ads don’t count towards your three ads per page policy limit of Adsense. This provides you with additional opportunities to increase your earnings from page views on mobile devices.
- Page-level ads are built with user experience in mind. They are easily dismissible and limited per user (more on that in ad types below).
- The ads are easy to implement, and you only need to place the same piece of code for ads to be displayed on every page.
Similar to other ad formats, you can experiment and see if these ads work better for you and decide if you want to keep them activated.
With Page-level ads, Adsense has made two different types of ad formats available to the publishers.
1. Anchor/Overlay Ads – Google Adsense
Anchor ads work by allowing banner ad units to be anchored to the bottom of the mobile screen, staying there when your users scroll up or down the page (also mentioned in the AdSense blog post from 2013).
Anchor ads stick to the bottom of the user’s mobile screen and can be easily dismissed by the user.
After testing here are a few situations that I found where Anchor Ads might not work,
- The viewport is not between 320 and 420 pixels wide.
- The device is not in portrait mode.
- The current browser is not supported.
2. Vignette Ads – Google Adsense
Vignette Ads cover the full mobile screen of the users. They are similar to overlay ads that you might have seen in native mobile (ios or Andriod) apps.
Vignette Ads only appear between page loads on your website and can be easily skipped by the user at any time.
These ads do not appear when a user arrives on your website; rather they are only displayed when a user is navigating to the next page on your website. This ensures that your user doesn’t have to wait to load the ad and besides they can easily skip it at any point.
Such behaviour of vignette ads is applied to maintain a good user experience.
For Vignette ads, here are a few situations that the Ad that might not be displayed;
- The viewport is not between 320 and 420 pixels wide.
- The device is not in portrait mode.
As you can see, unlike responsive ads, Page-level ads (both Anchors and Vignettes) don’t seem to work after a screen orientation change.
How to Add Page-level Adsense Ads in WordPress
Implementing Page-level Ad for website publishers or authors is easy as adding any other Ad unit, but it needs to be placed in a unique location within your WordPress website.
Follow the instructions below to generate the required page-level Adsense code and add it to your WordPress.
- Login to your Adsense account to see if you are approved for the feature.
- Navigate to the My Ads tab on the top menu.
- Select Content > Page-level ads (again, you will only see this if you are approved for these ads).
- Turn on the page-level ad formats that you’d want to implement.
- Click on the Get code button to generate the required code for your AdSense account.
- Add the code in the head section of your WordPress (details below).
See the screenshot below for the above process.
If you have turned on both the ad formats, this is what your AdSense code looks like;
Once you have your code ready, you will need to add that to the head section of your WordPress website. There are a few ways you can do this.
a. Add with a plugin: Install Insert Headers and Footers plugin that lets you add scripts without messing with your code.
– Go to Settings > Insert Headers and Footers.
– Add the above code to the “Scripts in Headers” section of the page and click on “save settings”.
b. For Pro users: If you are comfortable editing your theme, place the above code in the head section of your template. You can also place it on top of your opening body tag on pages to limit the display of the ads on certain pages.
c. For Genesis users: Theme frameworks like Genesis (what we use here at WPism) provide a built-in option to add codes to your header.
– From your Dashboard, navigate to Genesis > Theme Settings.
– Place the code in the first box under the Header and Footer Scripts.
Test Page-level Ads
After adding the code, go through the recommended steps to see if you have implemented the code correctly.
Check Page-level Ads Performance Reports
Now that you have added the page-level ads code to your website, you might want to check their performance.
You can easily track the performance of your Page-level ads by viewing the Ad behaviour report from the Performance reports tab.
- From your AdSense dashboard, access the Performance Reports > Report Type > Ad behaviour.
- Under the Ad behaviour table, you will find page-level ad figures reported under “Anchor/overlays” and “Vignettes” labels.
(Adsense TOS doesn’t allow displaying/sharing the figures from this report)
The easiest way to get on the performance reports page (while this feature is still in beta) is by using the link on the Page-level ads configuration page under the My ads tab.
See the screenshot below to see the link to “view Page-level ads report” as shown on the page.
This should take you to a new report type page with Anchor/overlay ads selected.
For DoubleClick by Google Users
If you use DoubleClick Ad Exchange by Google to manage your ads inventory, here’s how you can check your ads performance report.
- Navigate to the Query Tool tab from the main Ad Exchange bar.
- Define your query.
- Select the Inventory Segments dimension family to report on tags or channels.
- Use the tags or channel IDs in the report to identify Page-level ads.
Preparing for Page-level Ads
If you don’t have access to Page-level ads, here’s what you can do to prepare your website.
Wait until you Get access to Page-level ads
You will need to wait until the ad formats are available in your Adsense publisher dashboard. There’s no way as of now to request manual access to the ad formats.
Google Adsense has been working on this for a while now (as you can see with the initial announcement in 2013) and it will surely roll out of beta very soon.
Make sure you have a Mobile-Friendly Website
This might be the obvious requirement for page-level AdSense ads to work on your website. Your WordPress website needs to be optimized for mobile devices. The best way to do is to choose responsive WordPress themes for your website/blog.
Additionally, you can use the Google Developers Mobile friendly tool to see if your website passes the mobile-friendly test.
Enter your URL in the test box and the tool will analyze to see if your website is mobile-friendly. It will show an awesome green banner along with the mobile preview of your website.
Make sure to check out the detailed guide on Mobile Friendly websites from Google to make your website mobile-friendly if it doesn’t pass the test.
Share your experience with Page-level Ads
Have you implemented these new page-level ads on your website? Have you seen any significant changes in your earnings?
Feel free to share your experience with the ads and how they are performing on your website.
I hope the tutorial helped you to familiarise yourself and implement Page-level ads for your website. You can always leave a comment below if I can be of any help to you.
Latest update: Google has rolled out the Page-level ads out of its testing mode and should be available to everyone now.
Here’s the video linked from the Adsense dashboard introducing the Adsense next-generation Page-level ads.
Looking for more tips and tutorials on making the most out of Google Adsense? Subscribe to WPism as we cover several topics on Adsense helping you learn how to optimize and make money with Adsense ads from your WordPress blog.
Hi,
Thanks for this article. I also have Genesis framework in one of my sites and when testing the Page Level Ads I get this warning:
This page cannot display anchor ads for the following reason(s):
Either your browser’s current zoom is not neutral or this page’s layout is not mobile-optimized.
I even tried inserting the meta inside :
But it is still not working.
Site is http://www.unidominios.com
Any ideas?
Thanks in advance for your help!
Hi Seniat,
It seems you have heavily customised the theme, making it difficult for me to find out why it’s not displaying.
But you can try debugging this way on multiple screens and see if it works.
Add /#google_anchor_debug to the end of your page URL on mobile screen and try to resolve the error.
I hope it helps!
Apparently you figured it out, but for anyone else who has the same problem:
Change your this line in your area:
To:
Just make sure your content is still displayed correctly.
Thanks for the information. Unfortunately for me the Page Level Ads is not yet available in my account but I how it will be available soon.
thanks for information, i try it
Hi Pradeep
I tried it.
It is just opening my home page without any ads format.
Hi Pawan,
Are you sure you have this feature available in your Adsense dashboard?
“The feature is still in beta and is available only to limited Adsense publishers.”
Hi Pradeep
Now I got this features enabled and your tutorial was very helpful adding code to genesis …..
thanks.
Enabled Pagelevel ads………..Where can I check Performance ?????? In performance reports i cannot find about it…..
Hi Sathish,
The easiest way to check for performance of Page-Level Ads is by using the link that you can find under Page-level Ads configuration page under My Ads.
I have added a screenshot above in the article under the Check Page-level Ads Performance Reports section above.
I hope that helps.
can i use page level ads from my hosted account to my top level Domain website without upgrading ?
Hi Rabindra,
I am not sure if I understand what you mean.
You can use Page-level ads on any domains from your Adsense account. You just need to have a valid Adsense account approved for any domain during the time of your initial application.
Once you have an Adsense account, you can use Ads on any domains/websites that meet the Adsense requirements.
Hi Pradeep Singh,
Thank you for explaining the Page-Level Ads concept and also how to add it via the wordpress plugin.
I’m testing on my Healthymary.com a health-related news site.
I stumbled on your page via the page level plugin search and just noticed how much more information you have. Gonna be around here for some time.
Thank you for sharing!
Alvin
Hi Alvin,
Glad to hear that. I look forward hearing more from you!
Thanks for the article Pradeep, Just implement the page level ads on my blog using the help of this article! Now waiting to see how it impact the revenue! 🙂
My pleasure! Let me know how it works out for you 🙂
Thanks sir now i will so these with my site thanks for these article i am getting confusion that how to ad code now i got clarity thank you very much.
Have Page-Level Ads activated on https://the.me , ads do display now and then, but no earnings so far.
A bit strange that it’s not possible to have a Custom Channel for Page-Level Ads.
Also, test preview doesn’t work.
But sir in newspaper theme where we have to place that code pls help sir.
Hi Koushil,
I don’t think the newspaper theme has the option to place such codes (I can only see an option for analytics code in the theme panel).
You can use the plugin mentioned in the article above or if you are comfortable editing the code, place the code in the head section of your template.
I did follow your procedure on placing the code because I am eligible to new page level ads but after all and I tried to view on my system this was what I saw
The viewport is not between 320 and 420 pixels wide.
The device is not in portrait mode.
The current browser is not supported
what is the problem here
I have done this but dont know its working or not.
I have copied the Page level ads code but i do not know where i can place the code on my site, plz i need an answer…
Hi,
I activated the Google Page-level ads few days ago but nothing yet, I am sure things are going to turn out soon and i Think not all AdSense account have that feature for now because i have not yet seen the Page-level ad on it.
Thanks for the info..!
How do i place the ads code on my site? please i need an answer..
Thank you.
hello pradeep
what is the difference between page level ads and add units?some people having add units.my self i am not getting add units only having page level ads-beta ,but this is only for mobile purpose then what about desktops browsers??one more thing is how can i getting add units??and my problem is when i tried to display this page level ads in that time it shows GOOGLE PAGE LEVEL ADDS
ANCHORS VIGNETTES like this in my mobile screen
once i selected any one of the above two options it shows
An interstitial is loading….if nothing happens try refreshing the page (like this it shows)
what is this??can u please help me for this…
Thanx in advanced…
again neelima here i just adding my page level ad code in word press header.php file of head section, after that i just going with this step that you said [This is how one of the ads (Anchor/overlay ads) look for WPism. See the “Advertising with Google” anchor ad at the bottom of the page.]
it displays as tees u shown in that screen short but iam not getting that bottom of the add
like advertising with google…but why iam not getting that in my mobile screen bottom
Great job and thanks for the link to ‘Insert Headers and Footers’ plugin – worked a treat.
Thank you for this post man! I just logged in to Adsense and came to know about these ads. I was confused, whether to go for it or not. Searched on the google for implementation on blogspot blogs and found your post first! I have visited your site many times before. You are a full pro guide for blogger related stuff. well done.
Thanks, Muhammed! I am glad that it was useful!
Great tutorial and great review! Thank you very much!
Thanks, J!
This page cannot dilplayed anchor ads for the following resons
1.either your browser current zoom in neutrol are this pages layout is not mobile optimize
2.The viewport is not between 320 and 420 pixels wide
how to fix this problem
Hi Dinesh,
You need to have a mobile friendly website for the ads to be displayed.
You can take a Mobile Friendly test for your website with Google Developers tool here – https://developers.google.com/webmasters/mobile-sites/
Thank you, great tutorial.
Wanted to implement this a while ago but somehow postponed because I didn’t know it is so easy. Thank to this article, I did it in 2 minutes.
Keep up the good work 🙂
Hi, I think your tutorial is great, but the thing is I have a problem with my blog
aoimashii.blogspot.com
It says that “An interstitial is loading… If nothing happens try refreshing the page.”
in Vignettes and FSI
yet in Anchors it states that, “An anchor is being displayed. Users can simply slide the grippy bar to dismiss the anchor.” But I can’t find any anchors below my site??
What to dooooo?
Thanks for the steps,
Hi Pradeep,
Thanks for the helpful post.
It taught me how to better understand & work around Page-level ads much easier. So, I followed your instructions step by step and have just one query please. Does it take a few days for ads to start reflecting on my mobile site?
Because, what when I visit my site with the #googleads, I see the following message:
“An anchor is being displayed. Users can simply slide the grippy bar to dismiss the anchor.”But when i visit my website(without the hashtag at the end), no ad appears.
So was wondering does it take time to show or….? Also my website is mobile friendly. Please let me know.
Thanks much 🙂
Monica
Hi Monica,
Glad that it was useful to you.
The Ads should start showing immediately but as Google decides when it might be best/relevant to show the Ad, it might not be appearing for you.
You can also check the reports for the Page-level Ads in few days to see if they have been displaying for your visitors on your site.
Thanks for the article. but unlucky, the Page Level Ads is not yet available in my adsense account. When it will be available ?
Thank you Pradeep! I’ve been ignoring the nag from Google in my AdSense dashboard for a few months, but finally decided to give this a go. The information you have here is helpful.
BTW – have you had a chance to see how these have been performing on your site(s)?
Thanks for write this article . This is help me in placement page lavel ad.
Hi,
There are news from Google Adsense: they stopped the explicit limit of three ads per page and call it now a good relation between ads and content. I integrated page level ads easily with the free ad manager Advanced Ads (https://wordpress.org/plugins/advanced-ads/), which offers a comfortable option for the integration of PLA and of course lots of options to display ads on WordPress sites.
Hello thanks for article. I added the Vignette ads to my site 30 days ago to test it but i do not see any impressions? thus i am searching online to find out why 🙂 its there from testing the url however, it has only produced 2 impressions where the main account has shows 1700 impressions? strange as 78% of my traffic is coming by mobile, any ideas what would be happening here, top10bestholidaydestinations.com/#googleads
thanks
Lawrence
Much obliged to you Pradeep! I’ve been overlooking the bother from Google in my AdSense dashboard for a couple of months, yet at last chose to give this a go. The data you have here is useful.
BTW – have you had an opportunity to perceive how these have been performing on your site(s)?
Thanks for sharing good information
I completed the step you outline for Genesis and pasted the code from Google Adsense. It messed up my entire site……..What went wrong.
I cannot go back and delete the code as it is not there any more.
I completed this step precisely:
c. For Genesis users: Theme frameworks like Genesis (what we use here at WPism) provide a built-in option to add codes to your header.
– From your Dashboard, navigate to Genesis > Theme Settings.
– Place the code in the first box under the Header and Footer scripts
Thanks for sharing!
Shamelessly promoting my WordPress Plugin to drop-in Page Level Ads with ease. The implementation is pretty close to your suggested one, using a more modern approach for WordPress 4.5 and later.
Check it out: https://wordpress.org/plugins/page-level-ads-adsense/
Greetings from Germany,
Pascale
Thanks Mr. Pradeep your article is very helpful for me, for long time i search for page level ads, please also tell us about Content matching ads in our blog.
Can we use special responsive template for page level ads. When these ads appear on our site. I mean everytime page load in mibile broswer or sometimes?
Thanks for the post…
Thanks very much sir, your giude was helpful
Nice post Pradeep sir,
Now I will so these with my site,
thanks for this article I am getting confusion that how to ad code now I got clarity thank you very much.
Thanks for the great info.
I have been recently approved for Adsense ads.
As I use Genesis theme, I inserted the page level ads in the header and footer settings.
Now the problem is that On my mobile site I see ads above the post but in the desktop site It won’t show up( first time it showed but after refreshing it never showed again).
Also, the ads show up below the footer which in actual should show just below the post.
Should I use any plugin instead of directly inserting in the header?
My site notesforsapiens.com
thank you so much sir . I am new to wp , Specially i came from blogger to WordPress . Your article really helps me a lot to enable page level ads and Auto ads in my blog . Thanks a lot once again . Now my blog is enabled with Auto Ads & Mobile ads too .