Using a scraper to retrieve the contents as JSON, we had our user input ready to turn into HTML. With each sheet representing a story, and each row representing a card, we could specify which template each card should use from a drop-down list, and pass that data to the Story JSON templates. These could then be converted to AMP-HTML, and finally copied to a build directory.

Because we were creating Stories for both the English and Russian language services, there were a number of language variants we needed to account for. By adding a language code (e.g. ‘ru’) to each story in the spreadsheet, we added conditionals to ensure that the correct branding assets were used, the correct HTML ‘lang’ attribute was set, and the HTML output was placed in the correct build directory for that language service.

Serving Stories

While Google cache the story HTML, they don’t cache any of the media, so we had to find our own solution for video and images that would work at scale. For video, we made use of the existing BBC tool Castaway, which journalists use to upload video (including vertical video as it would be in this case), and Media Selector, an API used to serve video across all BBC products, fronted by specialised media CDNs. For images, we used another in-house tool with a CLI to upload files programmatically to a S3 bucket, also fronted by a CDN.

Finally, we had to host the content on the BBC website. We asked for a number of new routes (e.g. bbc.co.uk/news/ampstories/*) to be created at the VTM (Virtual Traffic Management) level and point to a couple of Amazon S3 buckets where we would upload the stories. The VTMs also offered a caching layer for any traffic coming directly to the BBC site.

With each component in place, we needed to automate publication of each story. We wrote a script to trigger the Jenkins endpoint (our continuous deployment server) which starts a build and runs the Node application inside a Docker container on Jenkins, then copies the build assets to S3.

Writing Stories

While we were busy building the CMS, Oleg had been working on a number of stories for both the Russian and UK services. You can find the Russian stories here and the UK stories here. We asked Oleg for his thoughts on writing AMP Stories:

“These stories are quite easy to write — if we compare to regular stories on our website. The only thing you have to consider — you have to fit everything in a few sentences. It can be challenging when you have a long, complicated story.

In terms of editorial workflow — it was easy, especially when I was aware of the Russian Services’ plans, so you always have an option to plan ahead and create regular stories and AMP in parallel. Some of the stories were re-versioned from CPS/Shorthand (regular and long-form article formats) equivalents and some of them were created specifically for this format.”

We also learned that editing videos to meet AMP Stories specifications could be quite labour-intensive for journalists; Oleg said that multiple programmes were needed to edit files into the correct format. And with multiple videos per story, the process could be time-consuming.

Measuring performance

With our stories published and added to the sitemap, we waited for the traffic to roll in. Unfortunately, it wasn’t that simple — without promotion on the BBC site, very few viewers were discovering the stories through search alone.

Following a blog on the Russian site and some promotion across social media, our numbers did increase a bit. Our data shows that the Russian-language AMP Stories actually received close to six times as many total views as the English-language Stories. We also added tracking to measure how far users were progressing through stories, engagement times and clickthrough rates for related articles, but we suspect there was an issue with the tagging we used to collect this data based on the figures that came back.

The bottom line is that we could only promote the stories so much. Many publishers taking part in the original trial were featured in a special carousel for Stories in Google search. Google weren’t able to add us to Search during our trial, which limited our reach; most of the traffic to our English-language AMP Stories came from links we shared on Twitter. And an unusual limitation for those part of the carousel trial was that users would have to search for the publisher (e.g. CNN) rather than the story, which is not typical user behaviour.

Producing the headlines

In parallel with our bespoke Stories, we’d also been developing a format created by a team in BBC R&D who have spent the year prototyping New News formats. The team had already built upon their Expander prototype using AMP HTML and the BBC News index as a story feed, so it seemed a natural step to try it as an AMP Story.

In its original form, a page consisted of several short story summaries, each with a headline, images and one line summary. You could tap the story to expand it to several sentences, and tap again to read the full story — all while remaining on the same page.