How To Setup AdSense Page level ads on Blogger

How To Setup Page level ads in Blogger

Recently, Google AdSense (Google Ads) have rolled out it’s Page level Ads which are now available to be used globally. These are similar to monetizing your Mobile apps (AdMob Ads)
Page level Ads are Mobile only ads, i.e. these appear only for mobile viewers!

What’s so special about Page level Ads?

  • Mobile Responsive

Hell Yeah! Google Adsense optimizes it for Blogger Mobile templates!… All you need is a good Responsive and Optimized Blogger Template! 

Here are some Free Blogger Templates, all of these are Mobile Responsive, SEO Optimized Blogger templates!

  • AdSense will automatically show Page level ads at the right times to provide a good experience for your users as well as increase your revenue!
  • Doesn’t count 3 ads per page limit policy by Google ads. Now you can place the 3 ads while monetizing your blog with Page level ads!
  • Only serve on mobile-optimized webpages on high-end mobile devices

Page level Ad Formats

As of now, there are 2 types of Ad Formats which have their own different features! I’ll brief them up for you!
 

Anchor/Overlay Ads

Anchor or Overlay Ads are basically really small ads which display at the bottom of the mobile user screen! These can easily be swiped/dismissed down by a simple toggle button at it’s top.
 
  • The Impressions of Anchor Ads are wayy more than Vignette Ads… So…. apply Anchor Ads and earn more money by displaying Google Ads
  • These appear when a user arrives at your webpage!

Anchor Ads
Anchor Ads

 

Vignette Ads

Vignette Ads are simply the ads which appear when your user clicks on an active hyper-link and the Ad covers the whole interface.
 
  • The Ad pops up when the user leaves a page (when a hyper-link is clicked)
  • The Impressions on Vignette Ads are very less for people who don’t Inter-link in their Blogposts!
Vignette Ads
Vignette Ads


Setup Page level Ads for Blogger 

Things work differently with Blogger! So here are some easy steps!
 
  1. Sign in on Google AdSense
  2. You’ll see Page level Ads introduction on the Dashboard. OR  Just simply Follow this link
  3. Activate both Anchor/Overlay and Vignette Ads.Page level ads implement
  4. Click on <>Get Code buttonGet Code
  5. Box will pop up; Copy the codePage level ads code

    It’ll look like this

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({
     google_ad_client: "ca-publisher id",
     enable_page_level_ads: true
     });
     </script>
  6. Now go to Blogger > Template > Edit HTML
  7. Search in Code [Ctrl + F OR Cmd + F] for <head></head> tag
  8. Paste your copied code in between the <head></head> tag
  9. NOTE :  After adding your code; make sure you do the following change!
    <script async='' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({
     google_ad_client: "ca-publisher id",
     enable_page_level_ads: true
     });
     </script>
  10. Make sure you replace async src=’……’ with async=” src=’……’
Page level ads in Template
Page level ads in Template


Test Page level Ads visibility on your Blogger Template

  • Go to www.yourwebsite.com on your mobile phone
  • Change the URL to www.yourwebsite.com#googleads
  • Google Page level Ads Box will appear on the top of your site; click on Anchor/Overlay and Vignettes turn by turn and test them on!
Test adsense ads
Test ads


11 thoughts on “How To Setup AdSense Page level ads on Blogger”

  1. Thank you for the tutorial, I have done the aboved instruction on adding a page level ad but non of the ads is showing on my website. I don’t know the cause. If you have any idea on what has gone wrong, please tell me.

    I really appreciate the Tutorial once more thank you.

    Reply
    • Hey Ani!

      I hope you’ve applied the code correctly and followed the steps as well.

      Now coming to issue, I’m assuming that your website isn’t displaying those Anchor and Vignette Ads.
      That’s fine, These aren’t 100% Active View-able (i.e. – they may not appear everytime)
      Just follow the last step to Test Page level Ads visibility, If they’re displaying on your browser then don’t worry, it’s fine.

      Thanks for your appreciation 🙂

      Reply
  2. The requested ad might not be shown to real users for the following reason(s):

    Page-Level ad format disabled in AdSense Front End.

    An anchor is being displayed. Users can simply slide the grippy bar to dismiss the anchor.

    Reply
    • Hi Ali!

      The error can be simply solved by following these steps!

      1. Login on to AdSense
      2. Look for Page-Level Ads and turn it ON

      Now Check if you still get the Error.

      If you are still getting this error :

      An anchor is being displayed. Users can simply slide the grippy bar to dismiss the anchor

      I would recommend you to add the following meta tag in your Blogger Template
      content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’

      Let me know if it solved the issue or not!

      Reply
  3. Hi,

    I am unable to find tags in my blogs html code. so i am not sure where to post the script. I placed in between the code but ads are not visible.

    Please help.

    Reply
  4. Hello, Thanks for this tutorial.

    Initially I was using this code so it can parse the Blogger xml and successfully be saved

    But it was only showing Anchor Ads.
    This line of code from your post did it for me:

    Thanks for sharing 🙂

    Reply
  5. I have installed AutoAds, but the desktop shows anchor adsense, but does not show the Anchor adsense on mobile. How to solve it

    Reply

Leave a Comment