How To Make Adsense Ads Responsive
So you have a responsive website design but you need to add some Google Adsense advertisements into your design? Here is a simple code snippet that will allow you to serve Adsense ads based on screen size. It will also handle browser resizing (overflow problems). Just insert your publisher ID and ad IDs and you are set. The code can easily be adjusted for different ad sizes and target screen sizes. Leave a comment below with any questions or suggestions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div style="overflow: hidden;"> <script type="text/javascript"> google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX"; if (window.innerWidth >= 800) { /* Desktop Ad */ google_ad_slot = "XXXXXXXXXX"; google_ad_width = 728; google_ad_height = 90; } else if (window.innerWidth < 400) { /* Mobile Ad */ google_ad_slot = "XXXXXXXXXX"; google_ad_width = 300; google_ad_height = 250; } else { /* Tablet Ad */ google_ad_slot = "XXXXXXXXXX"; google_ad_width = 468; google_ad_height = 60; } </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> |
Posted Under: Programming Tips & Tricks
Hy Joey,
I have adsense and I work with wordpress,
but where I place all this code ?
Thanks,
Alex
Basically wherever you would normally put your adsense code, just put this instead but modify it with your 3 different ad codes and your publisher id. Some themes have ad spots built in, otherwise you can do an HTML widget and put this code in there.