A topic with the usage of dynamic content material on Apple purchasers is that Mail Privateness Coverage (MPP) caches photographs—and simplest presentations the cached symbol. This can be a giant downside, as dynamic content material is in most cases time delicate. Subsequently when Apple caches photographs 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 downside for fresh e mail marketing campaign—and Carin Slater (our E mail Advertising and marketing Specialist) discovered a workaround. She discovered a special approach to switch the picture out, so the content material wouldn’t be inappropriate for subscribers opening on Apple purchasers. Learn directly to learn how we did this for an e mail despatched to advertise Litmus Reside 2022.

At Litmus Reside 2021, Jay Oram spoke about the usage of an exterior CSS to modify a picture in an e mail by means of having the picture be a background symbol, then updating the exterior CSS report. So first of all, we attempted striking the tag from the rule of thumb because the background symbol, however discovered that the MPP nonetheless cached that symbol—no less than for a time frame earlier than the CSS was once known as once more. On the other hand, Litmus Personalize doesn’t do exactly dynamic photographs. It additionally does dynamic hyperlinks.

As an alternative of focusing on having the hyperlinks exchange, we used a dynamic hyperlink that modified to indicate to other CSS recordsdata that had corresponding photographs from the content material automation tags.

Step 1​

First we arrange the MPP model within the e mail code.







We then set it up with a picture within the <a> tag after which put the display/disguise code within the exterior CSS report:







Then display the content material within the .mac-agenda magnificence on Apple/iOS and conceal the .schedule magnificence block.

Now the .mac-agenda block is appearing, but it surely’s appearing the static symbol. So, we concealed that symbol, however saved the size in position by means of the usage of opacity and visibility houses. We then used the desktop content material automation symbol URL for the background symbol at the <a> tag and provides it a measurement so it might display up.

Including a media question to account for cellular after which did the similar with the background symbol as earlier than, however with the cellular content material automation symbol because the background symbol, and did the cellular/desktop disguise/display methodology.

That produced one CSS report for one consultation. Copying that and putting in place the other content material automation photographs led to 39 CSS recordsdata: one for each and every Litmus Reside consultation (35), two end-of-day emails, one pre-show e mail, and one default e mail.

Step 2​

With the code all arrange, we hosted the CSS recordsdata on our FTP. Then, we arrange the rule of thumb for MPP. When assigning a static symbol for a rule, you’ll be able to installed a URL to move with each and every symbol. We then put the URL for the CSS report that corresponded with the consultation after which used any random symbol:







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







So now on every occasion the e-mail is opened, the exterior CSS will pull the brand new CSS report that fits the consultation and can display the right kind background symbol.

There’s a other consumer revel in between MPP and non-MPP. For MPP, the subscriber must refresh their e mail, that means they want to shut it and are available again to it to peer the adjustments. For non-MPP, the picture will replace robotically even though the e-mail is left open.

Is Apple a well-liked consumer amongst your subscribers? If this is the case, give this a take a look at.