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.
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.
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
3 Switch on both Anchor/Overlay and Vignette ads by clicking the two toggle buttons
4 After that scroll down and click the button which says "Get code"
5 Copy the 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
- On your favorite mobile device, visit your blog to test Page-level ads.
- In the address bar of your mobile browser, add
#googleadsto the end of your blog's URL. For example in our case:www.mybloggertricks.com#googleads. - Select the ad format that you want to test from the tabbed box that will appear just above your blog body..
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 »
Mohammad
4/28/2016
Make Money Online
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.
ReplyDelete- www.thecricketnation.com
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 =)
Deletethank you!
ReplyDeleteThank you for reading it! :)
DeleteThis is what I was waiting for. Thanks Mustafa Bhai..!
ReplyDeleteAlways a pleasure =)
Deletebro the script looks same as we put for other adsense ads. So do we need to add it again or not?
ReplyDeleteyes you will have to add it again.
DeleteBro the error is still coming after adding async= what should I do ??
ReplyDeleteadd this async=''
Deletenot this
async=
"async"=
ReplyDeleteI tried to add in my blogger and did the changes you told but getting error still
ReplyDeleteError parsing XML, line 533, column 8: Element type "script" must be followed by either attribute specifications, ">" or "/>".
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=''
Delete[img src=https://lh3.googleusercontent.com/-3pMZk4-kgT4/VyIcHKtN0LI/AAAAAAAAQrk/2TWC_tM0DCo/image70.png?imgmax=800" width="95%"/]
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)
Delete[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]
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.
DeleteThanks Mustafa B.
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?
ReplyDeleteTo see ads on my blog open my blog in a mobile browser using your smartphone and then type this URL in the address bar:
Deletewww.mybloggertricks.com#googleads
Do the same for your blog. Add #googleads to the end of your URL
Thanks for this...have not tried it but has seen many bloggers in Nigeria using it. Your explanation makes me have interest in it.
ReplyDeleteWill 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.
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 =)
DeleteAs long as you follow Adsense TOS, it will never ban. I have been using AdSense for over 7 years. Read the story here.
DeleteError parsing XML, line 6, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character
ReplyDeletemere pass ye aerror aa raha hai ise kese thik karenge
Buddy simply replace the attribute async with async=''
Deletejaise ki aapne abatya hai async ko hata dena hai .. to ye code ork kese karega ? please reply krna me apke answer ka wait karunga
ReplyDeleteDon't remove async attribute, instead replace it with async=''
Delete@Harun Shekh:
DeleteBhai code main async likha hai apko async ki jaga async=" likhna hai, simply.
very nice, thanks
ReplyDeleteMy pleasure soliano =)
DeleteIt 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:
ReplyDeletewww.mybloggertricks.com#googleads
Do the same for your blog.
Hi Mustafa,
ReplyDeleteThanks for sharing this information. But I'm not understanding how to show page level ad on mobile device. Have any live example?
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
ReplyDeletehello, your code shoudl look like this>> async=" src=" instaed of async src="
DeleteHere 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?
DeleteIts Fully working on http://techpill.net
It worked, thanks!
ReplyDeleteHello 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
ReplyDeleteI 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?
ReplyDeleteHello
ReplyDeleteAre 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
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 "/>".
ReplyDeleteGot the same error when changing async to async="
DeleteOh yeah I found it :). It isn't async=" but async=' '
DeleteIt needs to be seperate ' and not the double one :p
Try this to solve that error:
DeleteGot 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
Tomas Tree you are a genius!!
DeleteHello 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
ReplyDeleteits not working for me and I have put async="
ReplyDeleteHi, no need to worry! it works for me on http://slyhealthspot.com, you can check it out.
Deleteafter 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
Hello,
ReplyDeleteI 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?
please ad this above < /head> and also change async to async=''
DeleteThanks
www.androidhelping.com
Thanks Mustafa Brother, this tutorial really helped me to implement it for my site and this is perfectly working now for thinklikegiant.com .....
ReplyDeletejaisa 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.
ReplyDeletebro, how to add page level ads in blogger default mobile template?
ReplyDeleteWorks currently on custom mobile templates only. I strongly recommend you make your template responsive by reading our series on responsive blogger templates
DeleteBro my site is showing anchor ad but how I can choose ad format?
ReplyDeleteBy switching on Anchor/Overlay and Vignette ads by clicking the two toggle buttons in your adsense account
DeleteI 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 :(
ReplyDeleteDid you switch on both Anchor/Overlay and Vignette ads by clicking the two toggle buttons in your adsense account?
DeletePlease add the code above closing head tag only
I forgot to Switch.
DeleteAlright, It's working now :)
Thanks Mohammad Bhai :)
Ads are not showing on my website.
ReplyDeleteHi its showing on www.teckop.com. Can you please check and revert what is the problem.
ReplyDeleteUpdate:
ReplyDeleteFor 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
I did all u said
ReplyDeleteThere wasn't any errors.
But also my blog doesn't show up any ads. Plz help
I get this notification
ReplyDeleteError parsing XML, line 5, column 23: Element type "script" must be followed by either attribute specifications, ">" or "/>".
Error parsing XML, line 1364, column 23: Element type "script" must be followed by either attribute specifications, ">" or "/>".
ReplyDeleteTry this to solve that error:
DeleteGot 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
Is safe to modify Adsense code? Thanks
ReplyDeleteNo you cant modify synchronous adsense code but you can change the stylesheet of ads using responsive ad units like asynchronous code
Deleteif 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 (")
ReplyDeletenot working
DeleteDear 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
ReplyDeleteTest only using a real smartphone. It wont work on mobile emulators like mobiletest.me or any other. Kindly test it using your actual cellphone
DeleteHello... 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?
ReplyDeleteThanks
Deletei 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
ReplyDeleteasync="src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
ReplyDeleteThis 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 "/>"
Try this to solve that error:
DeleteGot 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
Deleteif 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
thanks man. it's working.
ReplyDeleteGreat instructional! You have continued to solve any issues I run into with my blog. Thank you for sharing and keep up the great work!
ReplyDelete- enterelite.blogspot.com
Very nice trik, thanks you...
ReplyDeletewill try dude on my blog ! thanks for sharing
ReplyDeleteHi, I followed step by step what you wrote in this article; however, there's an error that has been using to occur:
ReplyDelete"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?
isnt that we dont allowed to modified ads code? its it ok to modify the code?
ReplyDeleteBrother,
ReplyDeleteI 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.
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?
ReplyDeleteThanks man for the post. I was frustated with the xml error of " async src". Its working now..!
ReplyDeleteI have tried this on my website: ramepedia.com It's work. Thank you so much.
ReplyDeleteWhy google made this mistake?
ReplyDeleteGetting below error Please help
ReplyDeleteThis 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.
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???
ReplyDeletebro i am having problem while placing page level ads on my blogger theme.
ReplyDeleteIf 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
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