🍱 [amp-iframe:1.0] Bento tracking issue

[dmanek]

High-Level Requirements

To be updated as information becomes available.

Consideration	Ready When	Status
Component Compatibility	Conformance with 0.1	✖️
Testing	Unit tests and pre-existing e2e tests pass	✖️
Internationalization	n/a
Analytics	n/a
Accessibility	Audit performed	✖️
Page Experience	Audit performed	✖️
Documentation	Written	✖️
Storybook	Samples written in Preact and AMP	✖️

Feature Checklist

To be updated as information becomes available.

Migration Notes

To be updated as information becomes available.

Open Tasks

• Initial implementation
• iframe with placeholder
• iframe position (600px away or beyond first 75% of viewport)
• resizing at runtime
• viewability (send-intersections message)
• validation rules

Notifications

/cc @ampproject/wg-bento

[kristoferbaxter]

What's the fundamental difference between this implementation and using loading=lazy on a traditional iframe?

[dmanek]

@kristoferbaxter There are a few differences in the way AMP treats iframes vs traditional iframes with loading=lazy:

1. AMP enforces iframes outside of the top 75% or 600px whichever is smaller. It enforces a placeholder when this condition is not met. With traditional iframes, we cannot guarantee that.
2. loading=lazy is only supported in Chromium based browsers as of now (https://caniuse.com/loading-lazy-attr). Also the thresholds to lazy load resources may differ among browsers (Chrome for example takes into account connection type, whether Lite mode is enabled, etc.)

That said, I've briefly thought about supporting loading=lazy but need to dig further as to how it many affect amp-iframe's current positioning restrictions and behavior for browser that do not support it yet.

[kristoferbaxter]

AMP enforces iframes outside of the top 75% or 600px whichever is smaller. It enforces a placeholder when this condition is not met. With traditional iframes, we cannot guarantee that.

Is this enforcement via client-side JS? If so, could it be reasonably implemented on top of a native iframe element and avoid the custom element creation?

loading=lazy is only supported in Chromium based browsers as of now (https://caniuse.com/loading-lazy-attr). Also the thresholds to lazy load resources may differ among browsers (Chrome for example takes into account connection type, whether Lite mode is enabled, etc.)

I had forgotten about this browser support issue, and this may reasonably be a reason to use a custom implementation from within a Viewer environment. Is there a path to making the native implementation valid, and ensuring it doesn't break when loaded from within a Viewer?

[dmanek]

'send-consent-data' feature is tracked in #36211.