Skip to main content

How to set up Page-level AdSense ads in your blog

This article describes Page-level ads, a new type of AdSense advertisement which Google has recently introduced.   It includes how to set up these ads if you use Blogger, and some troubleshooting information about them.  

It also describes how to fix an error in the code which is supplied, which causes a message like "Attribute name "async" associated with an element type "script" must be followed by the ' = ' character".



What are Page Level AdSense ads

Google has recently introduced a new type of Adsense ad-units, which may be shown to people who visit a website using a mobile device (eg smartphone of tablet),

There are two types of Page-level ads:
  • Vignette ads:   When a visitor on your site clicks on a link to another page on you site, a vignette ad may be loaded as a full-page overlay which the user needs to close before they see the page which they navigated to.
  • Overlay ads:   these are smaller ads which show at the top or bottom of your screen, and which "stick" to the edge, so they seem to stay in place as the user scrolls up and down your site.   The visit may click on them in the usual way.

For Blogger users, these ads are only currently available if you have a full AdSense account: if you only have a hosted AdSense account, then you cannot get the code to install them.   But if you do have a full AdSense account (either because you have a custom domain, or because you signed up for AdSense before the "host AdSense account" option was introduced), they are attractive because they don't count towards the count of advertisement-units which you are allowed to display on each page.

They also only work if you have a mobile template switched on for your blog, so that visitors who use a mobile device see mobile-optimised screen.


How to install AdSense Page Level ads in Blogger

Log in to your AdSense account.

Go to the My Ads tab

Turn on one or both of  Overlay or Vignette ads options.
(By default, they are both turned Off.    Click on the empty box beside the "0" to turn an option to  on:  in these controls, 0 means "off" and 1 means "on".)




Click the < > Get Code button.

Copy the code that is generated.

Switch to Blogger, and edit your template in the usual way.

Find the text   <head>    (including the brackets).

On the very next line after <head>, paste in your code.

Optional - but highly recommended - add comments to clearly show what this code is for.   I usually use
<!-- START ADSENSE PAGE LEVEL ADS -->
and then the code goes in here ...
<!-- END ADSENSE PAGE LEVEL ADS -->
Preview the template, and make sure it's working.
(See Troubleshooting section below if you get a message about   Attribute name "async" associated with an element type "script"    or similar.

Save the template.



Job done!   This is all you need to do to enable page-levels ads for your blog:   you do not need to install gadgets to say where these ads go, because Google handles this for you.


How to see what page-level ads look like in your blog

Visit your blog using a smartphone or tablet.

Add the text   #googleads   at the end of the website address, so it changes from something like:
http://blogger-hints-and-tips.blogspot.com/?m=1
to something like:
http://blogger-hints-and-tips.blogspot.com/?m=1#googleads

After this, when you click on a link to move a different page in your blog,  a Vignette style ad will display - these are whole-page ads, which include a "close ad" button, like this:



Troubleshooting

Extra "src" text in the ad-code

Right now, there is a problem with the code that AdSense are providing.   I don't know if this is because Blogger doesn't understand a feature that AdSense is using, or if it's a genuine bug.    But if you see a message like this when you try to preview the template:
Could not load template preview: Error parsing XML, line 21, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.
then there's a very simple change that you have to make.

All you have to do is delete the "src" immediately after the word async.

So your code changes from like this:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",
    enable_page_level_ads: true
  });
</script>

to like this:
<script async ="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",
    enable_page_level_ads: true
  });
</script>

Different Page Level settings for different websites

If you are using Adsense across several different websites, then you may want to enable one of vignette or overlay ads on some sites, and a different option on others.

Currently, there is no way to do this:  you must choose one combination of:
  • No Page Level ads
  • Overlay ads only, no Vignette ads
  • No Overlay ads, but do show Vignette ads
  • Allowing Google to choose Overlay and/or Vignette ads

Stop Vignette ads being attached to some links

By default, any link to another page in your blog may have a Vignette ad attached to it.    However there may be some links which you specifically don't want this to happen to - for example if the user really needs to remember what was on the current page once the get to the next one.

You can prevent any Vignette ads being displayed when a user clicks a link by adding a tag to the link.

The tag to add is:
data-google-vignette=”false”

and you need to switch to Edit HTML (top left of the post-editor window) to add it.

This is an example link to another page on this blog which is prevented from having a Vignette ad, and this is the HTML code I've used to achieve this.
<a data-google-vignette=”false” href="http://blogger-hints-and-tips.blogspot.com/2010/02/stop-malicious-use-of-your-adsense.html">an example link</a> 

More help

Google have provided more information about Page level ads here.



Related Articles

Setting up a mobile template for your blog

Editing your Blogger template

Hosted AdSesne accounts for Blogger users

Comments

Popular posts from this blog

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog. Turnips (Brassica rapa)  from Wikimedia commons Originally posted to Flickr   by thebittenword.com.   Licensed under the terms of  the cc-by-2.0. If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory .   They may even tell you to use an FTP  tool to do this. Sometimes this happens when a product also gives you code to install into your blog  , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger. Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking...

How to change or remove the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the b ottom of Blogger blogs with Layout or Designer templates. Why are the older and newer posts links used Most designer and layout templates have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts. This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts. The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog. But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog. How to remove "Newer Posts" and "Older Posts" from your blog To totally remove these items, you just add some new...

How to share pictures from Google Photos, using shareable-links

This article describes how to get a link to one ore more photos from your Google Photos collection, using the Shareable Link controls.   It also explains how to delete shareable links that you have made in the past Google Photos is a tool for managing picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . Shareable Links are a new type of linking introduced in Google Photos, which let you easily share one or more pictures at the same time.   You can email them, or use them in tools like Facebook. When someone opens a shareable link, they see a display with the date, the name and picture of the person who is logged in to Google at the time, and all the pictures that are included in the same shareable link. If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find the URL for the photo, instead. How to get the shareable link for one photo in Google Pho...