Detect Opens on Apple Mail Using an External CSS Pixel

When Apple announced that iOS 15 will implement Mail Privacy Protection, I wrote a post on the FreshInbox blog that from all my tests – it would no longer be possible to detect a real user open on Apple Mail.

It turns out there IS a way to detect a real open. After sending the post in my newsletter, a reader suggested to try testing using a pixel in an external CSS style sheet (external CSS pixel). A few tests later – lo and behold – I was able to confirm that it is possible to detect a real open that way.

I will go into more details on what this is as well as show how you can implement your own external style sheet pixel to test it. 

Note – I don’t expect this capability to remain available for long after iOS 15 launches next month or – at all. But here you go. (See UPDATE above).

Pixel within an external style sheet

External CSS style sheets are CSS styles stored in a file outside the email. Not all email clients support this but Apple Mail does!.

After creating my own “external CSS pixel”, I noticed that although Apple Mail will preload the style sheet itself, it will not preload any background images that are referenced in the style sheet.

Then when the email is opened, the client will fetch the background image in the style sheet and that is how you can tell that a real open event from a prefetched one..

External CSS Pixel Script (PHP)

In a recent article I showed how you can implement a PHP script to track opens in email. You should read that article to familiarize yourself with the basics of getting the script running.

I’ve updated the script here to support generating an external CSS pixel when you pass in an optional parameter (ext_css=1).

All this code does is take the parameters (p=xxxx) you pass into the script and generates CSS containing a CSS background image property that loads a transparent pixel as a background to the email body.

Here is an example of CSS that is generated by the script:

body {  
  background-image:url('https://myserver.com/path/to/pixel.php?p=mypixel123&css_pixel=1'); 
}

You can load this external style sheet by adding the following markup to your email (note the ext_css parameter to get the script to generate the CSS). Put any unique identifier in the “p” parameter:

<link rel="stylesheet" href="https://myserver/path-to/pixel.php?p=mypixel123&ext_css=1" >

Then you can send your email. (There is also a $CSS_DEBUG variable in the script that if you set to 1 will also display “style sheet retrieved” and let you know that the CSS was successfully retrieved.)

Testing the External CSS Pixel

If you have IOS 15 Beta installed, you can now test how the new Apple Mail update will behave with the External CSS Pixel.

1. Add a regular pixel as well as an external CSS pixel to your email by adding the following markup (change the path to your script) in the body of your email.
   

   Regular pixel:
    <img src="https://myserver/path-to/pixel.php?p=mypixel123">
   
    External CSS pixel:
    <link rel="stylesheet" href="https://myserver/path-to/pixel.php?p=mypixel123&ext_css=1"> 

2. Ensure your phone is connected to Wifi and a power source (this makes the client pre-fetch images within around 20 minutes vs hours if you’re not on wifi or power).
   
3. Fetch the email in Apple Mail but do not open it.
   
4. Wait around 20 minutes. You should see in the pixel log that the client has prefetched both the regular image pixel as well as the external style sheet but not the pixel within the external style sheet.
   

   2021-08-15 19:20:37", mypixel123, "External CSS fetched", 146.75.154.55,Mozilla/5.0,
   "2021-08-15 19:20:38", mypixel123, "Regular pixel fetched", 146.75.154.54,Mozilla/5.0,

5. If you like, you can wait a little while longer just to confirm the external CSS pixel isn’t downloaded 🙂
   
6. Open the email. You will then notice in the pixel log that the external CSS pixel is fetched – hence detecting a real email open!
   

   "2021-08-15 20:01:15", mypixel123, "CSS pixel fetched", 146.75.154.55,Mozilla/5.0,

If you have access to a web server running PHP, you can get the script here.

Lastly, I’ve had a change of mind on the usability of this technique – see UPDATE above this article.