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.

 

#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.

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!