Easy methods to picture swap dynamic content material on Apple Mail with Litmus Personalize | Origin Tech

One drawback with utilizing dynamic content material in Apple shoppers is that Mail Privateness Safety (MPP) caches pictures and solely shows the cached picture. This can be a huge drawback, since dynamic content material It’s often time delicate. Subsequently, when Apple caches pictures when an e-mail is shipped, by the point the recipient has opened the e-mail, the content material is now not related.

We bumped into this problem for a current e-mail marketing campaign, and Carin Slater (our e-mail advertising and marketing specialist) discovered an answer. She discovered a unique strategy to change the picture in order that the content material wasn’t irrelevant to subscribers opening in Apple shoppers. Learn on to learn the way we did this for an e-mail despatched to advertise litmus dwell 2022.

At Litmus Stay 2021, jay oram talked about utilizing an exterior CSS to vary a picture in an e-mail making the picture a background pictureafter which updating the exterior CSS doc. Initially, we tried to place the rule tag because the background picture, however discovered that the MPP nonetheless cached that picture, no less than for a time frame earlier than the CSS was known as once more. Nonetheless, Personalize Litmus it does not simply make dynamic pictures. It additionally does dynamic hyperlinks.

As a substitute of specializing in altering the hyperlinks, we used a dynamic hyperlink that modified to level to completely different CSS recordsdata that had corresponding pictures of the content material automation tags.

Step 1

First we set the MPP model within the e-mail code.

Then we set it up with a picture contained in the <a> after which put the present/disguise code within the exterior CSS file:

Then show the content material within the .mac-agenda class in Apple/iOS and conceal the .agenda class block.

Now him .mac-agenda the block is proven, however it reveals the static picture. So, we hid that picture, however saved the scale in place utilizing opacity and visibility properties. We then use the desktop content material automation picture URL for the background picture within the <a> label it and provides it a measurement to show.

Added a media question to the cell account after which did the identical for the background picture as earlier than, however with the cell content material automation picture because the background picture, and did the disguise/present cell/desktop approach.

That produced a CSS file for a session. Copying that and inserting the completely different content material automation pictures resulted in 39 CSS recordsdata: one for every Litmus Stay session (35), two end-of-day emails, one pre-show e-mail, and one default e-mail.

Step 2

With the code configured, we host the CSS recordsdata on our FTP. Subsequent, we arrange the rule for MPP. When assigning a static picture for a rule, you may enter a URL for every picture. We then put the URL of the CSS file that corresponded to the session after which use any random picture:

As soon as the rule was arrange, we took the URL from the rule tag and put it within the exterior hyperlink code within the e-mail:

So each time the e-mail is opened, the exterior CSS will pull within the new CSS file that matches the session and show the proper background picture.

There’s a completely different person expertise between MPP and non-MPP. For MPP, the subscriber must replace their e-mail, which suggests they’ve to shut it and are available again to it to see the modifications. For non-MPP, the picture will mechanically replace even when the e-mail is left open.

Is Apple a well-liked buyer with its subscribers? In that case, give it a attempt.