Would you like to get notified when someone opens your dev.to article or reads your email? Yea that will be awesome. Okay then lets see how we can do that?
Lets talk about Images they are pretty cool right? Imagers are everywhere including in Articles and Emails.
So let see how image work.
In markdown you use images like this
Or in HTML you'd use the image tag
<img src="https://yoursite.com/some_image" alt="alt text" />
and of course the markdown above is later compiled to HTML So lets focus on that.
So when a webpage have an image the browser will send an http request to the URL which is in the src of the image(https://yoursite.com/some_image in our case).
And then https://yoursite.com will send us and image which will be later shown to us in browser.
So the server-side code of https://yoursite.com/ could look something like this
app.get("/some_image", (req, res) => {
res.sendFile('some_image.jpg')
})
But the question is, is it that all we can do? Well its our code we can do whatever we want. So why not just notify our self that someone viewed this image?
app.get("/some_image", (req, res) => {
notifyUser() //You can implement it the way you want
res.sendFile('some_image.jpg')
})
Now we will be notified whenever a user sees our image. That also means that if we use this image in our article/email we will know when a user opens it/reads it.
So if you're seeing this image that means ...
Top comments (9)
It might be worth noting this won’t work on DEV as they intercept and self host all images.
Only way you could do this on DEV is to put the image in a codepen or similar so you can control the image source.
Useful for emails though!
Yes I assumed that since we are going to notify ourself(create the function) we obviously well be using our own SS code
You opened the article with being able to track DEV articles, so I just thought I would point out that you can't actually do it on DEV without the workaround I suggested of putting it in a codepen.
Nothing wrong with your implementation, just a limitation of the fact that DEV controls the images, even if you point them to your own server in the markdown!
I want to add, that this idea is quite old and mostly used by analytics-services. It will even work, if someone has enabled ad blockers, because the browser cannot decide about the purpose of an image in a website a priori. In Addition to that, you can log information of the request headers (or even TCP packages). When used for analytics, images are very small sized (1px * 1px or smth similar) and/or transparent. By using many different metrics, that can be inferred by request, even cross-site tracking is possible without cookies or anything. Though it wont be very precise as well as not long-term representative (Client ip‘s change normally in regular intervals).
Very informative, Thank you
Nice article man, will try this later.
Sure,
I am glad that you liked it.
It's been a long since a read something interesting here, thank you!
Thanks a lot 💓
I really appreciate your read