I need to design a website system where users create an account, register their website and get a custom tracking code that display an image/link. I would love to hear some ideas.
The snippet needs to be able to do the following:
a) Track the amount of unique impressions the website gets.
b) Track user visit duration (this need to be precise in seconds until the user leaves the website/domain)
c) Have a tracking snippet code display an clickable image (I should be able to change this image based on which site is showing the snippet).
d) Be able to change the url/link of where the visitor will go if they click the image. (When a visitor comes to the site, the snippet needs to display an image of my choice and link of my choice).
e) Track the clicks of this image.
I read up about pixel tracking but this design and the metrics I need are a bit different. Seems like I might do some of it by including <img src="http://www.mydomain.com/getImage.php?id=5123" /> and process some of that info in my php script but I want to make sure there is not a better way/more efficient way to do it.
What you will want to do is have your users embed a piece of javascript coming from your server. Example:
The end point trackingCode.php will be doing some of the tracking work and then output a javascript that will be performing some other tracking tasks.
a) track unique impressions
You can do this immediately on the server side in trackingCode.php
b) track user visit duration
One method is to send a periodic ajax poll from the javascript to an endpoint on your server. This way you can tell approximately how long the user stayed on the page.
c) Display a clickable image
Your javascript will use document.createElement (or equivalent) to add the image to the host website
d) Be able to change the url/link of where the visitor will go
As you’re dynamically generating the javascript on the server, you can generate different javascript for each website, based on the id param you received. You leverage this to have a different image source and click-through url in the image you’re adding to the website in step c above.
e) Track clicks on the image
Instead of creating an element with a child element in step c above, you can create an and attach an onclick event handler to it.
The event handler will do two things – send an additional tracking ajax request to your server and redirect to the desired click-through url.
Another method is to create an element with a child , and have the href attribute of the point at a url on your server (something like https://www.mydomain.com/clickThrough.php?id=5134) . This will do the tracking and return a 302 http status (temporarily moved) which will cause the user to be redirected to the actual desired click-through url.