Dynamic images in emails and other fancy analytical features that you can easily DIY Alex Trandaburu Follow Apr 18 · 5 min read

So, for a while now, a part of my job has included doing the coding part of marketing emails. I’ve done it for about 8 years or more, now (I think). And after a while, it gets boring and repetitive.

You might get tired of being on the receiving end of them, and I might be tired of rolling my eyes (when I get the boring gimmicky content, that I need to plug into an email template). But, every once in a while you see something interesting.

I’m a member of a gym, let’s call them Schmanet Ritness (legal purposes, I don’t want my tucchus sued, and I don’t know if I can name them). Because of the ‘rona outbreak going on, they’ve had to close all their physical locations, which has really sucked. But, they’ve been amazingly decent, by freezing charges on the accounts of all members. And, on top of that, they’ve been doing public Facebook Live events, with simple at home workouts, open to anyone/everyone.

This brings me to Schmanet Ritness’ emails; notification (maybe marketing) emails that they send out to members, with a very fancy animated gif, that features a dynamic countdown timer, letting you know how much longer ‘till the next FB Event. And, I was impressed.

So let’s get to the magic of how that works.

When you’re coding an html email, and you put in an <img> tag in your source code, and point it to an image url. Typically, it’s a static image, something like http://www.YourWebsite.com/images/image.jpg. You put that in your email, you send your email, the person gets the email, and their email client loads the email and downloads the image, to display.

But…under the hood, downloading that image is still just a regular web request. Meaning, at the point the email client goes out and talks to your server, it can be context aware.

Therefore, when the request comes in to your server, you can do conditional processing, before returning back content.

For the Schmanet Ritness emails, as it relates to their countdown clock, a request to download the image goes to the server and the server runs some logic (like seeing what time it currently is on the server, probably a database call to tell what time the event is happening on FB, and they probably end it all, with a call to a dynamic image generating library, like ImageMagick). Finally, the image is generated and returned back to the email client.

Sample working NodeJs code:

const gm = require('gm').subClass({ imageMagick: true });

const express = require('express');

const app = express();

const port = 3000;

app.get('/api/:name', (req, res) => {

// creating an image

gm(200, 200, "#ddff99f3")

.drawText(20, 50, `Hello, ${(req.params.name || "Visitor")} !

The time is now

${new Date().toLocaleString()}`)

.toBuffer('jpg', (err, buffer) => {

res.contentType('jpeg');

res.end(buffer, 'binary');

});

});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

The result of invoking that endpoint

This code uses Nodejs, ExpressJs, and the ImageMagick NodeJs wrapper package from https://github.com/aheckmann/gm. You can then code your email’s html, with an image tag of

<img src=”http://www.YourWebsite.com/api/{{CustomersName}}"/>

(taking care to replace {{CustomersName}} with an actual value, upon executing) , and every recipient will end up getting their own email with a personally customized image, and the current time the request to download the image came in. If you need actual code to download (rather than copy and paste what’s above) you can get it from https://github.com/dupuis2387/EmailMagic

NOTE: Do take care not use the above as production code.

It's merely a simple example.

How else might you use this?

Well, in theory, imagine creating “living” coupons in your email. They’re personalized to the person’s name, and they have a “living” expiration date. Meaning, every time they view your email, they’ll see the period the offer is good for decrement, resulting in a sense of urgency to “act now”.

Next up, want to determine if someone got your email and printed it? Well, there’s a nice cheat for that too.

For the marketing emails that I’ve done, I’ve had to add certain tracking pixels/code to the email template, in order to capture some analytical data. Plenty of companies offer solutions for this. One such company (again, not going to name them directly) is Bitmus. They offer plenty of cool tools, like being able to enter your email’s source code into an online editor, tweak it, lint it, etc and then fire off a bunch of real life tests to different VMs (I assume), that give back a screenshot of what your email looks like, rendered in different email clients/devices.

When you get ready to fire your email, you can add tracking code, that they generate for you. The tracking code includes one of those dynamic image tricks, to log that your email was opened, etc.

But, they also can tell you if someone printed your email. Or, at least, intended to. They’re able to do this, because part of the tracking code they give you, has a print only stylesheet/style declaration.

Something like :

<style data-ignore-inlining>

@media print{

#_t

{

background-image: url(‘https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere');

}

}

div.OutlookMessageHeader

{

background-image:url(‘https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere')

}

table.moz-email-headers-table

{

background-image:url(‘https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere')

}

blockquote #_t {

background-image:url(‘https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere')

}

#MailContainerBody #_t {

background-image:url(‘https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere')

}

</style>

<div id=”_t”></div>

<img src=”https://url.com?someQueryString=yourRecipientsDynamicEmailAddressGoesHere" width=”1" height=”1" border=”0" />

So, we have a div and some print css. When someone goes to hit print, the print css is “activated”, and via that background-image attribute, another context aware dynamic image call is made to the server, and analytics are recorded that someone printed your email. Or, again, at least hit Ctrl/Cmd+P.

Welp, that brings us to the end.

Enjoy making dynamic images, and enjoy tracking people, like the government does :)

PS: All those other CSS selectors are used to tell what email client might have loaded the emails; since different clients like Outlook, will inject their own html tags into your emails, automatically. Then, when the style rule encounters them, it fires off one of those dynamic image requests to the server, the server logs that it was opened in a particular client, and then returns back an almost invisible 1px by 1px image.