Building interactive email with AMP

Fangzheng Tian | Software Engineer, Growth Engineering

AMP (Accelerated Mobile Pages) is an open source technology created by Google to support fast mobile web pages. Over the years, we’ve partnered with Google and adopted AMP technology in our mobile web pages to deliver a faster, more efficient user experience.

Most recently, we adopted the latest iteration of AMP to expand support of AMP to all Gmail clients, making the emails we send to Pinners interactive. With these updates, AMP emails work more like a web page or mobile app, enabling Pinners to perform various actions within email including saving Pins.

Image for post
Image for post

Read, save, go

One of the channels we use to surface personalized recommendations to Pinners is email. We’re constantly surfacing recommendations to Pinners, and we’re always looking for ways to make that communication more engaging. We treat emails as an extension of our core product– a way to increase comprehension and show our product values.

Typically, when a Pinner receives an email from us, they must click a Pin in the email and then are directed to the Pinterest.com or mobile app, potentially log in, and save to a board. The longer the process, the more likely the user won’t take action. With AMP for Gmail, we saw huge opportunities to improve engagement right from email.

Now, instead of emails being limited to static content, readers can engage with Pinterest immediately. It’s a perfect fit for Pinterest. If a Pinner is inspired with an idea they see in their email, they can save it right away.

Bringing interactivity to email

As an overview, AMP technology includes AMP HTML, AMP JS and AMP Cache as a complete set for supporting various requirements of mobile web development. However, due to security concerns of enabling Javascript, currently Google only supports AMP HTML in emails. With this in mind, when designing the email UI, we limited animation usage, and supported animations by CSS or AMP HTML tags. To better fit Pinners’ habits, we kept our typical grid of Pins.

We developed the update in parallel with Google and provided feedback throughout the process.

Throughout development, we also kept security in mind. Since email cannot possess sessions or user login features, we needed to generate the auto-login URLs for two main Pinterest actions in AMP email: get user’s boards and save a Pin to a board. Although these URLs are pre-encoded, we took additional measures to prevent spam. When Gmail client catches a Pinterest action, it will send out the GET/POST request to Google. Google then generates and attaches a security token for this request and relays the request to Pinterest. After our service receives the request, we call Google to validate that token before we return any user info. This extra step of validation assures the URLs won’t be misused.

Typically, HTML size limit in Gmail is 100k, and so we had limitations with MIME. If an email is over 100k, Gmail will show the first part within the limit and then display a “show full message” button. But for the initial launch of AMP for Gmail, if the AMP HTML part is over 100k, the full, normal static email will be shown. As a result, we needed to minimize our AMP email size while maximizing content and optimizing interactive experience.

Benefits of AMP Email

AMP email is a next generation email technology that provides a faster, more interactive mobile web experience. The technology will also be supported by Microsoft Outlook, Yahoo! and Mail.Ru. With the support and advocacy of industry leaders, we’re optimistic about the future growth of this ecosystem.

AMP email also gives Pinterest chances to gather user feedback more easily. For example, Pinners can let us know if they don’t like a Pin that’s been recommended, which is feedback that ultimately makes their overall Pinterest experience more relevant. We’re also exploring Pin closeups in email so Pinners can get more details of a Pin right from email. For our topic recommendation emails, we can enable topic pickers for users. Users can now even follow topics they are interested in directly in the email. We’re also exploring adding the ability for Pinners to directly reply to Pinterest Messages in email with AMP.

We’re currently rolling out AMP emails to Pinners, as we continue working on ways to make communications with Pinners as seamless and engaging as possible across platforms.

Pinterest Engineering

Written by

https://medium.com/pinterest-engineering | Inventive engineers building the first visual discovery engine | https://careers.pinterest.com/

Pinterest Engineering Blog

Inventive engineers building the first visual discovery engine, 200 billion ideas and counting.

Pinterest Engineering

Written by

https://medium.com/pinterest-engineering | Inventive engineers building the first visual discovery engine | https://careers.pinterest.com/

Pinterest Engineering Blog

Inventive engineers building the first visual discovery engine, 200 billion ideas and counting.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store