How to stop a page from jumping because of ads

PubGuru
September 22, 2020 | by Kean Graham
How to stop a page from jumping because of ads

We’ve released new features for our PubGuru Header Bidding wrapper to prevent layout shifting or page jumping due to ads. This is when an ad is configured to be eligible for serving multiple sizes, for example, a 300×600/300×250 ad slot may expand up to 600pixels, then collapse back to 250pixels when the smaller size serves.

Why is this important, you might ask? If your page jumps around because of ads, it will result in bad user experience and when users accidentally click your ads, you could be penalized with a 2-click or double click penalty. That’s when users are asked to confirm if the click was intentional. A button that says “Visit Site” will be shown and clicked before the ad’s landing page can open. In short, users have to do it twice, hence the term “2-click penalty”.

Here’s how our solution works:

#1 – It adds a new feature called unitMargin which allows the publisher to force a margin on all ad units. Keep in mind this feature does not apply to out-of-page ad units like anchor ads.

See the example below. The first picture has a top & bottom additional margin of 30 pixels. The second picture doesn’t have any additional margins configured.

How to stop a page from jumping because of ads MonitizeMore

 

How to stop a page from jumping because of ads MonitizeMore

#2 – It also adds a new feature called unitMinHeight. This will force adding a minimum height to the ad unit based on the ad unit’s smallest eligible size. It ignores non-numeric sizes, such as fluid sizes. 1x1s are counted as there’s no way to know ahead of time what’s going to render.

How to stop a page from jumping because of ads MonitizeMore

Keep in mind that the feature cannot stop ads from jumping with multi-size ad units completely, but should minimize the risk.

How to enable the new features?

For publishers already using PubGuru Header Bidding, reach out to your Account Manager directly. This will soon be made self-service and accessible through your Pubguru.com portal.

How to manually add CSS on GAM/Ad Exchange/AdSense tags?

Here are a few examples should you decide to manually add the CSS:

Margins:

CSS: What it means: Tag: Example:
margin: 30px 0; top and bottom margin of 30px GAM (body) <!– /12345/atf_unit –>

<div id=’div-gpt-ad-12345678-0′ style=’margin: 30px 0;’>

<script>

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-12345678-0’); });

</script>

</div>

AdX/AdSense <div style=”margin: 30px 0;”>

<script type=”text/javascript”>

google_ad_client = “ca-pub-1234567890”;

/* ad_728x90_atf */

google_ad_slot = “test_anchor_bottom”;

google_ad_width = 320;

google_ad_height = 50;

</script>

<script type=”text/javascript” src=”//pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

</div>

Minimum height:

CSS: What it means: Tag Example (adding margin + min height):
min-height: 90px; Ad slot cannot collapse smaller than 90px GAM (body) <!– /12345/atf_unit –>

<div id=’div-gpt-ad-12345678-0′ style=’margin: 30px 0; min-height: 90px;’>

<script>

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-12345678-0’); });

</script>

</div>

AdX/AdSense <div style=”margin: 30px 0; min-height: 90px;”>

<script type=”text/javascript”>

google_ad_client = “ca-pub-1234567890”;

/* ad_728x90_atf */

google_ad_slot = “test_anchor_bottom”;

google_ad_width = 728;

google_ad_height = 90;

</script>

<script type=”text/javascript” src=”//pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

</div>

Not a PubGuru Header Bidding user yet?

Our header bidding wrapper offers a unified reporting interface, minimal setup, optimizes automatically, and some of the fastest bid responses in the industry, not to mention top performance!

Are you ready to stop pages from jumping because of ads and take your ad revenue to the next level? Sign up for PubGuru Header Bidding today!

More than 1500 publishers see 50-400% ad revenue growth with us.

Don't just take our word for it

$100M+

Paid to Publishers

3B+

Ad Requests Monthly

1500+

Happy Publishers

Recommended Reading

best-video-ad-networks
Ad Network Reviews, Tips & Guides
April 16, 2024

2024’s Best Video Ad Networks

Read More
monetizemore-india
Ad Industry News
April 15, 2024

MonetizeMore Fuels APAC Expansion with India Leading the Charge

Read More
quick-approval-ad-networks
Ad Network Reviews, Tips & Guides
April 12, 2024

12 Quick Approval Ad Networks For 2024 – Jumpstart Site Monetization

Read More

Trusted by 1,500+ publishers worldwide

10X your ad revenue with our award-winning solutions.

Let's Talk

Close

Ready to 10X your ad revenue with the #1 ad management partner?

Start Now