Add New Page-level Ads of Adsense in WordPress

Google Adsense Page Level Ads

Google Adsense has rolled out a new family of ad formats called Page-level Ads to experiment with a new format of ads for publishers.

Adsense Page-level Ads introduce two new formats of ads – anchor/overlay ads and vignettes. Both ads formats are mobile only and will display only on mobile-optimized websites.

Introducing Page Level Ads by Google Adsense

In this tutorial, I will walk you through steps that you can add it to your WordPress website. I will also explain about 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 http://www.yourwebsite.com/#googleads on mobile device and you might see a preview of page-level ads. You don’t need to be approved for such 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.

WPism Anchor ad Page-level Ads Google Adsense

 

A bit of Disclaimer first;

I was recently invited by Google Adsense research team here in London headquarters for feedback on upcoming projects. I am not revealing anything from the private research session.

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.

New Page-Level Ads from Google Adsense

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 about 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 why you should add page-level ads if responsive ads are already working for you. Here’re 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.

Two new ad Formats Anchor Vignette Ads

1. Anchor/Overlay Ads – Google Adsense

Anchor ads work by allowing banner ad unit 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 blogpost from 2013).

Anchor overlay ads Google Adsense

Anchor ads stick to the bottom of the user’s mobile screen and can be easily dismissed by the user.

After testing here are 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 Google Adsense

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 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 at any point.

Such behaviour of vignette ads is applied to maintain a good user experience.

For Vignette ads, here are few situations that the Ad 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 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 in your WordPress.

  1. Login to your Adsense account to see if you are approved for the feature.
  2. Navigate to My Ads tab on top menu.
  3. Select Content > Page-level ads (again, you will only see this if you are approved for these ads).
  4. Turn on the page-level ad formats that you’d want to implement.
  5. Click on the Get code button to generate the required code for your AdSense account.
  6. Add the code in the head section of your WordPress (details below).

See the screenshot below for the above process.

Page Level Ads Anchor Overlay Vignette Settings

If you have turned on both the ad formats, this is what your AdSense code looks like;

https://gist.github.com/pradeepdotco/170efd1cc2ac1893fc55

Once you have your code ready, you will need to add that to the head section of your WordPress website. There are few ways you can do this.

a. Add with a plugin: Install Insert Headers and Footers plugin that lets you add scripts without messing 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”.

Adsense Ad Scripts in Header

b. For Pro users: If you are comfortable editing your theme, place the above code to your head section of your template. You can also place it on top of your opening body tag in 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.

Header Script Google Adsense Genesis

Test Page-level Ads

After adding the code, go through the recommended steps to see if you have implemented the code correctly.

Test Page level ads Google AdSense

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 behavior 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 My ads tab.

See the screenshot below to see the link to “view Page-level ads report” as shown on the page.

Page-level ads performance reports link adsense

This should take you to a new report type page with Anchor/overlay ads selected.

Page Level Ads Report Adsense Dashboard

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 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.

Mobile Friendly Test WPism

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 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.

Pradeep Singh

Pradeep Singh

Pradeep Singh is the founder and your host here at WPism. He is an entrepreneur and blogger living his startup life based in London and Cambridge. Follow him on Twitter or like his page on Facebook.
Share on reddit
Share This Article
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on twitter
Twitter

54 Responses

  1. 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!

    1. 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!

    2. 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.

    1. 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.

    1. 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.

  2. 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

  3. 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.

  4. Have Page-Level Ads activated on http://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.

    1. 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.

  5. 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

  6. 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…

  7. 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..!

  8. 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…

  9. 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

  10. 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.

  11. 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

  12. 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 🙂

  13. 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?

  14. 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

    1. 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.

  15. 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)?

  16. 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.

  17. 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

  18. 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)?

  19. 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

  20. 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.

  21. 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

  22. 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 .

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our list

Our Exclusive Deals

Share this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Help us share this post with your network?
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Want to keep updated with WordPress?

Join our monthly newsletter to receive best curated WordPress resources.

Want to keep updated with WordPress? Join our monthly newsletter.