ampproject / ampproject/amphtml
amp-story-cta-layer I2D
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Summary
The `` allows the placement of multiple CTAs on the bottom of the page but in practice very few Stories make use of this freedom. In almost all cases, Stories use a single CTA at the bottom of the page. Further, it is easy to create poor user experience situations using the cta-layer (e.g. a wide invisible tap target at the bottom of the page).
In order to make outlinking more consistent and predictable for users we intend to depreciate and remove `` in favor of ``.
`amp-story-page-outlink`:

### Motivation
Depreciating and removing the cta-layer in favor of `amp-story-page-outlink` will ensure a more consistent and expected UX for users.
### Impact on Existing Users
Any existing story that uses the cta-layer will visually look different since the custom styled element will be removed and replaced with an `amp-story-page-outlink` element.
A benefit of this is that it requires no action on the publisher and the outlinking UX will still be the one-tap UX.
### Depreciation process
After a 3 month depreciation time behind an experiment we will convert all cta-layers to `amp-story-page-outlink` elements.
The experiment can be manually turned on to test existing stories.
This change will be automatic and will not require any action from publishers. As a result any existing stories using the cta-layer will have a benefit of consistent UX with `amp-story-page-outlink`.
To create the `amp-story-page-outlink` the cta-layer will be parsed to find the link and its href/anchor.
**If cta-layer contains one anchor element:**
The href will be used to build the `amp-story-page-outlink` that replaces the cta-layer. If the anchor element contains text, the text will be applied to the `amp-story-page-outlink` button.
`amp-story-page-outlink` wraps an `a` tag element.
**If cta-layer contains two anchor elements:**
The elements will trigger a tooltip like other page links.
### Notifications
/cc @ampproject/wg-approvers
Contributor guide
Assessment
This issue has not been assessed yet.