Tutorial: Advertising

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

<b>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.  </b><br /><b><br /></b> <b>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".</b><br /><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><h2>What are Page Level AdSense ads</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITXM1qilm0HshAqqKQIFNKN1Ymo2icyWi7d_wYFE1ONu8q1gF7ezQRBYcsOGTcU9MnLF2SeaI6Mg2ByrnEEpv-KWTU0o939GkkbckQd96Lt56m6svDU_78Mf0Uy5tbcJ28vyh21lKaZ9f/s1600/adsense-page-level-ads-and-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITXM1qilm0HshAqqKQIFNKN1Ymo2icyWi7d_wYFE1ONu8q1gF7ezQRBYcsOGTcU9MnLF2SeaI6Mg2ByrnEEpv-KWTU0o939GkkbckQd96Lt56m6svDU_78Mf0Uy5tbcJ28vyh21lKaZ9f/s320/adsense-page-level-ads-and-blogger.png" width="320" /></a></div>Google has recently introduced <a href="http://adsense.blogspot.ie/2016/04/AdSense-page-level-ads.html" target="_blank">a new type of Adsense ad-units</a>, which may be shown to people who visit a website using a mobile device (eg smartphone of tablet),<br /><br />There are two types of Page-level ads:<br /><ul><li><b>Vignette ads:   </b>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.</li></ul><ul><li><b>Overlay ads:   </b>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.</li></ul><br />For Blogger users, these ads are only currently available if you have a full AdSense account:   if you only have <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/simpler-but-more-limited-adsense-sign.html">a hosted AdSense account</a>, 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.<br /><br />They also only work if you have a <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">mobile theme switched on for your blog</a>, so that visitors who use a mobile device see mobile-optimised screen.<br /><br /><div><br /></div><h2>How to install AdSense Page Level ads in Blogger</h2>Log in to your AdSense account.<br /><br />Go to the <b>My Ads</b> tab<br /><br /><b>Turn on</b> one or both of  Overlay or Vignette ads options. <br /><i>(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".)</i><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRjbYbPd8Mge2wHyJGGmDslr6U4hHIw7oBKvDBMxOOwIGeR1rcbNJ_8OvuFHTlDJdQ0bRn3siFzRQ1tSY_sq4ZiYrycfpgYR6iVHYSZ3gGp648IO78YISLLXkGKxqYCEjot67fAwHQuG4t/s1600/choose-adsense-page-level-ads-options.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRjbYbPd8Mge2wHyJGGmDslr6U4hHIw7oBKvDBMxOOwIGeR1rcbNJ_8OvuFHTlDJdQ0bRn3siFzRQ1tSY_sq4ZiYrycfpgYR6iVHYSZ3gGp648IO78YISLLXkGKxqYCEjot67fAwHQuG4t/s640/choose-adsense-page-level-ads-options.PNG" width="640" /></a></div><br /><br /><br />Click the <b>< > Get Code</b> button.<br /><br /><b>Copy</b> the code that is generated.<br /><br />Switch to Blogger, and <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">edit your theme</a> in the usual way.<br /><br /><b>Find </b>the text   <head>    (including the brackets).<br /><br />On the very next line after <head>, <b>paste </b>in your code.<br /><br />Optional - but highly recommended - <b>add comments </b>to clearly show what this code is for.   I usually use<br /><blockquote class="tr_bq"><br />and then the code goes in here ...<br /></blockquote><div>Preview the theme, and <b>make sure it's working</b>. <br />(See Troubleshooting section below if you get a message about   <i>Attribute name "async" associated with an element type "script"</i><b><i>    </i>or similar<i>.</i></b></div><div><br /></div><div><b>Save </b>the theme.<br /><br /><br /><br /><b>Job done!   </b>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.</div><div><br /></div><div><br /></div><div><h2>How to see what page-level ads look like in your blog</h2></div><div>Visit your blog using a smartphone or tablet.</div><div><br /></div><div><b>Add the text   #googleads</b>   at the end of the website address, so it changes from something like:</div><blockquote class="tr_bq">http://blogger-hints-and-tips.blogspot.com/?m=1</blockquote><div>to something like:</div><blockquote class="tr_bq">http://blogger-hints-and-tips.blogspot.com/?m=1#googleads</blockquote><div><br /></div><div>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:</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFWuM6ViOE_capIq_ioop68vBV26PwNFOnF7ZRSRzbPVWDGGHy7JY0iNAlIhbXtOmLmYqv7c8kDEQIs5sdNLwBU6hI6Z9xpE1TRYGaQSosS1CKy0EMhlvlkGDwd_Svjv2OZUPi_PINCTvd/s1600/adsense-overlay-page-ad-with-close-and-report-ad-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFWuM6ViOE_capIq_ioop68vBV26PwNFOnF7ZRSRzbPVWDGGHy7JY0iNAlIhbXtOmLmYqv7c8kDEQIs5sdNLwBU6hI6Z9xpE1TRYGaQSosS1CKy0EMhlvlkGDwd_Svjv2OZUPi_PINCTvd/s400/adsense-overlay-page-ad-with-close-and-report-ad-buttons.png" width="257" /></a></div><br /><br /></div><h2>Troubleshooting</h2><h3>Extra "src" text in the ad-code</h3>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 theme:<br /><blockquote class="tr_bq"><span style="background-color: #f3f3f3; color: red; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; line-height: 25px;">Could not load theme preview: Error parsing XML, line 21, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.</span></blockquote>then there's a very simple change that you have to make.<br /><br />All you have to do is <b>delete the "src" immediately after the word async</b>. <br /><br />So your code changes from like this:<br /><blockquote class="tr_bq"><script async <b><span style="color: red;">src</span></b>="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /><script><br />  (adsbygoogle = window.adsbygoogle || []).push({<br />    google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",<br />    enable_page_level_ads: true<br />  });<br /></script></blockquote><br />to like this:<br /><blockquote class="tr_bq"><script <span style="background-color: yellow;">async ="//</span>pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /><script><br />  (adsbygoogle = window.adsbygoogle || []).push({<br />    google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",<br />    enable_page_level_ads: true<br />  });<br /></script></blockquote><br /><h3>Different Page Level settings for different websites</h3>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.<br /><br />Currently, there is no way to do this:  you must choose one combination of:<br /><ul><li>No Page Level ads</li><li>Overlay ads only, no Vignette ads</li><li>No Overlay ads, but do show Vignette ads</li><li>Allowing Google to choose Overlay and/or Vignette ads</li></ul><br /><h3>Stop Vignette ads being attached to some links</h3>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.<br /><br />You can prevent any Vignette ads being displayed when a user clicks a link by adding a tag to the link.<br /><br />The tag to add is:<br /><blockquote class="tr_bq">data-google-vignette=”false”</blockquote><br />and you need to switch to Edit HTML (top left of the post-editor window) to add it.<br /><br />This is <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> 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.<br /><blockquote class="tr_bq"><a <b>data-google-vignette=”false”</b> href="http://blogger-hints-and-tips.blogspot.com/2010/02/stop-malicious-use-of-your-adsense.html">an example link</a> </blockquote><br /><h2>More help</h2>Google have provided more information about Page level ads <a href="https://support.google.com/adsense/answer/6245298" target="_blank">here</a>.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">Setting up a mobile theme for your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html" target="_blank">Editing your Blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/11/simpler-but-more-limited-adsense-sign.html">Hosted AdSesne accounts for Blogger users</a>

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...

01:33

Advertising & Blogger: things to consider

<b>This article discusses some things to keep in mind when you are putting advertising on your blog.</b> <br /><br /><br /><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6BH9HmjL6mip51EZZ4_11Xd3MAQTKY6IV8-j7eB-ECFLQDMOGh0lG5iNN2Pibhq4WJUEFUSqCFgP3ryZA8_r3vDUaDO3VQzdWVTrd_gxHjiWwUtnQJWwDfSKQ1Fq3qCIMs8NPWxstLDr/s720/advertising-issues-for-bloggers-to-consider.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6BH9HmjL6mip51EZZ4_11Xd3MAQTKY6IV8-j7eB-ECFLQDMOGh0lG5iNN2Pibhq4WJUEFUSqCFgP3ryZA8_r3vDUaDO3VQzdWVTrd_gxHjiWwUtnQJWwDfSKQ1Fq3qCIMs8NPWxstLDr/s720/advertising-issues-for-bloggers-to-consider.png" width="320" /></a></div>If you are considering putting advertising onto your blog, there are some basic things that you need to think about.  These include broader philosophical questions, right down to nuts-and-bolts technical concerns.<br /><div><br /><div>This article is not a definitive guide - see somewhere like <a href="http://www.problogger.net/">ProBlogger</a> for that.   Rather it's a collections of thoughts about the issues specifically related to Google's Blogger and its relationship with advertisers.   And it may include some thoughts about philosophical and policy issues, if I do any deep research or thinkng about these in the future. <br /><br /><br /><div><h2>Terms and Conditions</h2>There are lots and lots of possible <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html">advertising and affiliate marketing programmes</a>.<br /><br />Staying within the programme of terms and conditions (often called T&C's) for every programme that you participate in is important.   Every advertising programme has terms and conditions.   You need to find the ones that apply to the programme(s) you are considering.  Read them.  Remember them.  Follow them.   Keep up-to-date.<br /><br />Also, keep an eye on <a href="http://www.blogger.com/terms.g">Blogger's T&C's </a>and <a href="http://www.blogger.com/content.g">content policy </a>too, in case they have any impact on what advertising you are allowed to carry.<br /><br /><br /><h2>Advert Co-location</h2>Not every type of advertising can be shown on the same web-page as every other type of advertising.  See the point about about terms-and-conditions.   And besides - you need some space on your blog for <b>content</b>, which is what keeps advertisement-viewers coming to you in the first place!<br /><br />Blogger doesn't have any automatic support for conditionally showing advertising.  If any programme you have has constraints like this, then you may need to do some programming in order to use that programme.<br /><br /><br /><h2>Placing ads</h2>If you want to use advertising that isn't integrated with Blogger through the Monetize tab, then you're going to have to place blocks of HTML code into gadgets or into pages.<br /><br />You don't have to write the code (the advertising network does that), or change it.  You just have to copy and paste it, and <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">put the HTML into your blog</a>, wherever you want the advertising to do.   (Note:  HTML and Javascript are the only types of code you can use.   No SQL.   No php.)<br /><br />If you're not comfortable-enough doing this with the Blogger template that you have, then stick to the Blogger-endorsed programmes that can be added through the Monetize tab.<br /><br /><br /><h2>Experiment, and Track Progress</h2>Marketing is an art and science.   So can use scientific techniques for data gathering.   Experiment with altrnative ad-placement.   Maybe even create a 2nd non-public blog where you can test how things look when you set up ads (and other gadgets, for that matter).  Only put them into your real blog when you're happy with how they work.   Once your ad is live, track your progress.<br /><br />To effectively track progress, you need to <b>keep a list of the date when you made changes to your site</b>, and then do regular data-analysis to see what effect these changes have on your number of visitors, and their behaviour.    This is tedious - but if you really want to know what works and what doesn't, it needs to be done.<br /><br /><br /><h2>Watch your ad-contents</h2>Make sure you know what types of things the programme you have chosen is advertising.  With Blogger, you (we!) are getting web-hosting for "free" (we have to watch their ads), and domain registration very cheaply.   Make sure that the advertising you use doesn't cause you to violate Blogger's terms and conditions.  I'm thinking especially about Adult/Pornographic content here, but I guess it could apply to other things too.<br /><br />If you are using AdSense, it's pretty much essential to <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/blocking-categories-of-adsense-ads-from.html">manage the categories of ads that AdSense displays</a>.<br /><br /><br /><br /><h2>How will you get paid</h2>Some advertising programmes are very easy to be part of:  they give you ad, and pay you regularly.   Other's are more difficult.   Worst case, you may find that some options are totally unuseable for you, because they cannot make payments in your contry.   Or the cost of getting paid is extremely high - ProBlogger has written before about the <a href="http://www.problogger.net/archives/2008/11/29/an-open-letter-to-the-amazon-associates-program/" target="_blank">transaction time and cost of every payment he receives from Amazon.com</a>.<br /><br /><br /></div></div></div><hr /><h2>Related Articles</h2><script type="text/javascript"></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/blocking-categories-of-adsense-ads-from.html">Managing the categories of ads that AdSense displays</a>. <br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting HTML from advertisers into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html">A short list of advertising and affiliate marketing programmes</a>

Advertising & Blogger: things to consider

This article discusses some things to keep in mind when you are putting advertising on your blog. If you are considering putting advertisin...

12:32

Tutorial

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

Advertising & Blogger: things to consider

Popular Posts

Blog Archive

Labels