Adsense Ads Size Modification Be Big On The Screen And Responsive
Before continuing, whether we can modify ads from google adsense? We see briefly the description below, in order to avoid mistakes in resizing adsense ads.
Particularly in accordance with the AdSense Ads code modification guidelines .
These are some Adsense ad code modifications that can be accepted or allowed by the Google Adsense:
- Responsive Design
- A / B Testing
- Setting Custom Channels Dynamically
- Ads Tag Minimization
Addition of CSS Media for the size of adsense ads to fit the screen
Although Google Adsense has provided CSS media for responsive ad units, but only for ad sizes with dimensions of 728px X 90px only. And when displaying the 620 X 90px size on the desktop screen, it will appear truncated on mobile or mobile devices.
In essence, adsense ad size ads will be made responsive according to the user’s screen. And will appear on screen with certain conditions as below.
- If the screen is at most 450px , then the ad size will be 300 x 250px.
- If the screen is at least 500px , then the ad size will be 336 x 280px.
- If the screen is at least 800px , then the ad size will be 620 x 90px
- And other ad sizes will be 336 x 280px.
Below is a standard script of responsive ad units from google adsense.
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– klik mania – responsive artikel –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXX”
data-ad-slot=”XXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
What we need is the ca-pub and ad-slot XXXX code on the sript above.
And below is CSS Media that we will apply
- <style scoped=’scoped’ type=’text/css’>
.iklan_responsive { width: 336px; height: 280px; }
@media (max-width:450px) { .iklan_responsive { width: 300px; height: 250px; } }
@media (min-width:500px) { .iklan_responsive { width: 336px; height: 280px; } }
@media (min-width:800px) { .iklan_responsive { width: 600px; height:280px; } }
</style><ins class=”adsbygoogle iklan_responsive”
style=”display:inline-block;”
data-ad-client=”ca-pub-XXXX”
data-ad-slot=”XXXX“</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
- For the blue color, can be adjusted to the width of the post area on your blog. But for the standard size, can use that size.
- Replace XXXX code with your ca-puband ad-slot code .
Addendum: This also applies to adsense ads with custom size sizes and makes custom size responsive sizes appear on desktop or mobile.
If using blogger / blogspot
Parse first the script code above Here
Especially for ads that are stored in the post, so as not to error on HTML5validation please save the code CSS media ad unit above the code]]> </ b: skin> or </ style>
Eliminate the code <style scoped=‘scoped’ type=‘text / css’>
And without using cover </ style> (not in use)
Check the display ads on mobile
After that we can see the results directly for mobile display, it’s good test directly using your own mobile device. Whether the ad view has adjusted.
If successfully implemented in your blog, the adsense ad size will adjust to the height and width of the post area screen.So as if the ad fills the post area and turns into a big one.
And if the visitor refreshes on the page or moves to another posting page, then the adsense ads as if changing sizes, but actually only adjust the availability of ads at the time.
Good luck, if there is a problem can urun rembuk in the comment box.
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.