XF 2.2 How to fix height for ad unit?

[Mallika]

I want to fix the height and width of the ad. I created a div tag with inline css specifing the height and width. but when the website loads it overrides to auto. how to fix a height and width of the ad unit?

 

[mjda]

It probably depends on what kind of ads you're using. I use Adsense. Here is the code from one of my ads, which seems to work just fine. I don't like those huge ads that take up too much space on my site.

<div style="margin-bottom:5px;">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block;max-width:728px;height:90px;margin:0 auto;"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
        data-ad-format="fluid"
        data-ad-type="text_image"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

 

[Mallika]

can i give the height in the div tag? cause specifying the height and width in the insert tag makes the ad not responsive. The ads loads slow which causes layout shift in the website, thats why i want to create a sort of container for the ads.

 

[mjda]

I haven't done it on my site, but I'm sure you probably can.

 

[Mallika]

<div style="height: 280px ; margin:10px;">
    
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block;"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="xxxxxxxxxx"
 data-ad-format="auto"
data-ad-type="text_image"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

This is what is in my ad unit. but when it renders, it changes to auto and not to the specified size. this is the screenshot of the rendered page.

 

[mjda]

Ahh, well I'm not sure then. What if you add the height into both the div and the ins? Sorry, I just haven't messed with it in a while. The way I posted is how all my ads are and it's worked for me for years now on both desktop and mobile devices.

The only problem I've noticed is if someone loads the page in a wide screen, then tilts their device back to narrow, the div will stretch beyond the page. As soon as the page is either refreshed, or changed, though, it's fine again. I assume this probably doesn't happen enough for it to be an issue so I've just left it as acceptable.

 

[bzcomputers]

can i give the height in the div tag? cause specifying the height and width in the insert tag makes the ad not responsive. The ads loads slow which causes layout shift in the website, thats why i want to create a sort of container for the ads.

Unfortunately, using Google Adsense: data-ad-format="auto", Google's javascript will override your div size settings to what it believes would be best for the ad display.

The only other option at this time is to use fixed ad sizes and apply some media query css and javascript to update the ad code fixed size dependent on the display size on page load...

.ad-below-header {
    margin: auto;
    display: none;
}
@media all and (min-width: 340px) {
    .ad-below-header {
        display: inline-block;
        width: 320px;
        height: 100px;
    }
}
@media all and (min-width: 480px) {
    .ad-below-header {
        width: 468px;
        height: 280px;
    }
}
@media all and (min-width: 741px) {
    .ad-below-header {
        width: 728px;
        height: 90px;
    }
}
@media all and (min-width: 1000px) {
    .ad-below-header {
        width: 970px;
        height: 250px;
    }
}

Using fixed ad sizes like this, you will need to continually tweak this approach to attempt to get the highest payout. As over time different ad sizes will payout more and you will need to continuously A/B Test to find your highest bidders/highest paying ad sizes. Where in auto ads there will be more advertisers bidding for that position and Google will typically always display the most profitable ad. Auto ads are the only way to go if you want to make the most money for the least amount of ads on your site.

Auto ads are a lot better than they use to be, but for forum layouts they can still be a bit of a visual eyesore at times with large margins and padding, but at least they don't break the page layouts like they use to just a couple years ago.

To keep your sanity, I personally suggest stick with auto ads and their quirks. Your sleep time and wallet size will increase because of it.

 

[tonmo]

Thanks for this, @bzcomputers -- I forget; is it now possible to restrict ads from showing to certain usergroups when using auto ads?