Automating Blog Newsletters with Mailchimp and Statamic

It's a lot easier to keep your head down and focus what time you have on honing your skills. For us at Unrealist, that means continuing to try to work on ideas for SaaS products that keep our Laravel development skills sharp, or working on this site to keep our Statamic skills growing.

The purpose of this blog and site in general though is two fold, to educate people on the ideas we have about software development, business, and treating the world right, and to keep us in front of folks so they remember us if they need some development work done.

While sharing what we know and believe about these topics is important, it has a much bigger impact when we consistently grow the number of people coming to this site and consistently grow our ability to focus on these topics (by bringing business in the door that lets us work on our favorite types of software for our favorite types of clients).

One of the most well known ways to keep yourself in front of an audience is to first earn their trust, and then ask them permission to keep in touch on a regular basis, most commonly via email.

Starting a mailing list is a daunting task. How do you collect the email addresses? What are you actually going to email all these lovely people? Who is going to take care of sending out those emails?

We started Unrealist in 2020 and we didn't send our first newletter until last week, so I feel you on this. Due to the way our lives have gone over the past couple of years, Lauren and I have barely had time to devote anything to Unrealist, so there hasn't been a ton that we felt like sharing. Most of my time dedicated to the business through the latter half of 2020, and a good portion of 2021 was on our first attempt at a SaaS business Dropship CI.

In hindsight, talking a lot more about the product while I was building would have been a good idea. There are a lot of reasons we didn't talk more about what we were doing, and we should delve into that more in another post, but it meant that our site was a bit of a graveyard for pretty much all of 2021.

Now that we're picking up the pace and trying to share our thoughts more intentionally, it was time to setup some automation to sling these posts out to the internet more proactively.

The setup

Our blogging/newsletter-ing platform is built on 3 pillars:

1. Statamic
2. An RSS feed
3. Mailchimp

This blog->rss->mailchimp funnel of automated domination is not that novel. I think bloggers have been using this type of setup for ages, but what's a bit different here is the CMS we use for this site, its lack of built-in RSS capability, and the seeming disapearance of blog->rss->newsletter canon configuration from Mailchimp's UI.

Step 1: Get a signup block going

We actually did step one ages ago, using Erin Dalzell's Mailchimp add-on for Statamic. Early on I knew we needed to collect emails in order to communicate with folks about our business.

Our signup form is just a normal form in Statamic, wired up via this add-on to zap all the responses into our general Mailchimp audience. The form looks like this and sits at the bottom of most of our pages:

All we're collecting here is an email to keep the form easy to fill out. It might be nice to add some first name flare to our emails, but I think opting for a sleeker form is better, at least for us.

This form is backed by this antlers code:

<div class="bg-white">
    <div class="max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
        <div class="px-6 py-6 bg-gray-800 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
            <div class="xl:w-0 xl:flex-1">
                <h2 class="text-2xl leading-8 font-extrabold tracking-tight text-white sm:text-3xl sm:leading-9">
                    Get updates straight to your inbox
                </h2>
                <p class="mt-3 max-w-3xl text-lg leading-6 text-gray-300" id="newsletter-headline">
                    We'll send out an update about once a week with new posts from the blog and news about what we're up to.
                </p>
            </div>
            <div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
                
                                                        <input aria-label="Email address" type="email" name="email" required class="appearance-none w-full px-5 py-3 border border-transparent text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 transition duration-150 ease-in-out" placeholder="[email protected]">
                    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-brand-orange hover:bg-orange-400 focus:outline-none focus:bg-indigo-400 transition duration-150 ease-in-out">
                            Subscribe
                        </button>
                    </div>
                                
                <p class="mt-3 text-sm leading-5 text-gray-300">
                    We care about the protection of your data. Read our
                    <a href="/privacy" class="text-white font-medium underline">
                        Privacy Policy.
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

This is put together from reading the Statamic forms documentation and combining that with the UI component library we've used to build the site, Tailwind UI.

The mailchimp integration is configurable via an admin UI that looks like this:

I just configured it via the config file which is located at config/mailchimp.php

<?php

return [

    /*
     * If you want to add to your mailchimp audience when a user registers, set this to `true`
     */
    'add_new_users' => true,

    /*
     * The form submissions to add to your Mailchimp Audiences
     */
    'forms' => [
        [
            /*
            * A MailChimp audience id. Check the MailChimp docs if you don't know
            * how to get this value:
            * https://mailchimp.com/help/find-audience-id/.
            */
            'audience_id' => 'YOURIDHERE',

            /*
            * if you need consent before you can subscribe someone, set this to `true`
            */
            'check_consent' => false,

            /*
            * if you're checking for consent, which field is it? Defaults to `'consent'`
            */
            'consent_field' => 'consent',

            /*
            * handle of the form to listen for
            */
            'form' => 'newsletter_signup',

            /*
            * See https://mailchimp.com/help/manage-audience-signup-form-fields/ for details on
            * Mailchimp merge fields
            */
            'merge_fields' => [
                [
                    /*
                    * The Mailchimp tag
                    */
                    'tag'=> 'EMAIL',

                    /*
                    * the blueprint field name to use for the merge field
                    */
                    'field_name' => 'email',
                ],
            ],

            /*
            * To have single opt in only, which I don't recommend, set this to `true`.
            * See: https://mailchimp.com/help/single-opt-in-vs-double-opt-in/ for details
            */
            'disable_opt_in' => false,
        ],
    ],
];

The important bits here are the audience_id (get this from Mailchimp), the form (use the form handle of the form you want to configure), and the merge_fields. I am just mapping the email here.

The configuration will vary depending on how your form is configured in Statamic and what your merge fields are in Mailchimp.

Great, now we've collected the emails, the next step is to sit on them for over a year...or...

Step 2: Aggregate your content for Mailchimp to slurp up

Statamic doesn't ship with RSS feed capabilities, so you have to add it yourself. Luckily, there is a fairly simple to configure RSS add-on for Statamic that you can install.

Once installed, really all you have to do is configure the plugin to start pulling entries from your collections to build your RSS feeds. The config file gets published to config/rss.php and most of the options are pretty self-explanatory. I'm still working to tweak our feed, I can't yet figure out how to get our blog's featured images to show up, but we'll get there.

You can see our article feed at https://unreal.ist/feed

Step 3: Fire up the mail cannon

Now that we have slurped the emails, and we're aggregating the posts, it's time to point the mail bots at our content and let them pepper the landscape with our words. I found it frustratingly difficult to find the right set up to handle this automation through Mailchimp's UI, but a quick google search (that was put off for way too long) yeilded the magic link to Mailchimp's automatic RSS integration.

The basic config is pretty simple:

Configure the campaign how you like. The defaults are probably good enough. Just make sure to read all the copy and tweak your Mailchimp templates to fit your brand. Add your logo, change the social media link URLs, make sure merge fields are being used correctly. There are some pretty handy pre-built templates that will render your RSS feed via merge tags. Ours looks like this:

This isn't winning us any webby awards, but it's mostly on brand, looks good, and gets the job done, we can improve it as we grow the blog. I've chosen to show you the version that's displaying the merge tags so you can get an idea of how the automation is built here. This is just using one of the free templates from Mailchimp and I think it does the job quite well.

So there you have it

Nothing mind-blowing here, but a few tedious chores that you've probably put off taking care of just like we did. If you're using Statamic, the specifics here might cover some things specific to your lovely unique child of a site that the wider WordPressing world can ignore. Get in touch if you have questions about setting this up. You can contact us via the site or tweet me at @DustinLeblanc and I'll gladly do what I can to help.