Stories – The AMP Blog

October 25, 2019October 25, 2019

Users Prefer Tappable Stories On The Mobile Web

Stories

Tappable stories have become a major part of the way consumers engage with content — in fact, 60% of weekly mobile content users now consume tappable stories daily on social media. What are tappable stories? They are interactive experiences on mobile devices that allow users to interact with full-screen visuals like images, videos, and text. This popular format, however, has mostly been limited to the closed platforms it typically lives on. Publishers can benefit from tappable stories by providing consumers with innovative content experiences – not only on their social platforms, but on their mobile sites with AMP Stories.

To better understand the potential results AMP Stories can provide for publishers, Google commissioned Forrester Consulting, a leading global research and advisory firm, to evaluate consumer appetite for tappable stories on the mobile web. The study, titled “Publishers: Capture The Mobile Web Opportunity With Tappable Content”, was conducted September 2019.

https://blog.amp.dev/wp-content/uploads/2019/10/ampstoriesexample_trim.mp4

To conduct the analysis, Forrester carried out an online survey of 2,062 US online consumers ages 18 to 65 who consume publisher content at least weekly from a mobile device, as well as 22 remote unmoderated user tests with the same audiences. Both studies had participants interact with real-world examples of tappable stories on the mobile web as well as scrolling article equivalents. Forrester found that 64% of respondents preferred the tappable mobile web story format over its scrolling article equivalent.

Source: A commissioned study conducted by Forrester Consulting on behalf of Google, June 2019

Some of the key results from the study:

74% of smartphone users read or view social stories at least weekly. The demand for consuming social stories is higher than consumers’ desire to share their own stories. Publishers have the opportunity to fill the supply and demand gap on their own mobile sites, which can yield advertising revenue and richer data insights.
84% of users felt tappable stories met or exceeded their expectations for ease of navigation. Consumers were also 1.4x more likely to find the method of navigating the tappable story appealing, compared to its scrolling equivalent.
Over 75% of users are at least somewhat interested in reading tappable stories in their most-read content categories. Data from the study also revealed consumers are highly interested in consuming evergreen lifestyle content from the following categories:
- DIY/How-To
- Home/Cooking
- Sports

Source: A commissioned study conducted by Forrester Consulting on behalf of Google, June 2019

As the Forrester Study suggests, there is a unique opportunity for publishers to reach their audiences with a familiar tappable stories format. AMP Stories bring that format to the open web and allow publishers to take control of their content without being confined to a single ecosystem. The technology behind AMP Stories is still relatively new, but developers have a few options to get started.

You can read the full study here, detailing the opportunity for publishers and content creators to reach existing readers as well as new audiences with a unique, engaging format on the web. The AMP Stories format lives online as a web page, and thus is indexable and a part of the open web, allowing anyone to try it on their own site. AMP Stories advertising options are still nascent, but we are investing heavily in expanding this area. We are excited to see the results publishers achieve with this mobile-focused format for delivering information as a visually rich, tappable story.

Written by Alex Durán, AMP Project Marketing Lead at Google

August 28, 2019September 4, 2019

Analytics for your AMP Stories

Stories

AMP stories are a new way of telling stories on the open web. The stories are hosted on your domain, and the format allows you to add assets best suited for the job. Since the 2017 launch, we’ve seen many, many, many examples of engaging and informative stories published to the web.

Analytics capabilities of AMP stories

AMP stories use amp-analytics, the same robust measurement tool behind billions of AMP pages. Publishers can instrument their stories using simple JSON configuration, and the component does the setup, collection and reporting of metrics. If you’re using one of the 75+ analytics vendors that are already integrated with AMP, you can start collecting insights with very minimal setup.

Understanding user-behavior

A typical user-journey for a website is very different from stories. On a website a user might read the headline, scroll to the bottom of the page, interact with a form before clicking on a link to the next page. Stories occupy the full viewport and users do not scroll but tap to move forward.

Many in the web analytics community would consider each new page in the story as a new pageview because the content from screen to screen is substantially different. However, as we just covered, the page is just a single element in a full story — and a user usually needs to see many pages to get a full sense of the story. Thus, the question of how we count something as simple as the pageview has enormous implications for our analytics approach. As you see from above, treating every new story page as a pageview could be perceived as inflated metrics.

A better default configuration

AMP Analytics makes it easy to implement the above using any analytics vendor. For instance, with Google Analytics’ Global Site Tag it looks like so –

<amp-analytics type="gtag" data-credentials="include">
 <script type="application/json">
   {
     "vars": {
       "gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
       "config": {
         "YOUR_GOOGLE_ANALYTICS_ID": {
           "groups": "default"
         }
       }
     },
     "triggers": {
       "storyProgress": {
         "on": "story-page-visible",
         "vars": {
           "event_name": "custom",
           "event_action": "story_progress",
           "event_category": "${title}",
           "event_label": "${storyPageId}",
           "send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
         }
       },
       "storyEnd": {
         "on": "story-last-page-visible",
         "vars": {
           "event_name": "custom",
           "event_action": "story_complete",
           "event_category": "${title}",
           "send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
         }
       }
     }
   }
 </script>
</amp-analytics>

This default config should give you a complete working configuration for your AMP stories.

If you’re interested in going beyond what the default config can give you, read on to find more advanced use cases with Google Analytics.

Advanced setups

Insight #1: What’s my most visited page/slide for a given story?

Create a dashboard in Google Analytics’ web interface by going to Customization > Dashboard

Assuming you assign unique names to your AMP stories in “event_category”: “Title of my story”, we can see what pages were visited mostly by creating a bar graph in your custom dashboard picking dimensions “event_category”, “event_label” and metrics “Hits”.

Make sure to add a filter so that you are filtering “Event Action” to exactly match “story_progress”:

Insight #2 What’s my most visited story across the site?

Create a dashboard in Google Analytics’ web interface by going to Customization > Dashboard.

Assuming you assign unique names to your AMP stories inside your <title></title> tag pair, , we can see most commonly visited pages by creating a bar graph in your custom dashboard picking a grouped by dimension “Page Title”, and choosing the metrics “Pageviews”.

Get started quickly by using this premade Google Analytics template.

Insight #3 : For a given story, how far into the story users typically go

Since the story progresses from slide 1 to slide N, it is natural that slide 1 is seen by almost everyone, slide 2 a little less and the number progressively goes down. If there are any problematic slides, you will see a dramatic drop in slide viewership from the previous one. The following dashboard will help you visually capture any problematic pages.

You can use the dashboard that you created before ( Insight 1 : Most visited pages by story) to visually capture this

Insight #4: What’s the average number of pages my users see per story?

It is also possible to track events on an average. For instance, story progress can be used to track average story depth.

Navigate to Behavior > Events > Top Events.
With “Event Category” as the primary dimension, click on the pie chart icon.
Add a Secondary Dimension as “Event Action”.
Click on Advanced. Select “Event Action” and select “Story Progress” in the filter and apply.
Select “Avg. Value” from the drop down.

Insight #5: How long on average do users spend on my stories

Average session duration is the total duration of all sessions (in seconds) / number of sessions.

Create a new dashboard or add a widget to an existing one with the following setup

Insight #6: Measure how many times ads were shown on my story

AMP stories can insert ads on your stories via the <amp-story-auto-ads> component. The following setup helps you visualize the number of times ads were shown on the story.

Create a new dashboard or add a widget to an existing one with the following setup:

Conclusion

In this post, we shared various ways of using AMP Analytics with Google Analytics, to measure unique ways in which users interact with AMP stories.

If you have feedback or questions on your AMP story analytics setup, please open a Github issue.

Happy measuring!

Posted by Jeffrey Jose, Product Manager at Google, AMP Project

October 25, 2018May 15, 2019

AMP story learnings and best practices

Stories

Since we announced the developer preview of AMP Stories, we’ve been focused on ensuring the format is an easy and compelling way for publishers to create visual content on the web. It’s been exciting to see the experimentation and direction that some early testers have taken with the product.

Naturally we’ve also had a lot of people asking us to share early learnings about AMP stories – what works, what doesn’t – so we’ve tried to compile a quick run-down of best practices here:

Story Quality

1) AMP stories are just that – stories, intended to communicate a message, explain a situation, an event, a person, a concept. Publishers should be telling important stories worth reading that are both visually-rich and share relevant information in their text accompaniment. We’ve seen visual stories created in a variety of content categories, from sports to recipes to hard news to entertainment. Some things to avoid:

AMP stories which are just image slideshows or auto-generated are often lacking the core content that users are expecting and looking for when choosing what to read.
AMP stories should be complete, self-contained articles; they should make sense and be useful to the user without requiring the user to link out.

See AMP story examples from the Washington Post, Mic.com and FIFA (shown above).

Example from FIFA

2) Asset Quality Matters : We see dramatically better user engagement when the right assets are selected and properly formatted for an AMP story so they feel native to the experience. Beyond relevance, that means the images and videos are high-resolution, portrait-oriented, and full-bleed as it makes the experience more immersive, beautiful, and engaging to users. While we know leveraging existing assets can expedite story creation, it’s critical that the assets selected feel native to the experience and are best-suited to the dimensions of the device they are being viewed on.

Example from The Washington Post

3) Go Beyond Still Images: Some of our most engaging AMP stories incorporate short videos or Ken Burns effects to deeply engage the user. When using video, check out our video documentation on AMPproject.org, including these tips:

Best practice is to use 720p, which at a 3:4 aspect ratio is 720px width by 960px height: Over-indexing on high-resolution video unnecessarily slows down the story load times for diminishing returns on quality.
If audio is used, it’s important that the AMP story can stand on its own with the audio turned off, given that a fair amount of consumption happens when users are on-the-go and may not want to turn audio on. For this reason the AMP framework supports captions, as well as the ability to specify whether a video contains audio via the `noaudio` attribute.

Example from WIRED

Building an Audience & Monetizing It

4) “If a great AMP story gets created but no one sees it, did it happen?” Because AMP stories are self-canonical, the quality and relevance (across the web) is derived from the AMP Story itself. Like any other webpage, these signals are important in order to be served by platforms like Google Search. Publishers must promote their AMP Stories to users on their own homepages and sites, via social channels, and any other standard mechanisms of promotion. News publishers should consider linking from a Google News sitemap.

5) Discoverability & Indexing: There are a number of things that publishers will want to do to ensure that AMP Stories – while they may be visual-heavy – have the necessary metadata and text structure to ensure Google can discover and understand AMP stories:

Make all text crawlable: Use text overlays, rather than baking titles or accompanying text into images or videos themselves.
Apply structured data markup: Like AMP, publishers should include the appropriate structured data in addition to the AMP Story specific metadata. Note that there are unique sizing requirements for the primary thumbnail and publisher logo images specific to AMP Story documents.

6) Experiment with monetization: While it’s just been a few months since we shared public documentation on github for Single Page Ads on AMP Stories, we’ve begun to see early adoption of the format leveraging both image and video assets. We’ve also seen experimentation with ad real estate to run experiments for their own products and for their own podcasts, newsletters, etc.

AMP story ad

Tooling & Development

7) Test early and often. There are self-service tools available (Google’s AMP Test site and AMP Validation Testing Site) so publishers can test out AMP stories prior to pushing them live and identify and solve for errors. Additionally, publishers can test structured data markup here. The AMP Stories community will look to make these tools even more robust over time and would love feedback on how to make them more useful.

8) Make It Yours!: Like AMP, AMP Stories is an open-source project and its success will depend on the contributions of publishers and partners around the globe contributing feedback, requests for functionality, and even code themselves. Captions and subtitles support was added to the project by an organization that wanted support for the feature, but needed it quickly. With a bit of guidance from the AMP team, they implemented the feature, making it available to all here. If you have questions or thoughts, don’t hesitate to reach out to us via the right channel here.

Example of captions in an AMP story

We’re excited to continue to work with partners to evolve the format and look forward to hearing – and seeing! – from you.

Looking for more resources?

Posted by Lisa Lehman, AMP story Partnerships, Google