search

ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

collapse ad space issues #9546

Closed coreybyrnes closed 5 years ago

coreybyrnes commented 7 years ago

Let me start by saying that I know if an ad is not in view, no ad loads, and there's no fallback that the ad space will collapse. But we have the need to run blank ads for reporting and for ad bundle purchasing and we need these blank ads to collapse the ad space. So then I recently learned of the context.noContentAvailable() function which collapses the ad space but kills the content of the iframe which doesn't allow the impression to load so there is no tracking. So how can I kill the ad space but still have an impression load. I'm trying to specifically solve for the "sticky" ad space, but my question applies to any ad space. I have also tried window.context.requestResize(0,0); but it wasn't executing (and strangely I wasn't seeing the onResizeSuccess or onResizeDenied listeners fire).

Here's a test url where currently I am using context.noContentAvailable(). You can see the view?xai=... in the network tab is cancelled - that's the impression failing to load. http://www.cbsnews.com/amp/news/james-comey-fired-fbi-director-in-2014-60-minutes/?adNetwork=7336&adtargeting_campaign=sticky_7336

coreybyrnes commented 6 years ago

@jasti @keithwrightbos @lannka Happy New Year! We're now on month 7 investigating this one! Any chance we can get this wrapped up and pushed out by EOM?

keithwrightbos commented 6 years ago

Hi all, happy new year! Yes this should be handled as part of porting safeframe APIs to doubleclick fast fetch impl. However, CBS is currently using remote html and so will not be forced over to fast fetch until the deprecation date of 3/29 (although I encourage them to move sooner).

@bradfrizzell is taking lead on both safeframe API support and delayed fetch deprecation and so he can take lead here. Thank you for your patience!

bradfrizzell commented 6 years ago

Hey Corey, definitely planning to have implemented both resize, and getGeo for safeframe api (which from my understanding are the two key needed APIs) by eom. I'll update this issue as PRs roll out.

coreybyrnes commented 6 years ago

@keithwrightbos @bradfrizzell So once these updates are live, what will the method be for manually collapsing the amp component element?

jasti commented 6 years ago

@bradfrizzell @keithwrightbos ping.

bradfrizzell commented 6 years ago

Apologies, we will also be implementing $sf.ext.collapse That will be the correct way to collapse.

coreybyrnes commented 6 years ago

@bradfrizzell Thanks for the response... a few questions just to make sure this solves the issue:

  1. That can be called from within the DFP creative code? If so, I'm not familiar with the $sf object. Can you shed some light on that?

  2. This will also collapse an AMP component if present? Is the collapse a display:none or removal of the element?

bradfrizzell commented 6 years ago

Hey @coreybyrnes Please refer to the Safeframe API spec for info on $sf - the relevant pages you'll care about start at page 54.

Second off, realize now I was conflating two separate things. Collapse in safeframe and collapse as you need it are two separate things. $sf.ext.collapse() is an API to return an ad slot back to it's original size after it has been expanded, it is not designed to make a slot disappear from the page. I am going to sync up with my team and see what we can expose in the creative to make this easily doable for you. Sorry for all the back and forth.

coreybyrnes commented 6 years ago

@bradfrizzell Thanks. The big thing for us, and what's been holding us back from using the much-desired Flying Carpet, is being able to collapse (display:none) an amp component from within the creative code. So it sounds like that solution isn't included in the release being referenced?

bradfrizzell commented 6 years ago

@coreybyrnes We're going to make a new safeframe API for you to do what you need. Currently planned to be $sf.ext.shrink()

I will keep you updated as this rolls out. Should be within the next month. Will that work for you?

coreybyrnes commented 6 years ago

@bradfrizzell Thanks! Would this new shrink function set an AMP component to display:none?

ampprojectbot commented 6 years ago

This issue seems to be in Pending Triage for awhile. @zhouyx Please triage this to an appropriate milestone.

coreybyrnes commented 6 years ago

@bradfrizzell been a minute since this was updated ;) was the shrink function added to SafeFrame API?

bradfrizzell commented 6 years ago

@coreybyrnes Yes this functionality now exists under the API name "resize"

https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/safeframe.md#sfextresizet-b-l-r

bradfrizzell commented 6 years ago

@zhouyx Would it be possible to change the current collapse behavior of no-fill for flying carpet slots that are partially visible in the first viewport? See my attached diagram of what I propose it would look like

flying carpet collapse issue

zhouyx commented 6 years ago

@bradfrizzell Thank you for bringing this up. I think it's a great idea to improve user experience.

This also reminds me of one request we had before: To collapse a no-fill ad slot when possible (for example: when user scroll it to the bottom of the viewport later)

I don't believe this is straightforward to support because the idea doesn't fit our current attemptToResize framework, but worth the effort for better user experience.

cc @jridgewell @aghassemi

coreybyrnes commented 6 years ago

@zhouyx That would be great and something I've been wanting for over a year! I have to mention however that I was testing this case out today and I was seeing the flying-carpet component collapse (via a hidden attribute) when it was a no-fill and out of view but now I can't reproduce it.

screen shot 2018-11-12 at 11 34 03 am

Can anyone think of why I was seeing this behavior but now it cannot be repeated? @bradfrizzell wasn't able to reproduce what I was seeing.

Here's my dedicated flying-carpet no-fill demo page: http://rev.cbsi.com/corey/test/amp/amp_demo_flying-carpet_nofill.html

Shall I open a new ticket for this to start fresh?

jridgewell commented 6 years ago

I'm OK with that, but we'd have to define which elements can be shrunk somehow. Also, I'm not sure when I'd have to time to add it to Resources.

coreybyrnes commented 6 years ago

@bradfrizzell opened https://github.com/ampproject/amphtml/issues/19297 to resolve the issue of no-fill not collapsing the flying-carpet component

The other issue is: calling context.noContentAvailable from within a DFP ad in the hopes of forcing the collapse of the flying-carpet component is failing for me - yielding a "Uncaught DOMException: Blocked a frame with origin "https://tpc.googlesyndication.com" from accessing a cross-origin frame." @jridgewell @zhouyx should I open a new ticket for this? My test page for this: http://rev.cbsi.com/corey/test/amp/amp_demo_flying-carpet_blank.html

coreybyrnes commented 5 years ago

@bradfrizzell was able to help resolve the cross-domain issue with noContentAvailable. I now have a successful "Blank" creative serving from DFP that successfully kills the and also collapses an AMP component (except the Flying-carpet atm) if present. Here's a demo where the "Blank" creative kills the Sticky component: http://rev.cbsi.com/corey/test/amp/amp_demo_sticky_blank.html

This bodes well for when @zhouyx is able to solve the issue of a no-fill not collapsing the flying-carpet component in ticket #19297. Once that's fixed, our "Blank" creative should collapse that component (when not in view). Crossing fingers...

lannka commented 5 years ago

This issue is a bit long and diverted. Closing now. If issue still exists, feel free to file a separate one.