Web Stories CTA Updates I2S

[processprocess]

Summary

We're updating CTAs within Web Stories with more features for customization while creating a more consistent UX.

Web Stories enable creators to link to additional content (either arbitrary external links or additional content in a page attachment) in a few different ways today: tap targets that open a tooltip, tap targets that directly open an external link (<amp-story-cta-layer>) and page attachments (<amp-story-page-attachment>).

This set of options is flexible, but has led to complexity for tools and end user confusion. In particular, 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, creators simply 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 improve the end user experience with tap targets, we plan to make a few key changes:

1. A primary CTA UI for pages that open external links (<amp-story-page-outlink>) and page inline attachments (<amp-story-page-attachment>).

2. Rich theming and customization

3. Safely deprecate functionality of the without requiring changes to older Stories. Please see I2D for details on the depreciation roll out plan.

Beyond this, we will continue to monitor how CTAs are used in Web Stories, and are open to feedback as well as new use cases.

Timeline

• Now: Access to new CTAs components and theming behind an AMP experiment
• June: Launch of new CTA components
• June: Start 3 month deprecation clock for functionality

Experiment to Enable

1. Opt-in to the nightly channel to get the latest features.
2. Paste AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in the dev tools console of the Web Story.
3. Refresh the page.

Cookies are required for the nightly channel to work.
If the updates are not visible, check that cookies are enabled.
Android: home > three dot menu > Settings > Site settings > Cookies > "Allow cookies"
iOS Safari: Settings > Safari > uncheck Prevent Cross-Site Tracking

Demo Instructions

Our demo story features configuration options and in-context examples.

<amp-story-page-outlink>

Previously known as <amp-story-page-attachment> with an href attribute. We heard lots of confusion around this so we’ve given it it’s own component name.

The biggest change to API of this is that it accepts a single a element child. This enables leveraging systems (browsers, crawlers/bots, etc) that utilize information from tags.

Existing stories will continue to work but we suggest using <amp-story-page-outlink> to get all of the new theming features.

API updates

• Accepts a single a element child.
• cta-image [optional]: String that represents a URL pointing to an img. 32 x 32px is suggested. A link icon is displayed by default. Specifying none will remove the default link icon.
• theme [optional]: String that represents the color theme, default is light. Supports light, dark and custom.
  theme="custom" requires two additional attributes:
  • cta-accent-color: String that represents the custom theme’s color.
  • cta-accent-element: String that represents the element to apply the custom theme to, supports text and background.

Examples

Default
This is equivalent to what is currently implemented.

<amp-story-page-outlink
  layout="nodisplay">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

Dark theme

<amp-story-page-outlink
  ...
  theme="dark">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

Custom theme text

<amp-story-page-outlink
  ...
  theme="custom"
  cta-accent-color="#247C3C"
  cta-accent-element="text">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

Custom theme text, dynamic contrast protection

Contrast protection is automatically applied to ensure readability and a11y compliance.
When the accent element is “background”, this is applied to the text.
In this example the green color is lighter than the previous example.

<amp-story-page-outlink
  ...
  theme="custom"
  cta-accent-color="#247C3C"
  cta-accent-element="text">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

Custom theme background

<amp-story-page-outlink
  ...
  theme="custom"
  cta-accent-color="#0047FF"
  cta-accent-element="background">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

Custom theme background, dynamic contrast protection

Contrast protection is automatically applied to ensure readability and a11y compliance.
When the accent element is “background”, this is applied to the text.
In this example the blue color is lighter than the previous example.

<amp-story-page-outlink
  ...
  theme="custom"
  cta-accent-color="#B6D3FF"
  cta-accent-element="background">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

cta-image

<amp-story-page-outlink
  ...
  cta-image="/static/images/32x32icon.jpg">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

cta-image: none

<amp-story-page-outlink
  ...
  cta-image="none">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

---

<amp-story-page-attachment>

API updates:

• cta-image [optional]: String that represents a URL pointing to an img. 48x48px is suggested.
• cta-image-2 [optional]: String that represents a URL pointing to an img. 48x48px is suggested.
• theme [optional]: String that represents the color theme, default is light. Supports light & dark.
• cta-text [optional]: String that represents the text below the CTA button. Specifying none will remove the text.
• data-title [optional]: String that represents the text in the header of the opened attachment.

Examples:

Default

<amp-story-page-attachment
  layout="nodisplay"
  cta-text="Call To Action">
   ...
</amp-story-page-attachment>

---

One image

<amp-story-page-attachment
  ...
  cta-image="images/48x48image.jpg">
   ...
</amp-story-page-attachment>

---

Two images

<amp-story-page-attachment
  ...
  cta-image="images/48x48image.jpg"
  cta-image-2="images/48x48image2.jpg">
   ...
</amp-story-page-attachment>

---

Dark theme

<amp-story-page-attachment
  ...
  theme="dark">
   ...
</amp-story-page-attachment>

---

No text

<amp-story-page-attachment
  ...
  theme="dark">
   ...
</amp-story-page-attachment>

/cc @ampproject/wg-approvers

[cpauwels]

While I do like this new direction, I feel like there are still too many unanswered questions.

External attachments have been notably finicky, and oftentimes slow. Even today, on the most recent generation of iPhones, swiping up to open a CTA takes over a second to even start loading the page, with a weird graphical bug at the top of the page. And returning to the story currently removes some of the outlinks for some obscure reasons.

RPReplay_Final1621524953.MP4

And yes, I know pages can't open in a new tab because the swipe events are not trusted events on iOS, but the experience still feels weird. Not to mention that returning to a story with the back button also triggers a new story view event in the analytics.

Also, with the a tag removed, what will be the SEO implications? And will that mean missing out on potential performance benefits from the new prerendering APIs announced at IO this week? (https://youtu.be/0UiaD059eqM?t=1292)

And when a story is embedded with an amp-story-player, will the swipe detection be reliable enough to consistently perform the user's intended behavior (scrolling the parent page or swiping on the link).

Is it all worth it for the "swipe" gesture? Can a click on the now much more button-looking outlink not simply open a new tab? Could the amp-story-outlink not wrap an a tag like the amp-story-player does? Have a swipe event listener handle the swipe part, and the browser handle the click?

All I'm saying is that CTAs are probably the most important element business-wise for story publishers. They need to be rock-solid and can't fail. I'm just not sure the outlink is at that level.

[processprocess]

Thank you for this feedback @cpauwels.

swiping up to open a CTA takes over a second to even start loading the page
Returning to the story currently removes some of the outlinks for some obscure reasons

These are regressions. #34330 fixes these and we're working to get it into production.

a weird graphical bug at the top of the page

Filed #34470 for tracking this.

And yes, I know pages can't open in a new tab because the swipe events are not trusted events on iOS, but the experience still feels weird.

Agreed that it's not ideal. We're looking for the best solution for this. Please see comment below about the "swipe" gesture.

Not to mention that returning to a story with the back button also triggers a new story view event in the analytics.

@raovs for analytics context.

Also, with the a tag removed, what will be the SEO implications? And will that mean missing out on potential performance benefits from the new prerendering APIs announced at IO this week?

The a tag will not be removed. amp-story-page-outlink wraps an a tag. I added a line to clarify this in the amp-story-cta-layer I2D. @raovs for SEO context.

And when a story is embedded with an amp-story-player, will the swipe detection be reliable enough to consistently perform the user's intended behavior (scrolling the parent page or swiping on the link).

We are addressing this use-case and are taking care to be sure the user's intention is performed.

Is it all worth it for the "swipe" gesture? Can a click on the now much more button-looking outlink not simply open a new tab?

We're aiming to keep the UX for inline attachments and outlinks symmetrical since their UI and function of "opening more information" is similar.
It's definitely a balance between consistent UX of the buttons and custom UX between outlink and inline.

I hear the case for outlinks being tapable only. In the current implementation the UI for outlinks and inline buttons look the same. A big part of this update is to create visual distinction between the buttons and with that could be an opportunity for the UX to be more specific to each.

Could the amp-story-outlink not wrap an a tag like the amp-story-player does?

The a tag will not be removed. amp-story-page-outlink wraps an a tag.

All I'm saying is that CTAs are probably the most important element business-wise for story publishers. They need to be rock-solid and can't fail. I'm just not sure the outlink is at that level.

We agree CTAs and linking are core to Web Stories and need to be rock-solid.
We're working to get CTAs there and appreciate your feedback!

[newmuis]

Thanks @processprocess! Agreed on most fronts.

I do think it's worth us evaluating the usage of the <a> tag, as they are slightly different. <amp-story-cta-layer> requires a publisher-specified <a> tag. <amp-story-page-attachment> and <amp-story-page-outlink>, on the other hand, build an <a> tag with JavaScript, when the AMP component is built. The result for (human) end users is a rendered <a> tag for the currently-active page, but there is a difference in that future pages of the story (not yet seen by the user) and stories loaded without JavaScript will not have a <a> tags for these primary CTAs.

/cc @gmajoulet @raovs @processprocess

[cpauwels]

One more question around this: will the new outlink support Apple's Private Click Measurement and Google's Conversion Measurement API ? This would be especially important for conversion tracking on marketing-focused stories.

[newmuis]

More good points, @cpauwels!

After my comment yesterday, we discussed offline and believe we can change the API (without great impact to the user-facing feature) such that publishers specify an <a> tag with text content. This would enable leveraging systems (browsers, crawlers/bots, etc) that utilize information from <a> tags.

It will involve some changes to get there, but we will circle back and provide an update here when those details are accounted for.

[gmajoulet]

I'd be adding one extra requirement on what @newmuis just said about switching to a <a> tag to configure the amp-story-page-outlink: all navigations would be triggered by a programatic click on this <a> tag. This would be fully compliant with all analytics or other tracking mechanism.

[caroqliu]

For amp-story-page-attachment use with cta-image, I see from the demo that it's provided via background-image property on a generated <div> element. Can you provide more context as to why this approach might be preferred to creating an <img> element? Do you anticipate users wanting to style/transform or label the underlying image?

One accessibility recommendation would also be to add a stroke or outline (or both) on the <a> element when focused, which recently was added for amp-carousel in #30750. It looks like the dynamic contrast protection already supports identifying the appropriate values that could be used for this without having to follow the combined stroke + outline approach.

[processprocess]

For amp-story-page-attachment use with cta-image, I see from the demo that it's provided via background-image property on a generated <div> element. Can you provide more context as to why this approach might be preferred to creating an <img> element? Do you anticipate users wanting to style/transform or label the underlying image?

The images are children within an a element and we're thinking the screen reader experience is smoother if it doesn't iterate over content in the button. From this perspective the images are decorative and would not require labels.

One accessibility recommendation would also be to add a stroke or outline (or both) on the element when focused, which recently was added for amp-carousel in #30750. It looks like the dynamic contrast protection already supports identifying the appropriate values that could be used for this without having to follow the combined stroke + outline approach.

Thank you for pointing this out and providing the reference.
Currently the focused state's outline isn't clear since it's full bleed on all edges except the top. I filed #34651 to track this.

[kristoferbaxter]

As discussed during design review, this looks great.

Thanks for presenting such a clear plan that was so easy for us all to approve.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.