XF 2.2.x Tips How To Limit The Size Of Google AdSense Ads

hifitechindia

hifitechindia

Administrator
Staff member
Joined
4 August 2023
Messages
525
Offline

How to limit the size of Google AdSense ads​

This code is directly from Google support. Please note that this will not work for AutoAds.

If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to better meet the requirements of your responsive site. The following examples show you how to corr
support.google.com
Code:

If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to better meet the requirements of your responsive site. The following examples show you how to correctly make these modifications.

Note: The examples described in this article are acceptable modifications of the AdSense ad code. You won't violate the AdSense Program policies by modifying your responsive ad code in these approved ways.
Code:

Exact ad unit size per screen width example
This example shows you how to modify your responsive code to set specific ad unit sizes for three ranges of screen widths, i.e., mobile, tablet and desktop. You don't need to have any previous experience of CSS media queries or modifying AdSense ad code to follow this example.

Here's some modified responsive ad code that sets the following exact ad unit sizes per screen width:
For screen widths up to 500px: a 320x100 ad unit.
For screen widths between 500px and 799px: a 468x60 ad unit.
For screen widths of 800px and wider: a 728x90 ad unit.
HTML:
Code:
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Code:

To adapt this sample code for your own site:
Create a display ad unit in your AdSense account, making sure you leave Responsiveselected in the "Ad size" section. Note down the following information from your responsive ad code:
Your publisher ID, for example, ca-pub-1234567891234567
Your ad unit's ID (data-ad-slot), for example, 1234567890.
In the sample code:
Replace all instances of example_responsive_1 with a unique name, e.g., Home_Page, front_page_123, etc.
Notes:
Your unique name must only contain English letters (A-Z), numbers, and underscores, and the first character must be an English letter.
You must use a different unique name each time that you adapt this sample code.
Replace ca-pub-XXXXXXX11XXX9 with your own publisher ID.
Replace 8XXXXX1 with your own ad unit's ID.
Decide on the sizes you want your ad unit to take per screen width:
If you're happy with the existing ad unit sizes in the sample code, then you don't need to make any additional changes.
If you want to set different ad unit sizes per screen width, then, in the sample code:
Replace 320px and 100px with the width and height of the ad unit you want to use for screen widths up to 500px.
Replace 468px and 60px with the width and height of the ad unit you want to use for screen widths between 500px and 799px.
Replace 728px and 90px with the width and height of the ad unit you want to use for screen widths of 800px and wider.
Copy and paste your modified ad code into the HTML source code of the page where you'd like the ads to appear.
Note: After you’ve placed your ad code, we recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly.
Specify an expandable width and a fixed height
You may modify your responsive ad code to specify an expandable width and a fixed height for your ad unit via CSS. The following example shows you how to make these modifications:

Expandable width with fixed height example

This example shows you how to modify your responsive ad code to specify a fixed height of 90px and a variable width from min-width 400px to max-width 970px:

HTML:

Code:
<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Code:

Specify an exact size per screen width
You may modify your responsive ad code to specify the exact size for your ad unit via CSS. The following example shows you how to make these modifications:

Exact size per screen width example

If you know the exact ad unit sizes per device that best fit your responsive site, then you can use CSS3 media queries to set the size of your responsive ad unit. The following example shows you how to modify your ad code to use CSS3 media queries:
Code:

Code:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
    @media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
 

Similar threads

hifitechindia
XF version 2.0 2.1 2.2 When you install XenForo on Hosting or VPS, your forum always displays the copyright line in the footer. This will be more annoying when this copyright line is added with information from the addons developer when you accidentally install an additional one. certain...
Replies
0
Views
74
hifitechindia
hifitechindia
hifitechindia
  • Locked
xfrm_updates find search replace Chang Logs
Replies
0
Views
87
hifitechindia
hifitechindia
hifitechindia
This happens after i've installed addon from archive in admin panel.... Anything to resolve this? error_log file located in forum's root is empty. An error occurred while the page was being generated. Please try again later. FIX: GO TO FILEMANAGER src/config.php add code...
Replies
0
Views
227
hifitechindia
hifitechindia
mani5grockers
Confirmed that src/config.php contains: $config['maxImageResizePixelCount'] = 60000000; Options > Resource Manager > Maximum resource file size (KB) My server allows 500MB and this is confirmed on the admin dashboard and also on the attachment size page.
Replies
0
Views
399
mani5grockers
mani5grockers
hifitechindia
Hello everyone, Since many users have reached out to try and receive explanations of various customizations around our community, I've deciced to write up a quick tutorial on how to enable custom user group icons in front of your group names. This modification is pretty simple since there is no...
Replies
0
Views
226
hifitechindia
hifitechindia
hifitechindia
TYPE 1 Please try placing this code into your extra.less template /* Remove footer copyright information */ .p-footer-copyright { display: none; } # = ID element. = Class element You can use your browser element inspector to figure out what the name of the div/ID/span of the element containing...
Replies
0
Views
357
hifitechindia
hifitechindia
hifitechindia
XenForo has many addons, and the official are XFRM and XFMG We can change the name "Resource" to "Download" in Phrase, but the URL still "yourdomain.com/resources" Go to "Setup > Route Filters" Find route : resources/ Replace with : download/ Now, you have, "yourdomain.com/download" You can...
Replies
0
Views
242
hifitechindia
hifitechindia
hifitechindia
Sometimes, we want different color for each category forum. So here simple css which you want to try. Add to extra.less in your template. /* Coloring Category and Node */ .block.block--category.block--categoryXX .block-header { background: -webkit-linear-gradient(335deg, #28356c 44%, #074946...
Replies
0
Views
246
hifitechindia
hifitechindia
hifitechindia
If you want to provide an extra layer of protection to admin.php, the /install directory, and test & development installations, you can do so with .htaccess authentication. Protecting admin.php To protect admin.php, edit the .htaccess file which is in your forum root directory (e.g...
Replies
0
Views
218
hifitechindia
hifitechindia

Users who are viewing this thread

Top