Developing a Tracking Pixel

Developing a tracking pixel

You can write a script that creates and returns a .gif, .jpeg or .png image using PHP for tracking purposes using the GD library (which is often distributed with PHP in modern versions). If you don't have access to GD, you can always recompile PHP with GD enabled.

Example:

pixel.php (commented for the purposes of explanation):

<?php

  // Create an image, 1x1 pixel in size
  $im=imagecreate(1,1);

  // Set the background colour
  $white=imagecolorallocate($im,255,255,255);

  // Allocate the background colour
  imagesetpixel($im,1,1,$white);

  // Set the image type
  header("content-type:image/jpg");

  // Create a JPEG file from the image
  imagejpeg($im);

  // Free memory associated with the image
  imagedestroy($im);

?>

In a simple example, you can then call this tracking pixel using the following example URL in an email or other page:

<img src="http://example.com/pixel.php?a=value1&b=value2&c=value3">

Using variables:

Within your pixel.php you can then parse and interpret any $_GET variables that are passed to it within the image tag, simplistically:

if (isset($_GET['a'])) {
  // (Do|log) act on a
}
if (isset($_GET['b'])) {
  // (Do|log) act on b
}
if (isset($_GET['c'])) {
  // (Do|log) act on c
}

Apply and repeat as you need, but you can be quite sophisticated about what you do and especially as you have access to quite a lot of information about the user through being able to set vars on the $_GET string.

A more applicable example might be:

<img src="http://example.com/pixel.php?userid=98798&campaign=302&last=8">

Tracking more than just $_GET variables:

You can also pick up much more information using PHP, such as:

// Server variables
$ip = $_SERVER['REMOTE_ADDR'];
$referer = $_SERVER['HTTP_REFERER'];
$useragent = $_SERVER['HTTP_USER_AGENT'];
$browser = get_browser(null, true);
etc...

and then perhaps insert into a tracking table in your database:

$sql = "INSERT INTO campaign_tracking 
        ('when','campaign','last','ip','useragent') 
        VALUES 
        (NOW(),'$campaign','$last','$ip','$useragent')";

This is a(the) basic method used widely for tracking email marketing campaigns and specifically in PHP, but the same method is applicable using other scripting/programming languages and libraries - and for other purposes too.

Further and useful information on GD:

GD reference - on php.net

How to load tracking pixel after 10 seconds?

A pure JavaScript implementation that will append the tracking pixel to the <body> after 10 seconds.

window.onload = function() {
  function addTrackingPixel() {
    var pixel = document.createElement("IMG");
    pixel.setAttribute("src", "https://ext.example.com/conversion/?c=122959&a=30225");
    pixel.setAttribute("height", "1");
    pixel.setAttribute("width", "1");
    pixel.setAttribute("onerror", "this.onerror=null;this.src='https://a248.e.example.net/9e0d7c940412d5badab847b855f8ac46.com/conv/'+this.src.substring(this.src.indexOf('?'));");
    document.body.appendChild(pixel);
  }
  var timeout = setTimeout(addTrackingPixel, 10000);
};

What's the best CSS to implement a hidden tracking pixel?

You should use display: none; as display: none; won't take up space on the document, whereas using visibility: hidden; will reserve the space for the pixel..

Demo (Using display: none;)

Demo 2 (Using visibility: hidden;)

Using position: absolute; is fine with visibility: hidden; but if display: none; is doing the job, than you don't have to declare two properties... And also, whatever you do, your img will be requested anyways..

Also, you might like to know whether images are prevented to download using display: none; than you are wrong, CSS display: none; has nothing to do with image loading.

Have a good read here

I have to create a web tracking pixel like facebook pixel, glami pixel etc

Solved my own problem:

    /**
     * @test track('PageView', {foo: 'bar'});
     */
    !function(a, u, d, i, o, t, e, k) {t='PixelTrack';o=[];
        a['track']=(...f)=>{o.push(f)};e=u.createElement('script');
        e.async=true;e.src = d;u.getElementsByTagName('head')[0].appendChild(e);
        e.onload=()=>{a[t](i);o.forEach((item)=>{a[t](item)})};
    }(window, document, 'http://www.domain.cr/js/pixel.js', 'INSERT_YOUR_API_KEY_HERE');

//    (function(a, u, d, i, o, t, e, k) {
//        e = 'PixelTrack';
//        t = [];
//        a['track'] = function(...f){
//            t.push(f);
//        };
//
//        k = document.createElement(d);
//        k.async = true;
//        k.src = i;
//
//        k.onload = function() {
//            a[e](o);
//            t.forEach((item) => {
//                a[e](item)
//            })
//        };
//
//        u.getElementsByTagName("head")[0].appendChild(k);
//
//    })(window, document, 'script', 'http://www.domain.cr/js/pixel.js', 'INSERT_YOUR_API_KEY_HERE');

And in pixel.js is laravel mix of something like:

window.PixelTrack = function(params){ console.log('do stuff') }

Developing a Tracking Pixel