prebid / Prebid.js

Setup and manage header bidding advertising partners without writing code or confusing line items. Prebid.js is open source and free.
https://docs.prebid.org
Apache License 2.0
1.31k stars 2.08k forks source link

Resizing creatives is incompatible with Google's anchor ads #7321

Open dmitriyshashkin opened 3 years ago

dmitriyshashkin commented 3 years ago

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

Screenshot from 2021-08-19 15-59-40

patmmccann commented 3 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

dmitriyshashkin commented 2 years ago

@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 commented 2 years ago

A test page will get this issue resolved much faster.

premesh commented 1 year ago

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

bretg commented 1 year ago

with Prebid please