Tracking Adsense Earnings of Responsive Adsense Ad Units

The Performance reports tab at www.google.com/adsense is designed to provide more insight into not just how much you're earning, but what impacts those earnings.



If your blog is responsive and you've placed responsive adsense ad codes on it, you can track the performance of your responsive ad units by viewing the Ad units report on the Performance reports tab.



To access the "Ad Units" report,



==> Sign in to www.google.com/adsense

==> Click on "Performance reports" tab

==> On the left sidebar, click "Ad Units"





Right there, you will see the earnings, number of clicks, number of page views etc of each responsive ad unit on your blog. Each responsive ad unit will be identified by the name you used when you created them.



The performance of all responsive ad units on your blog is shown under the “Responsive” label in the "Ad sizes" report. This is where you will see the total number of clicks, ad request CTR, CPC and estimated earnings of all the responsive ad units on the blog.

Clicking on the "Responsive" label will break down the performance further, day by day.



If you want to track the sizes of the ads that have been served from your responsive ad units, you can view the Creative sizes report.



Cheers

Read More

Adsense Respsonsive Ad Code Modification Using CSS Media Queries

When I published how to create and add responsive Adsense ad unit, I recommended the implementation of the "Smart sizing" mode which doesn’t require you to make any changes to your ad code. This mode lets Adsense to dynamically calculate the ad unit size that will adapt to your page layout based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.





For example, if you have a <div> with a width of 30% and you place our ad code within the<div>, then depending on the width of the user's screen, Adsense will automatically serve different ad sizes. If your page is viewed on a tablet with a width of 1024px, we'll serve a 307x250 ad, and if it's view on a 21" desktop PC with a 1680px width, we'll serve a 504x60 ad.



If you would want to specify either an exact size via CSS or a general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to, you will have to select the "Advanced" mode instead of the "Smart Sizing" mode when you generate your responsive ad code. The Advanced mode lets you modify the ad code as desired using css media queries.

I implemented the responsive 728 x90 leatherboard ad banner under the navigation of this blog using the "Advanced" mode. I modified the ad code in a way that it will serve a 300 x 250 ad unit on screens whose width are less than 500px. If the width of the screen is greater than 500px but less than 800px, a 468 x 60 ad unit will be displayed and on screens whose width are greater than 800px, a 728 x 90 ad unit will be displayed.



To get this done on my blog, I generated the responsive ad code, ensuring I select the "Advanced" mode. Below is what the generated ad code looks like:





<style>

.oblog-responsive-728-adunit { width: 320px; height: 50px; }

@media(min-width: 500px) { .oblog-responsive-728-adunit { width: 468px; height: 60px; } }

@media(min-width: 800px) { .oblog-responsive-728-adunit { width: 728px; height: 90px; } }

</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- OBlog_responsive_728_AdUnit -->
<ins class="adsbygoogle oblog-responsive-728-adunit"
     style="display:inline-block"
     data-ad-client="ca-pub-1234"
     data-ad-slot="5678"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>



I deleted the style part of the code (in yellow) , then placed the other part of the adsense code on my blog using the HTML/Javascript gadget. Thereafter, I added the media queries below to the css section of my blog's html.





.oblog-responsive-728-adunit { width: 300px; height: 250px; }



@media(min-width: 800px) { .oblog-responsive-728-adunit { width: 728px; height: 90px; } }

@media(min-width: 500px) { .oblog-responsive-728-adunit { width: 468px; height: 60px; } }

@media screen and (max-width: 499px) { .oblog-responsive-728-adunit { width: 300px; height: 250px; } }



That's all.



The .oblog-responsive-728-adunit { width: 300px; height: 250px; } specifies the default size. This will ensure that an ad renders even when media queries aren’t supported especially when your blog is viewed by old browsers.



If you understand how to use css media queries, you can use styles different from mine.



You can use the responsive design testing sites to see what your responsive ad unit will look like on different devices and screens to make sure that the responsive behaviour is working fine.



To test with your desktop browser, you must resize your browser to a certain width before you access your web page for you to see the responsive ad that is served on screen with such width.



UPDATE:



 ==> If your ad name (eg oblog-responsive-728-adunit) is not added beside adsbygoogle as seen in the ad code above, add it yourself and ensure you use it for the styling too. 

==> Also ensure data-ad-format="auto" is deleted if present in your code.





NB: This css media queries will not work for you if your blog is not responsive. You can check if your blog is responsive here.

Read More

How To Create and Add Responsive Adsense Ad Unit to Blogger Blogs

Responsive web design is the trend these days as more and more people are browsing the internet through their smartphones and tablets. If your Blogger blog is responsive, you can consider adding responsive ad units to the blog to maximize your Adsense earnings.



Adsense responsive ad code automatically serves different ad sizes based on the space available and also has support for ad size changes after a screen orientation change  (e.g., when a tablet or phone goes from portrait to landscape).



By using a responsive ad unit, you can control the size of the ads on
your page, in line with how you control the layout of the rest of your
page across devices. 





If your blog design is responsive, all you need to do is to generate responsive ad code and add it to your blog's html.

How To Generate Code for Responsive Adsense Ad Unit  

==> Log in to www.google.com/adsense

==> Click the My ads tab and click +New ad unit

==> Provide a unique name that will help you find this ad unit later

==> Select “Responsive ad unit (BETA)” from the Ad size drop-down

==> Click Save and get code.

==> In the “Ad code” box that appears, select the recommended "Smart Sizing" mode from the Mode drop-down.

==> Place the ad code on your site.

How To Place Adsense Code On Blogger Blog

==> Log in to www.blogger.com

==> Go to "Layout"

==> Click on "Add a gadget"

==> Select "HTML/Javascript" from the options

==> Paste the ad code in it and Save.



That's all.



Once you’ve placed your ad code,I recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly. You can also use the free online Responsive Web Design Testing Tools for the test.

Read More

Responsinator.com : Site to Preview Responsive Design

Sites crafted with a responsive design simply adapt to the user's viewing environment (mobile, tablet, laptop etc). Such sites are designed in a way that all of the content, images and structure of the site remains the same on any device. Users that visit such sites don't have to fool around with zooming while surfing the sites.





If you own a site and would love to provide easy reading and navigation with a minimum of resizing and scrolling—across a wide range of devices, you should consider Responsive Web Design. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.



With responsive design, your site will have just one URL and the same HTML across all devices. It makes your site to be mobile friendly without the need of creating another site specifically developed for mobile users. You won't also have to worry about using the likes of mobstac, mobilepress to create mobile version of your site.

You can check if your website or blog is responsive or not at : www.responsinator.com



The site helps you quickly get an indication of how your responsive site will look on the most popular devices. All you just need to do is to enter your site URL and click "GO".



Whenever I redesign a Blogger blog to be responsive, I use the site to check the responsiveness of the blog. You can check what OgbongeBlog looks like on different devices here.



Use Responsinator to test your blog and let me know if your site is responsive or not. If you know other Responsive web design testing tools, kindly share via comments.



NB: You can also preview your site responsive design at : http://mattkersley.com/responsive/



Cheers!

Read More