DEV Community

Cover image for I will be notified if you click this 😈
Shuvo
Shuvo

Posted on

I will be notified if you click this 😈

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

![alt text](https://yoursite.com/some_image)
Enter fullscreen mode Exit fullscreen mode

Or in HTML you'd use the image tag

<img src="https://yoursite.com/some_image" alt="alt text" />
Enter fullscreen mode Exit fullscreen mode

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')
})
Enter fullscreen mode Exit fullscreen mode

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')
})
Enter fullscreen mode Exit fullscreen mode

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 ...
Meme image

Top comments (9)

Collapse
 
grahamthedev profile image
GrahamTheDev

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!

Collapse
 
0shuvo0 profile image
Shuvo • Edited

Yes I assumed that since we are going to notify ourself(create the function) we obviously well be using our own SS code
fact

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Would you like to get notified when someone opens your dev.to article..

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!

Collapse
 
muchwowdodge profile image
Anton Rhein

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).

Collapse
 
0shuvo0 profile image
Shuvo

Very informative, Thank you

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Nice article man, will try this later.

Collapse
 
0shuvo0 profile image
Shuvo

Sure,
I am glad that you liked it.

Collapse
 
miguelmj profile image
MiguelMJ

It's been a long since a read something interesting here, thank you!

Collapse
 
0shuvo0 profile image
Shuvo

Thanks a lot πŸ’“
I really appreciate your read