ampproject / ampproject/amphtml

amp-story-cta-layer I2D

Open
#34,450 1 comment 0 reactions 1 assignee Claimed by @processprocess View on GitHub
INTENT TO DEPRECATE Stale WG: stories
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`:
Screen Shot 2021-05-19 at 3 56 24 PM

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.