How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize

An difficulty with working with dynamic content material on Apple purchasers is that Mail Privacy Safety (MPP) caches images—and only shows the cached impression. This is a massive issue, as dynamic content is typically time delicate. As a result when Apple caches photographs when an electronic mail is despatched, by the time the recipient has opened the electronic mail, the content is no more time related.

We ran into this problem for current e mail campaign—and Carin Slater (our Email Advertising Specialist) observed a workaround. She figured out a different way to swap the picture out, so the content material would not be irrelevant for subscribers opening on Apple shoppers. Study on to uncover out how we did this for an e-mail sent to advertise Litmus Live 2022.

At Litmus Are living 2021, Jay Oram spoke about using an exterior CSS to change an picture in an e mail by having the image be a history impression, then updating the external CSS doc. So to begin with, we tried using putting the tag from the rule as the qualifications graphic, but located that the MPP continue to cached that image—at the very least for a period of time of time just before the CSS was called yet again. Nonetheless, Litmus Personalize does not just do dynamic visuals. It also does dynamic hyperlinks.

Instead of concentrating on owning the backlinks improve, we used a dynamic connection that improved to position to different CSS information that had corresponding photos from the articles automation tags.

Move 1

1st we set up the MPP variation in the electronic mail code.

We then established it up with an picture inside of the tag and then place the demonstrate/cover code in the external CSS file:

Then demonstrate the content material in the .mac-agenda class on Apple/iOS and disguise the .agenda class block.

Now the .mac-agenda block is showing, but it is demonstrating the static image. So, we hid that graphic, but kept the dimensions in area by utilizing opacity and visibility properties. We then utilised the desktop content material automation graphic URL for the background picture on the tag and give it a size so it would display up.

Adding a media query to account for mobile and then did the same with the qualifications picture as prior to, but with the cell information automation impression as the background picture, and did the mobile/desktop conceal/display technique.

That made just one CSS file for one session. Copying that and placing in the diverse material automation illustrations or photos resulted in 39 CSS information: one for every Litmus Stay session (35), two finish-of-working day emails, 1 pre-show electronic mail, and one particular default e-mail.

Step 2

With the code all set up, we hosted the CSS files on our FTP. Then, we established up the rule for MPP. When assigning a static picture for a rule, you are equipped to set in a URL to go with each and every impression. We then put the URL for the CSS file that corresponded with the session and then utilised any random impression:

At the time the rule was set up, we took the URL from the rule tag and put it in the external website link code in the electronic mail:

So now whenever the e-mail is opened, the external CSS will pull the new CSS file that matches the session and will display the accurate track record image.

There is a distinct user working experience concerning MPP and non-MPP. For MPP, the subscriber demands to refresh their email, this means they need to have to close it and come again to it to see the improvements. For non-MPP, the impression will update automatically even if the electronic mail is left open.

Is Apple a well known shopper between your subscribers? If so, give this a test.

Leave a Reply