Headless CMS + React in newsletter emails

Written by Willian Welbert — Web Programmer at AMARO

How disruptive can email be? You probably have a spam filter filled with frustrated attempts from various companies to grab your attention in your email account.

Yet, “74% of people in the 13–21 age group choose email as the preferred channel for companies or brands to interact with them”, according to this article on MediaPost.

This story is about how we manage to deliver custom-made newsletters to our customers’ inbox every single day. That’s one of the ways we use to keep everybody up to date with what’s going on at AMARO, maintain a relationship with our clientele, serve quality fashion content and increase our revenue.

Once upon a time, there were these things called tables

Email marketing is still pretty much a time machine in web development. We are limited to what email clients like Gmail and Outlook choose to implement (spoiler alert: pretty much nothing). To solve this, most companies send you a pile of images, stacked one on top of the other, or conform themselves with a limited range of design possibilities offered by any given email marketing service.

You will often find this HTML structure in newsletters, the pile of images:

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td border="0" cellpadding="0" cellspacing="0">
        <a href="PLEASE-CLICK-ME-IM-AN-IMG-THOUGH" target="_blank" rel="noopener noreferrer">
          <img src="PILES-OF-IMGS-1.JPG" alt="" border="0" style="display:block">
        </a>
      </td>
    </tr>
    <tr>
      <td border="0" cellpadding="0" cellspacing="0">
        <a href="STILL TRYING HERE" target="_blank" rel="noopener noreferrer">
          <img src="PILES-OF-IMGS-2.JPG" alt="" border="0" style="display:block">
        </a>
      </td>
    </tr>    
  </tbody>
</table>

In other words, generic templates are not fashion-forward or disruptive, #AMAROteam can do better.

But how?

At first, with hard-coded-work. We manually designed, coded and tested every aspect of every newsletter in every email client that has relevance in our email database. All that in 1999 HTML style. Not rarely, disruption comes with high prices in terms of time and effort.

As you might imagine, this method does not scale well. As we send more newsletters, testing different target audiences and A/B testing becomes more difficult and scales the amount of work exponentially with every change in text, images or products.

After we built a codebase versatile enough to cover the main designs, we’ve decided to move on to a development focused on automation.

The process

Experiencing the creation of daily content, we managed to identify the core needs of our use case, such as the separation from content and code and a faster way to display products inside newsletters.

With those needs in mind, we started looking for a solution that would cover them without restricting our ability to personalize both content and code, and that synergizes well with our current technology stack. We found that solution in a headless CMS-Prismic.

With an intuitive blog-post-like interface, Prismic delivers content inside our base code through a simple API call, which enables us to focus on enhancing newsletters as a project, and gives freedom to content and creative teams to change and adjust each email without the technical middleman.

Plus, errors and bugs are much less frequent, since hard-coding is reduced to special cases.

The builder code was written using React — decision made based on synergy with our stack, and a modularized workflow through components.

It is a rather simple application, its main purpose is to dissect every key-value pair from the JSON object coming from Prismic and attribute that value in the right spot in our code. The differential being our freedom to change or create code around those values.

If you’re interested in reading more about how we did that, please leave a comment and I’ll be sure to write a deep dive in that code.

Did it work?

Yes! We’re now able to deliver newsletter code almost 80% faster, with little to no errors or bugs, mainly improving the life quality of the teams involved in the process. Even better: fully personalized and disruptive ways of displaying content (or at least as disruptive as email clients allow us to).

One of the features of this application is to showcase the latest newsletters by send date.

We continue to analyze and improve this builder and the process as a whole in order to achieve even better, faster, and prettier content delivered right into our customers’ inbox.

If you want to be a part of this and many other great projects take a look at our open positions. Please feel free to comment on this story below, or reach me at willian.welbert@amaro.com