Summary

The <amp-story-cta-layer> 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 <amp-story-cta-layer> in favor of <amp-story-page-outlink>.

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