I send emails to my users which have the same subject but contain different content aside from the header and footer. The header contains a logo, a "Part x of n" message, and an <hr>
and is never hidden. The footer contains an <hr>
, the same "Part x of n" text and some functional links (Next, Pause, Tweet) that I don't want hidden.
I tried enclosing these in a <div id=timestamp>
. I also tried adding &ts=timestamp
to the links. The links are images, so then I created a symbolic link called image2.png pointing to image1.png and alternated these images. None of these worked.
Is there a simple solution that I haven't thought of yet?
Here is some html:
names are really separated by, rather than just a comma.</p>
<p>This function does not do any checking for problems. We assume,
in this case, that the input is always correct.</p>
</div>
</div>
<div>
<p>All that remains now is putting the pieces together.</div></div></div></div></span>
<hr>(Part 19 of about 74)<br>
<a href='http://www.mywebapp.com/index.php?action=next'>
<img border=0 src='http://www.mywebapp.com/images/next.png' alt='Get next text'</a>
<a href='http://www.mywebapp.com/index.php?action=pause&listid=252&itemid=2100'>
<img border=0 src='http://www.mywebapp.com/images/pause.png' alt='Pause this text'></a>
<a href='http://twitter.com/home?status=tweetGoesHere'><img border=0 src='http://www.mywebapp.com/images/twitter-a.png' alt='Tweet this'/></a><br>
Original page: <a href='http://eloquentjavascript.net/print.html'>here</a><br>
And here's a screenshot:
I was able to solve this problem by appending a <span>
containing a unique invisible string to each line of my email's footer. At first, I just added time()
to each line, but some email clients interpret this as a phone number and convert the string into a URL. So, I pre/postpended a non-numeric character to the string and things seem to be working fine.
There must be a better way to do this though...
After going crazy from Gmail breaking up my transactional emails into blocks and hiding repeating parts of it, I implemented a helper function inspired by SeanO's answer in my meanie-mail-composer package to automate the addition of random strings for me.
This helper includes a hidden <span>
with a 5 character random string before every </p>
tag by default.
Here's the code snippet that does the trick (Node.js):
const crypto = require('crypto');
//Helper to randomize HTML contents
function randomize(html, tag = '</p>') {
//Create a 5 char random string for email content to be unique
const time = String(Date.now());
const hash = crypto
.createHash('md5')
.update(time)
.digest('hex')
.substr(0, 5);
//Create HTML string to replace with and regex
const str = `<span style="display: none !important;">${hash}</span>${tag}`;
const regex = new RegExp(tag, 'g');
//Replace in HTML
return html.replace(regex, str);
}
No more broken up emails!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With