How To Setup AdSense Page-level ads in Blogspot

Page-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 Sites. It helps you monetize your mobile templates just like you monetize mobile apps with Google AdMob Ads and improve and increase your revenue. Page-Level Ads feature is now available in all countries. 


About Page-Level Ads: Shown by Google 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.

Page-Level Ad Formats:

Two Types Of Page-Level Ads Are Available For Mobile Site:

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.

Vignettes ads are displayed when the user leaves a page, not 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 Ads Code In Blogger:

Setup this ad code in your blogger template editor to boost your revenue:

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.
4. After that scroll down and click the button says "Get code".
5. Copy the ad code.
6. Go To Blogger >Template Editor.
7. Click Edit HTML and search for this code </head> 
8. Paste your Page-Level Ad code just above </head>


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.

That's it. You all done!


For WordPress Users:

Add Plugin: Install Insert Headers And Footers Plugin that lets you add scripts without messing your code.

1. Go To Settings > Insert Headers And Footers.
2. Copy the Ad Code and paste to the “Scripts In Headers” section of the page and click on “Save Settings”.

For WordPress.com: Copy the Ad Code and paste before </head>

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.

For Genesis Users: Theme Frameworks like Genesis provide a built-in option to add codes to your header.

1. From your Dashboard, navigate to Genesis > Theme Settings.

2. Copy the code and paste under the Header and Footer scripts. 


Before you try this Page-Level Ad beta feature kindly backup 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 #googleads to the end of your blog's URL.

Example: 

Select the ad format that you want to test from the tabbed box that will appear just above your blog body.

Watch Tutorial: