While working on Switcheroo, a service which emails subscribers topics for them to reply back to, I ran into a funky problem, as can be seen by this screenshot:
When sending an email which is the same, or similar, to a user, everything that is non-unqiue seemed to be getting truncated. Gmail's "dot dot dot" marker was being used in place of the similar (or exactly the same) content.
This isn't ideal, as it changes the experience. For example, the footer no longer shows, which may have important unsubscribe and social links.
While I imagine there may be a header way of addressing this, I found a direct solution with the folowing snippet, included at the end of each outgoing piece:
<div style="font-size: 1px; height: 1px; line-height: 1px; width: 1px; color: #fff; text-indent: -10000px;">
<?= rand(100, 1000) ?>
</div>
While this is PHP-specific, something similar ought to work in most languages. The theory is as follows:
If the non-uniqueness of content after a specific part in the email is causing parts to be cached, we need to add something unique to the very bottom of the email.
Thus, By appending a random number at the bottom of the email, it makes the entirety of the email, in the eyes of Gmail's parsing system, unique.
To get around the UI-implications of this, I assign the following css properties:
- font-size: 1px
- height: 1px
- line-height 1px
- width 1px
- color #fff (or whatever your background colour is)
- text-indent -10000px
That should take care of all UI-possibilities.
Was a fun challenge :)