I was making a clone to the famous service ZOHO Mail in Laravel. I made a simple mailer client that sends emails to provided users’ email addresses. I am using Gmail SMTP.
Now there is thing in ZOHO Mail client that offers brief analytics for each sent email using their service. These analytics included a count for “Times Opened” (not called exactly this, but to get the gist) for each email. I dug down the logic behind how it works, and found out that my app must send a 1by1 Pixel invisible image in the Email body itself, and when the pixel is loaded, you record it in the server (since it is being loaded from the server). So this way, whenever anyone opens the recieved email, the pixel gets loaded and i get a record in the database.
Here is the code for appending the TrackingPixel with the body,
$emailId = uniqid();
$trackingPixel = '<img src="' . route('tracking.pixel', ['id' => $emailId]) . '" width="1" height="1" style="display:block;" alt="" title="" />';
$bodyWithPixel = $request->body . $trackingPixel;
First thing is that when it is recieved in the email, it looks like this,
<img src=3D"http://127.0.0.1:8000/tracking-pixel/66d03=d818509c" width=3D"1" height=3D"1" style=3D"display:block;" alt=3D"" title==3D"" />
What even is this 3D, and the second this is that the image is not being loaded in the email. I don’t know if it is becuase of this 3D or something else.
I researched it, and found out that Google doesn’t allow loading images from unknown sites/links (I am using LocalHost for now). Maybe this could be the reason, but anyone could tell a way around this problem?
$emailId = uniqid();
$trackingPixel = '<img src="' . route('tracking.pixel', ['id' => $emailId]) . '" width="1" height="1" style="display:block;" alt="" title="" />';
$bodyWithPixel = $request->body . $trackingPixel;
a pixel image loaded in the email body, but there is no image being loaded there.
Any other way that i can implement to record the email being opened?