Programmatically Personalize a Forwarded Email

This was first posted on my blog (jonathan-kim.com). You can check out the original post, if you're interested.

The other day, the project manager for my team (Brian McMullin) came to me with a simple request: he wanted to change the text of the call-to-action button in one of our daily emails. His research suggested that the people who were receiving that daily email were actually forwarding it on to other people in their organization, so Brian wanted to target them a bit better. But what if we could target them both a bit better?Well today, you can.

The code

I like it when people get straight to the point, so here's the code. If you want an explanation of how I got it and why it works, please continue reading :]

<p class="cta1">
    This will only appear when reading an original version.
</p>
<p class="cta2" style="display: none">
    This will only appear when reading a forwarded version.
</p>

<style type="text/css">
    blockquote .cta1, .WordSection1 .cta1 {
        display: none !important;
    }

    blockquote .cta2, .WordSection1 .cta2 {
        display: inline-block !important;
    }
</style>

My impromptu research

I noticed that many of the forwarded messages I received in the past displayed the original sender's message, but in a slightly different format, usually indented. With that in mind, I emailed the entire development team at HubSpot and asked everyone to forward the email back to me, along with the name of their email client. I even wrangled some sales people into doing it so I could get a good representation from people using Microsoft Outlook. It turns out that all email services take your original message and conveniently wrap it in a div (with a class) or a blockquote, meaning you can use that as a CSS selector. It's so stupidly simple.

Show me an example

Original version of the email:

Forwarded version:

How to use it

Stick that piece of code in the body of your email (putting it in the head section makes it more susceptible to being parsed out). Then apply the class "cta1" to the element you want to show in the original, and cta2 to the element you want to show in the forwarded version. Make sure to also add the CSS declaration "display:none" to the elements that have the cta2 class on them, so they're hidden by default. When your recipient is reading a forwarded version of the email, the code snippet will take effect by hiding the original and showing what was previously hidden.

Some caveats

Believe it or not, Gmail is doing ungodly things to make email design miserable. Campaign Monitor has a really awesome chart showing email compatibility across clients, and Gmail and Android are the worst, perhaps even worse than Blackberry. They don't support external css blocks, which makes this technique completely ineffective. What about just hiding the second call-to-action so it's not awkward?They've thought of that too. Gmail scrubs your email for anything, and I mean ANYTHING, that can hide an element on a page. Here's a short list of the hacks I've tried:

• CSS "display: none"
• CSS "visibility: hidden"
• CSS "text-indent: -9999px" or "text-indent: 9999px"
• CSS "margin-top: -9999px" or "margin-bottom: 9999px"
• CSS "position: absolute" + "top: -9999px"
• HTML5 "hidden" attribute

If you find a way to make it work in Gmail, please share. It's true that you can do stuff using server-side requests and header parsing to return different images. If you want to go that route, good luck :P

When to use (or not use) this technique

If your email list is mostly composedly of Gmail users, you probably shouldn't use this technique. You also probably shouldn't use it to spam people. At HubSpot, over 50% of our email recipients view these emails on some version of Outlook. About 20% view it on Apple Mail, and about 15% view it on an iPhone. Only 6% of our customers actually use Gmail to view our emails. Just the same, it's a good idea to make sure the email still looks natural with both call-to-actions displayed simultaneously.

Further reading

Hopefully this simple little technique sets your mind ablaze with other ideas to provide value with simple hacks. If you're interested in pushing the envelope in the email sector, the folks at Litmus are doing some pretty amazing stuff. Here's some discussion behind the secret sauce that puts them ahead of the pack in terms of email analytics:

• http://stackoverflow.com/questions/3224436/how-does-litmus-track-their-email-analytics
• http://stackoverflow.com/questions/2958926/track-mass-email-campaigns

They're my source for the email analytics used in this article. I highly recommend signing up with them and getting solid data on your email demographics and baseline click-through rates before attempting any of the above.