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!

A+++++ Easily one of the best ad partners

  • Communication 10/10
  • Payments 10/10
  • Profesionality 10/10
  • Technicals 10/10
  • Dedication 10/10

$100M+

Paid to Publishers

3B+

Ad Requests Monthly

1500+

Happy Publishers

Recommended Reading

blog-monitoring
Blog
May 21, 2024

Blog Monitoring & Invalid Traffic Detection: Making it Work!

Read More
google-io-2024- AI Overviews
Blog
Last updated: May 20, 2024

Google’s AI Overviews’ Scary Impact on Publishers

Read More
Blog
May 15, 2024

What’s the Highest Paying Ad Network for Site & App 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