How To Setup AdSense Page-level ads in BlogSpot?

setup adsense page-level ads in blogspot blogsPage-level ads have been rolled out recently and now available for use for all webmasters and bloggers. Page-level ads enable you to display AdSense ads on your blogger mobile templates. It helps you monetize your mobile templates just like you monetize mobile apps with Google Admob Ads.

Some interesting facts about Page-level Ads:

  • Shown by AdSense at optimal times to help increase revenue and provide a good user experience
  • Two new ad formats: anchor/overlay ads and vignettes
  • Don’t count towards your 3 ads per page limit - You can use them along with your content and link units.
  • Only display on mobile-optimized sites
  • Optimized to help increase revenue
  • Mobile Responsive!

I will discuss in detail the available Page-level formats, how to add code to the blogger template, and how to test the ads to see if they really work on your sites.

Page-level Ad formats

Following are the two types of Page level ad formats that are available so far:

Anchors

Anchor or overlay ads are mobile responsive ads that stick to the bottom of the user's screen and can easily be dismissed using the toggle down button at its top.

adsense page-level ads in blogger sites

Once the ad loads, an anchor is being displayed at the bottom of page that displays the ad. Users can simply slide the bar down to dismiss the anchor.

Vignettes

Vignette ads are full screen mobile ads that cover the entire interface of the webpage. They work exactly same as Admob's Interstitial ads used in mobile apps for android and iOS.

adsense page-level ads in blogger templates

Vignettes Ads appear as a popup between page loads on your blog. The user has the choice to either tap on the ad and continue to its destination, or close it and return to the webpage. The direct call to action and larger size combine make Vignettes Ads a particularly effective form of mobile advertisement.

Note:

  • Vignettes ads are displayed when the user leaves a page, not when when they arrive on one, so the user doesn’t have to wait for them to load.
  • Furthermore, they're also limited in number per user to maintain a good user experience.

Implement Page-level ad tags in Blogspot Blogs

To setup these new revenue boosting mobile ads on your blogger templates follow these easy steps:

1 Log into your AdSense account

2 Follow this link

3 Switch on both Anchor/Overlay and Vignette ads by clicking the two toggle buttons

enable adsense page-level ads in blogger

4 After that scroll down and click the button which says "Get code"

enable adsense page-level ads in blogger

5 Copy the code

adsense page-level ads code

6 Now go to Blogger > Template > Backup your template

7 Click Edit HTML and search for this code </head>

8 Paste your Page-level code just above </head>

  • Note: In your Page-level code, make one modification. Replace the attribute async with async=''
  • If you don't make this modification, blogger will give you an error message.

Error parsing XML, line 1473, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

9 Save your template and you are all done!

Test Page-level ads on your blogger template

  1. On your favorite mobile device, visit your blog to test Page-level ads.
  2. In the address bar of your mobile browser, add #googleads to the end of your blog's URL. For example in our case: www.mybloggertricks.com#googleads.
  3. Select the ad format that you want to test from the tabbed box that will appear just above your blog body..

Anchors and Vignettes Ads

      4.   See the ads in action!

Have you tried Page-level Ads yet?

Page-level ads were rolled out near October 2015 for specific locations but now they have been rolled out for all countries and publisher accounts. If you have already tried these new mobile optimized ads on your wordpress or blogger blogs then please share your experience with us and let us know how it effected your overall revenue.

If you have any questions related to the tutorial above, please feel free to post your queries below. Peace and blessings buddies! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

89 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. 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.
    - www.thecricketnation.com

    ReplyDelete
    Replies
    1. Thank you for finding this blog useful. That's all I aim for. Keeping you guys happy and updated. You are most welcomed Vinay. Thank you for the kind feedback =)

      Delete
  2. This is what I was waiting for. Thanks Mustafa Bhai..!

    ReplyDelete
  3. bro the script looks same as we put for other adsense ads. So do we need to add it again or not?

    ReplyDelete
  4. Bro the error is still coming after adding async= what should I do ??

    ReplyDelete
  5. I tried to add in my blogger and did the changes you told but getting error still

    Error parsing XML, line 533, column 8: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
    Replies
    1. Make sure both the script tags are closed. Look at this image below. Your code must look like it. Also remember to change async with this async=''


      [img src=https://lh3.googleusercontent.com/-3pMZk4-kgT4/VyIcHKtN0LI/AAAAAAAAQrk/2TWC_tM0DCo/image70.png?imgmax=800" width="95%"/]

      Delete
    2. I am getting the same error. I have the scripts closed as well as the =" after async (I've replaced < with ] in here so I could post the entire script)

      [script async=" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">[/script]
      [script]
      (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-6614017345593934",
      enable_page_level_ads: true
      });
      [/script]

      Delete
    3. async= (Don`t press shift button for apllying " sign. press 2 times '' this button. I had a same problem but by applying signs with this method, problem solve.
      Thanks Mustafa B.

      Delete
  6. I have enabled it but i am not seeing ads when surfing my own blog. And also in your blog. What may be the reason?

    ReplyDelete
    Replies
    1. To see ads on my blog open my blog in a mobile browser using your smartphone and then type this URL in the address bar:

      www.mybloggertricks.com#googleads

      Do the same for your blog. Add #googleads to the end of your URL

      Delete
  7. Thanks for this...have not tried it but has seen many bloggers in Nigeria using it. Your explanation makes me have interest in it.

    Will try it on www.myschooltrick.com and report back to you if i encounter any problem.

    I just hope adsense will not start to ban account with this.

    ReplyDelete
    Replies
    1. There are many talented nigerian bloggers that I know and I so happy to hear that you found the blog useful. You may surely try it out and share your stats with all of us so that it could help others too =)

      Delete
    2. As long as you follow Adsense TOS, it will never ban. I have been using AdSense for over 7 years. Read the story here.

      Delete
  8. Error parsing XML, line 6, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character
    mere pass ye aerror aa raha hai ise kese thik karenge

    ReplyDelete
    Replies
    1. Buddy simply replace the attribute async with async=''

      Delete
  9. jaise ki aapne abatya hai async ko hata dena hai .. to ye code ork kese karega ? please reply krna me apke answer ka wait karunga

    ReplyDelete
    Replies
    1. Don't remove async attribute, instead replace it with async=''

      Delete
    2. @Harun Shekh:
      Bhai code main async likha hai apko async ki jaga async=" likhna hai, simply.

      Delete
  10. It will work only in mobile devices not on your desktop or laptop or tablet. Open your blog inside a mobile device and then add this #googleads parameter to its end like this:

    www.mybloggertricks.com#googleads

    Do the same for your blog.

    ReplyDelete
  11. Hi Mustafa,
    Thanks for sharing this information. But I'm not understanding how to show page level ad on mobile device. Have any live example?

    ReplyDelete
  12. For stupid people like myself...could you please put here the entire text we should get? please... I don't get it. I have async src="... Where do I put the "=" if I already have one after src? Thaks a MILLION

    ReplyDelete
    Replies
    1. hello, your code shoudl look like this>> async=" src=" instaed of async src="

      Delete
    2. Here is it Georgiana, after activation and copy the code, all you need to do is to remove SRC=" atribute and replace it with only async=" i couldn't post the full html here, its not allowed. once again remove or cancel the SRC in the code and leave just ASYNC=" hope this help?

      Its Fully working on http://techpill.net

      Delete
  13. Hello thanks i followed the implementation process and it works for my blog dsuccesscenter.blogsport.com but i am having issue with my blog layout it dont when i make any rearrangement to the layout it give me message like this ( an error occur please refresh the page and try again) what can i do to get this fixed please?? thanks for you anticipated reply

    ReplyDelete
  14. I did it correctly, i implemented the code in my head tag, but the ads are not showing on my blog, i opend your website and the ads are showing; please what could be wrong?

    ReplyDelete
  15. Hello
    Are these kind of code modifications entertained by Google? Please let me know if who ever made this change are running page level ads successfully
    Thank you

    ReplyDelete
  16. Bro after adding async=" the error is still coming.. Error parsing XML, line 1838, column 23: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
    Replies
    1. Got the same error when changing async to async="

      Delete
    2. Oh yeah I found it :). It isn't async=" but async=' '
      It needs to be seperate ' and not the double one :p

      Delete
    3. Try this to solve that error:
      Got to the end of this script line:
      script async=" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

      remove the > at the end of the line (behind .js") and place it back.

      This will solve this error.

      Br,
      TT

      Delete
    4. Tomas Tree you are a genius!!

      Delete
  17. Hello i have added the code on my blog and when i check it this way dsuccesscenter.blogspot.com#googleads it will show but when i open the blog on phone it will not show page level ads...... Help please

    ReplyDelete
  18. its not working for me and I have put async="

    ReplyDelete
    Replies
    1. Hi, no need to worry! it works for me on http://slyhealthspot.com, you can check it out.

      after adding the 'async=' (excluding the quotation marks), remove the 'src='that follows. Hope this helps? my fellow Nigerian bloggers have been using it, and it works. Checkout http://slyhealthspot.com to see how it works. Thanks

      Delete
  19. Hello,

    I am using blogspot. When I unabled the Page level ads, and type mybloggspot...#googleads, it showing below error in mobile.

    The requested ad might not be shown to real users for the following reason.

    The page-level tag was not the first ad loaded on the page.

    I have added code after head>.

    How can i solve this issue?

    ReplyDelete
    Replies
    1. please ad this above < /head> and also change async to async=''

      Thanks
      www.androidhelping.com

      Delete
  20. Thanks Mustafa Brother, this tutorial really helped me to implement it for my site and this is perfectly working now for thinklikegiant.com .....

    ReplyDelete
  21. jaisa k ye erorr ata h https version select ho to? Custom templates that mix HTTP and HTTPS may affect the security and user experience of your blog when it is viewed over HTTPS.

    ReplyDelete
  22. bro, how to add page level ads in blogger default mobile template?

    ReplyDelete
    Replies
    1. Works currently on custom mobile templates only. I strongly recommend you make your template responsive by reading our series on responsive blogger templates

      Delete
  23. Bro my site is showing anchor ad but how I can choose ad format?

    ReplyDelete
    Replies
    1. By switching on Anchor/Overlay and Vignette ads by clicking the two toggle buttons in your adsense account

      Delete
  24. I have added on my blog www.droidphoria.com/ ! But I can't see the ads with mobile :( Even after I log out from Adsense Account :( ! Please help me :(

    ReplyDelete
    Replies
    1. Did you switch on both Anchor/Overlay and Vignette ads by clicking the two toggle buttons in your adsense account?

      Please add the code above closing head tag only

      Delete
    2. I forgot to Switch.

      Alright, It's working now :)

      Thanks Mohammad Bhai :)

      Delete
  25. Ads are not showing on my website.

    ReplyDelete
  26. Hi its showing on www.teckop.com. Can you please check and revert what is the problem.

    ReplyDelete
  27. Update:

    For most of you who are getting confused with async

    Please note that it is a single quotes not double quotes. Simply replace the attribute async with async=' '

    Most of you recommended to remove the src=" attribute. Please don't remove src=" else your add code will not function properly

    ReplyDelete
  28. I did all u said
    There wasn't any errors.
    But also my blog doesn't show up any ads. Plz help

    ReplyDelete
  29. I get this notification

    Error parsing XML, line 5, column 23: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
  30. Error parsing XML, line 1364, column 23: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
    Replies
    1. Try this to solve that error:
      Got to the end of this script line:
      script async=" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

      remove the > at the end of the line (behind .js") and place it back.

      This will solve this error.

      Br,
      TT

      Delete
  31. Is safe to modify Adsense code? Thanks

    ReplyDelete
    Replies
    1. No you cant modify synchronous adsense code but you can change the stylesheet of ads using responsive ad units like asynchronous code

      Delete
  32. if you still having error! don't put double quote(") in async(it will not works), but singgle quote (') 2x (')('). of course it will look like this (")

    ReplyDelete
  33. Dear sir i have added same code from this website http://onlinepakistanofficial.blogspot.com/ but i switches on form ad when i test on mobiletest.me ads it's not showing please tell me what is the problem or reason of not showing because i am testing on mobiletest or what please sir tell me

    ReplyDelete
    Replies
    1. Test only using a real smartphone. It wont work on mobile emulators like mobiletest.me or any other. Kindly test it using your actual cellphone

      Delete
  34. Hello... Page Level Ads don't count towards your 3 ads per page limit? It means that I can have 3 regular adsense ads and then I can have additional page level ads?

    ReplyDelete
  35. i already have 3 ads running on my site and i have added page level ad based on ur instructions. must i remove any ad in this page to make page level ad work

    ReplyDelete
  36. async="src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

    This is my code and below is the error i receive

    Error parsing XML, line 10, column 22: Element type "script" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
    Replies
    1. Try this to solve that error:
      Got to the end of this script line:
      script async=" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

      remove the > at the end of the line (behind .js") and place it back.

      This will solve this error.

      Br,
      TT

      Delete

    2. if the script code that you attach still goes wrong , maybe you can try it this way.
      This prefix / originals are :
      async src='

      try to use the code I wrote the following :
      asyncsrc='

      I hope in this way can solve your problem before. thanks.

      greeting http://tutorialmixs.blogspot.com

      Delete
  37. Great instructional! You have continued to solve any issues I run into with my blog. Thank you for sharing and keep up the great work!

    - enterelite.blogspot.com

    ReplyDelete
  38. will try dude on my blog ! thanks for sharing

    ReplyDelete
  39. Hi, I followed step by step what you wrote in this article; however, there's an error that has been using to occur:
    "The viewport is not between 320 and 420 pixels wide
    The device is ont in portrait mode
    The current browser is ont supported"

    How do I get to the bottom of this problem?

    ReplyDelete
  40. isnt that we dont allowed to modified ads code? its it ok to modify the code?

    ReplyDelete
  41. Brother,

    I am facing the same problem while checking my website "http://www.currentnewsblog.com/#googleads"

    It show the following errors for portraits and vignettes:
    "The viewport is not between 320 and 420 pixels wide
    The device is ont in portrait mode
    The current browser is ont supported"

    Plseas solve the above problems.

    ReplyDelete
  42. it says that "An interstitial is loading... If nothing happens try refreshing the page." I always refresh my page it always like that, how to fix this?

    ReplyDelete
  43. Thanks man for the post. I was frustated with the xml error of " async src". Its working now..!

    ReplyDelete
  44. I have tried this on my website: ramepedia.com It's work. Thank you so much.

    ReplyDelete
  45. Getting below error Please help

    This page cannot display anchor ads for the following reason(s):
    The viewport is not between 320 and 420 pixels wide.
    The device is not in portrait mode.
    The current browser is not supported.

    ReplyDelete
  46. hi when i added code sucessfully but i having this message on the screen that You are using custom ad units. QuickStart ads cannot be used with custom ad units so please help me???

    ReplyDelete
  47. bro i am having problem while placing page level ads on my blogger theme.

    If place it right below the head tag, the ads is showing perfectly but makes my links in that page is not clickable, if i click a link nothing will happen.

    And the anchor ads is not closeable.

    Please take a look at my website
    www.dounkey.com

    ReplyDelete
  48. Muhammad I think You Should made an update on the top of this post because now you need not async with async=''. Blogger Automatically make modification when you click on save template after pasting code of pagelevel ads. Thanks You.

    ReplyDelete