We could show Google AdSense responsively in our website with Responsive Ad Unit, this means we can control the size of the ads on our page corresponding to screen resolution of the visitor’s device. The code of Responsive Ad Unit detects the size of the screen and serve the appropriate ad unit that will best fit.
Generate Responsive AdSense Ad Unit
Create Ad Unit. Login to Google AdSense Dashboard and go to My Ads tabs. Click New ad unit button. Select Responsive ad unit (BETA) in Ad Size dropdown field. You also could select what type of Ad in Ad Type dropdown field. Done, save and get code to generate JavaScript code
Responsive Ad Unit use Asynchronous code, this means it should be load faster
There are two mode for Responsive Ad Unit
Smart sizing – this mode doesn’t require us to make any changes to your ad code.
Advanced – this mode requires modifications to our ad code. We should only choose this mode if wewant to specify either an exact size via CSS or a general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to. Advanced mode recommended for horizontal Ads (Leaderboard, Banner)
For Advanced code, we could use generated code or make modification to the code with data-ad-format variable, for example
<!-- Responsive Ad #2 -->
<ins class="adsbygoogle responsive-ad-2"
style="display:inline-block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678" data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Set a general shape for esponsive ad unit by changing the value of data-ad-format to one of these values: “rectangle”, “vertical”, “horizontal” or any combination of these separated by a comma, e.g., “rectangle, horizontal”.
Additional Note: we might see yellow box in AdSense placement when we first add Responsive Ad Unit, that means AdSense still loading. Don’t panic, however you could add following code to your site CSS/Stylesheet file to hide yellow box
ins {
background: transparent;
text-decoration: none;
}
Leave a Reply