Let’s say you manage an online webshop, and to boost sales, you send a marketing email featuring the latest products from your website to customers who have registered on your site every month. However, your CEO wants to know how many customers actually open these emails.
If you’re unable to afford third-party email tracking tools, you can use the following method to track whether customers have opened your emails. First, create an API. This API will capture messages sent back by our customers if they open our emails.
[ApiController]
[Route("api/[controller]")]
public class EmailTrackingController : Controller
{
[HttpGet("EmailOpener")]
public ActionResult EmailOpener(string email, string eventId)
{
//Your logic here to capture email & eventId
//maybe save email and eventID to DB
byte[] pixel = Convert.FromBase64String("R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
return new FileContentResult(pixel, "image/gif");
}
}
As you can see, I have created an EmailTracking controller with a GET method named EmailOpenerthat accepts two parameters: emailand eventId.
When a customer opens your marketing email, this API will be called, and their email along with the eventId will be sent to it. You can then capture the email and eventId and store them in your database. You may also notice that I returned a certain encoded value “R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7.”
This is not just any dummy value; it is actually a valid base64-encoded representation of a very small transparent GIF image. Suppose the following simple HTML text is your marketing email for the upcoming Black Friday Sales.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Friday Sales</title>
</head>
<body>
<h1>Hi, check out our Black Friday Sales!!!</h1>
<img alt="" src="https://www.mysite.com/EmailTracking/EmailOpener?email=ENCODED_EMAIL_ADDRESS&eventId=BlackFridaySales2023" width="1" height="1" style="border: none; display: block;" />
<!-- Main content images -->
<img src="https://www.mysite.com/contents/image/BFD2023.PNG" alt="Black Friday Deals" />
<!-- Dummy messages -->
<p>Dummy Message....</p>
<p>Dummy Message....</p>
<p>Dummy Message....</p>
</body>
</html>
As you can see in the email, I have included the following html snippet
<img alt="" src="@Email&eventId=BlackFridaySales2023">https://www.mysite.com/EmailTracking/EmailOpener?email=@Email&eventId=BlackFridaySales2023" width="1" height="1" style="border-width: 0px; border-style: solid;" />
This is an HTML image tag with a size of 1x1 pixel, and it contains a link to call our EmailOpener API. Given its small size, it will go unnoticed by the customer when they open our marketing email.
As you can see, I put @Email for the email field, this is a variable meant to be replaced with the actual recipient’s email address.
Once the customer opens your email, the 1x1 pixel image will automatically load and trigger the URL (in this case, “https://www.mysite.com/EmailTracking/EmailOpener?email=@Email&eventId=BlackFridaySales2023"). This allows us to identify who has opened the email and for which event.
Clickable Image for Redirect
However, some email providers automatically block images from loading, and they only display the images if the user opts to load or download them. If this happens, our 1x1 pixel image won’t work, as our customers will not even see it in the email, much less download it.
To circumvent this issue, we can include an engaging image in the email with a call-to-action like ‘Click the image to discover more exciting offers!’ Once they click the image, we can redirect them to our API and log their email in our database.
To facilitate this, I have created another API method called RedirectCustomer.
public ActionResult RedirectCustomer(string email, string eventId)
{
//Your logic here to capture email & eventId
//maybe save email and eventID to DB
if (eventId == "BlackFridaySales2023")
{
return Redirect("https://www.mysite.com/BFD2023LandingPage");
}
else {
return Redirect("https://www.mysite.com");
}
}
This method will record the customer’s incoming email and, based on the incoming eventID, will redirect them to the appropriate page. For example, if we detect an incoming customer with the eventID ‘BlackFridaySales2023’, we’ll redirect them to our Black Friday Promotions landing page.
And in the email that send to customer, include the following html image tag.
<a href="https://www.mysite.com/EmailTracking/RedirectCustomer?email=@email&eventId=BlackFridaySales2023">
<img alt="Black Friday Promotion 2023" class="fullWidth" src="https://www.mysite.com/Content/images/BFD2023.png" style="display: block; height: auto; border: 0px; max-width: 600px; width: 100%;" title="Black Friday Promotion 2023!" width="600" />
</a>
In the email dispatched to our customers, an image named ‘BFD2023.png’ will be displayed prominently. Upon clicking this image, the customer will be redirected to our API at https://www.mysite.com/EmailTracking/RedirectCustomer?email=@Email&eventId=BlackFridaySales2023. At this juncture, the customer’s email will be recorded in our database. This data enables us to track the email open rate, which can be analyzed after the promotion concludes to assess the campaign’s reach and effectiveness.
Some Issues to consider
If you’re targeting a large customer base, you’ll need to consider potential issues such as database locks, concurrency, and server overload. It’s crucial to ensure that your infrastructure is robust enough to handle a high volume of incoming requests. Additionally, from a programming standpoint, it’s necessary to implement extra coding measures to manage concurrency and prevent database locking.