Automating Mailchimp

If your goal is to sell more stuff, or customer retention in general, it’s irresponsible to not use email automation.

First, what is email automation?

It’s a method of sending targeted and meaningful emails to customers without the need for human intervention.

Have you ever logged in to an e-commerce website, added products to your cart — and closed the tab after getting distracted… only to return to find an email offering you a discount on the items in your cart? That’s email automation.

Mailchimp gives some starter templates:

Mailchimp Automation Starters — source https://mailchimp.com/help/create-an-automation/

Creating our first automation

Scenario: We want to email users our users when they sign up. Our goal is to increase profile completions by welcoming them and giving them tips on creating a 5-star profile.

Step 1: Selecting a template

Assuming you have a Mailchimp account, and an existing subscriber list (empty or not), visit Mailchimp’s Automation Builder and select “Welcome new subscribers”, you should be met with a screen that looks like this:

The screen rightly educates you on the importance of automated emails and first impressions. Select your list of interest (that which users will be subscribing to) and click “Begin”

Step 2: Designing the email

Completing step 1 should bring you to this screen:

This is where the “mailchimping” happens. You can edit the email title, subject, preview and content. If you’re Mailchimp literate, you can play around with the merge tags to further personalise your email. If you’re not — you can find a merge tag cheat sheet here.

Once you’re done with editing the mail. Click “Start Sending”. Don’t panic, it’s not going to send anything just yet — this just activates the automation, meaning it’s now listening for new subscribers to send the email to (i.e. if you add a user now, they’ll receive the email — but let’s save that for later!)

Subscribing users through the Mailchimp API

What you need:

API Key: You can create one here, List ID: Go to Lists, select your list and go to Settings>List name and campaign defaults to find your ListID.

I’ll be using afirebase cloud function(Node) to send a request to the Mailchimp API

Step 1: Setting up the function

const cors = require('cors')({
  origin: true,
})

export const subscribeUser = async (request, res) => {
  return cors(request, res, () => {
    const { emailAddress, firstName, lastName } = request.body

    subscribeUserToMailchimp(emailAddress, firstName, lastName).then(response => {
      // handle success logic
    }).catch(error => {
      // handle error logic
    })
  })
}
view raw

We create an asynchronous function subscribeUser that takes in request and response objects (this may look familiar if you’ve built an express app — we’re doing exactly that). We wrap these using the cors middleware package for cross origin resource sharing support.

On line 9, we have a function subscribeUserToMailchimp that takes in an email address, a first name and a last name. This is where the magic happens.

You could add more parameters and map them to their respective merge tags if that was your goal but we’ll keep it simple here.

The subscribeUserToMailchimp function looks like this:

const axios = require('axios')

// Retrieving the api key from the firebase environment variables list
const { api_key } = functions.config().mailchimp

const subscribeUserToMailchimp = (emailAddress: string, firstName: string, lastName:string) => {
  const mailchimpApiUrl = 'https://usXX.api.mailchimp.com/3.0'
  const listID = 'ec12345689'

  // creating the axios options parameter
  const options = {
		method: 'POST',
		url: `${mailchimpApiUrl}/lists/${listID}/members/`,
		headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
    auth: {
      username: 'anystring',
      password: api_key
    },
    data: {
      email_address: emailAddress,
      status: 'subscribed',
      merge_fields: {
        'FNAME': firstName,
        'LNAME': lastName
      }
    }
  }
  
  return axios(options)
}

You may have now noticed that I actually lied and used TypeScript (you should too!)

We make a post to /lists/{listID}/members to create a new member, with basic auth, which is supported by Axios using the auth property in the options parameter. That’s it for the logic!

Step 2: Connecting and deploying to Firebase

The last step is importing the first subscribeUser function that will handle our API requests. We use Firebase’s functions module to wrap our subscribeUser logic, and export it, thus exposing it to the firebase deploy script.

const functions = require('firebase-functions')
import { subscribeUser } from './some-js-file-exporting-the-function'

exports.mailchimp = {
  subscribeUser: functions.https.onRequest(subscribeUser)
}

Our backend work is complete! All we have to do is deploy using:

firebase deploy --only functions:mailchimp

Connecting our frontend form

At this point, firebase will expose an API endpoint that we can send a json object containing a user’s email address and their first and last names.

Logging into the firebase console and peeking into the functions will allow you to retrieve the API endpoint:

In our hypothetical case: https://us-central1-some-cropped-out-name.cloudfunctions.net/mailchimp-subscribeUser

You could test this using Postman and subscribing your own email address, and you’d get your professionally designed template sent to you within a few seconds.

The API takes in a JSON object that looks like this

{
 "firstName": "Your Name",
 "lastName": "Your Last Name",
 "emailAddress": "your@email.com"
}

From your frontend, you’d simply make an http request (I’m using Angular 7) anytime someone completes a sign up with a valid email address.

...
const userToSubscribe = {
  firstName: this.name,
  lastName: this.lastName,
  emailAddress: this.email
}

const options = {
  headers: new HttpHeaders({
    'Content-type': 'application/json'
  })
}

const url = 'https://us-central1-some-cropped-out-name.cloudfunctions.net/mailchimp-subscribeUser'

this.http.post(url, userToSubscribe, options)
  .subscribe(() => console.log('User subscribed'))

And there we have it! Your users will receive an aesthetically pleasing, professionally designed email, that welcomes them when they sign up.

Low effort, high return! 11/10

Nona designs and builds intuitive software for FinTech businesses. If you’d like to accelerate your FinTech project, book a consultation with us!