Building interactive email with AMP

Pinterest Engineering
May 22 · 3 min read

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.

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 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade