Resizing creatives is incompatible with Google's anchor ads

[dmitriyshashkin]

Type of issue

Bug

Description

Google recently released new ad format: anchor ads. Basically google's implementation of sticky units https://developers.google.com/publisher-tag/samples/display-anchor-ad

And overall prebid works great with them. The only problem is that this anchor ad takes the whole width of the screen. And if the ad is shorter, google takes care of positioning it in the center. The ad is positioned in the <ins> container which takes care of floating, inside it there is a div that has width set to 100% and inside this div there is an iframe element centered through margin auto.

Unfortunately once the ad is rendered Prebid sets width for both the div and the iframe equal to the width specified in the bid oblect. https://github.com/prebid/Prebid.js/blob/master/src/secureCreatives.js#L100 Which breaks the horizontal alignment. It can probably be fixed by adding text-align: center to the <ins> element, but I'm not sure whether it's a good idea to tamper with google's styles. And perhaps this should be handled on prebid's side, not by each of the publishers individually.

Steps to reproduce

1. Create out of the page ad unit of anchor type.
2. Let HB bid with size 320x50 win.

Expected results

Ad is horizontally centered

Actual results

Ad is skewed to the left

[patmmccann]

hi @dmitriyshashkin ; we agree that "this should be handled on prebid's side, not by each of the publishers individually."

We'd welcome a pull request adding your css conditional on a publisher set configuration option on the ad unit. Here is an example of a config dependency in the same script: https://github.com/prebid/Prebid.js/blob/b4cf8b11e57e4df6b12582de68690d7fc1a25e8f/src/secureCreatives.js#L41

A perhaps preferable option is we just allow arbitrary css insertion from config from a setting such as AdUnit.renderStyle: "align=\"center\"" ?

[bretg]

@dmitriyshashkin - please provide a test page. It's not clear how the PBJS AdUnit is supposed to link to a GPT unit that doesnt have a div.

[ChrisHuie]

@patmmccann changed this to feature since it seems more like adding new support versus a fix for a existing bug

[dmitriyshashkin]

@bretg setTargetingForGPTAsync accepts callback function that returns match function for a given slot. Any kind of custom logic can be implemented this way. For example, if GPT unit's path includes PBJS AdUnit's code, one can use that fact to match the PBJS AdUnit wlith the corresponding slot.

[bretg]

A test page will get this issue resolved much faster.

[premesh]

hey @bretg do u. need a test page loading prebid or just the GAM ad unit with this behavior ?

[bretg]

with Prebid please

[dqureshiumar]

BOTTOM_ANCHOR Slot Resizing Incorrect Div (grippy_host) – Works Fine for TOP_ANCHOR

---

Summary

While testing the fix for bottom anchor slots, I encountered an issue where the wrong div is being resized. This behavior only appears with BOTTOM_ANCHOR slots. In contrast, TOP_ANCHOR works as expected.

The issue does not occur when the instl flag is included in the bid request for anchor slots. However, if the instl flag is omitted, the incorrect div (grippy_host) is resized instead.

---

Page Setup

• Defined an Out-of-Page slot as a BOTTOM_ANCHOR.
• Creative is served under a SafeFrame.

---

Problem Description

When the ad is rendered for a BOTTOM_ANCHOR slot:

• The resizeFn function is triggered.
• However, instead of resizing the correct ad container, the div with id grippy_host is being resized.
• This causes the actual anchor ad slot to not come into view.

✅ TOP_ANCHOR slots do not have this issue — the correct container div is resized.

---

Root Cause (Analysis)

This issue appears to stem from how GPT (Google Publisher Tag) inserts a div named grippy_host. In the case of BOTTOM_ANCHOR, our resize logic mistakenly targets this div instead of the correct anchor container.

---

Reproduction Steps

1. Set up a bottom anchor ad using an out-of-page slot.
2. Serve a creative in a SafeFrame.
3. Observe the DOM structure post-render.
4. Notice that the wrong div (grippy_host) is being resized.

---

Screenshot

📸 Anchor ad is not visible

The Div Element div.grippy-host does not have any style

We can see the wrong element selected using parentElement.querySelector

After style applied to grippy-host div id, ad gets shifted down and becomes invisible

---

Additional Question

Can we support 1x1 creative resizing in the case of anchor ads? Currently, this doesn't seem to happen. Is there a known limitation here, or something that needs to be explicitly enabled?

---

Suggested Fix

Update the resize logic for BOTTOM_ANCHOR to correctly identify and resize the anchor slot container, and not grippy_host.

---

Let me know if you'd like me to include additional details.

[dqureshiumar]

Hi @patmmccann, can you please look into this?

[patmmccann]

Yep thanks!

[patmmccann]

@dqureshiumar thanks for the detailed ffedback! @mkomorski is picking this up and we should have support out soon!

[mkomorski]

@dqureshiumar would you mind sharing the source code of example page? Do you use defineOutOfPageSlot function?

[dqureshiumar]

@mkomorski Here is the sample test page: https://jsfiddle.net/f976e35z/3/ . Yes we have to use defineOutOfPageSlot function