Like Beyoncé suggests: “If you like it, then you should put a ring on it”
For digital marketing: “If you wanna track it, you should put a pixel on it”

Implementing our own system could be a fun and enlightening experience of what really happens behind the scene.

Wikipedia explains:

When a user opens the page or email where ( a 1X1 tracking pixel) was embedded, they might not see the image, but their web browser or email reader would automatically download the image, requiring the user’s computer to send a request to the host company’s server, where the source image was stored. This request would provide identifying information about the computer, allowing the host to keep track of the user.

Here we would walk through an implementation of the above

  • HTML snippet for the pixel that can be installed anywhere
  • Flask web server that listens for requests
  • Reading parameters and dropping cookies

When a user opens a page or emails a 1X1 image would be requested from the server.

In html this is implemented as below, where the “src” bit means we are requesting for pixel.gif from the server of “https://southern-coda-217301.appspot.com”. Note that this pixel could exist on any webpage including other domains.

<img src="https://southern-coda-217301.appspot.com/pixel.gif" width="1" height="1">

The server would record the request and return the response of a 1×1 gif

Now that we settled the pixel request, we need to fulfil this request and start recording some data. Using Flask, we generate a gif (the gif_str bit) and send it back as requested and before that, we log the event with “Action Tracked”

app = Flask(__name__)

@app.route('/pixel.gif')
def returnPixel():
    gif = 'R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    gif_str = base64.b64decode(gif)
    logging.info("Action Tracked")
    return send_file(io.BytesIO(gif_str), mimetype='image/gif')

On the browser side – we can see the gif being returned here:

Now on the backend log when someone visits any web page with the pixel we see in our logs “Action Tracked” as part of fulfilling the request, we have logged the request.

So basically through this mechanism,  a request for a gif gets translated into a log – this form the basis of most 1×1 pixel tracking system.

So, how do we make this more useful? We could start by reading Headers metadata.

@app.route('/pixelwithParams.gif')
def returnPixelparams():
    headerUser  =request.headers.get('User-Agent')
    headerHost = request.headers.get('Host')
    gif = 'R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    gif_str = base64.b64decode(gif)
    return send_file(io.BytesIO(gif_str), mimetype='image/gif')

Here we can retrieve the User-Agent in the header- Typically :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246

So now we know a few things about the user:

  • The user is on a desktop using windows 10 – Windows NT 10.0; Win64; x64
  • The user is using the Edge browser Edge/12.246

Now, how does pixel track pass additional information back? For example, if you have clicked on a M-size shirt more info button. One way is through parameters. Notice the additional words after  “?” these are parameters being passed back to the server

<img src="https://southern-coda-217301.appspot.com/pixelwithinfo.gif?sizeinfo=M" width="1" height="1">

On server side we could capture these:

@app.route('/pixelwithinfo.gif')
def returnPixelparams():
    params  = request.args.get('sizeinfo')
    gif = 'R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    gif_str = base64.b64decode(gif)
    return send_file(io.BytesIO(gif_str), mimetype='image/gif')

Again in our log, we could see “m” stored in the params.

Additionally, We could actually also drop a cookie with the pixel :

@app.route('/pixelwithcookie.gif')
def returnPixelcookies():
    gif = 'R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    gif_str = base64.b64decode(gif)

    resp = make_response(send_file(io.BytesIO(gif_str), mimetype='image/gif'),200)
    resp.set_cookie('userid', "this user doesnt mind cookies", max_age=1296000)
    return resp

and when visiting any pages that have this pixel installed we could retrieve the following cookie information

This information could be read back by the originator of the cookie:

@app.route('/returncookieinfo')
def cookiesinfo():
    name = request.cookies.get('userid')
    return name

So here it is, a simple behind the scene of what happens when you are using pixels!