How to stream an image from PHP for tracking purposes

Question

With affiliate marketing and PHP, I know how to make a tracking pixel like this:

<img alt="" src="http://example.com/pixel.php?tracking=43233" />

Then, in pixel.php I do something like:

<?php

$sTrack = @ $_GET['tracking'];
$sTrack = urldecode($sTrack);
$sTrack = strip_tags($sTrack);
$sTrack = trim($sTrack);
// do something with sTrack here
header('Content-type: image/gif');
readfile('images/invisible.gif');

Trouble is, on this offer page I'm receiving cname and cemail as query params on the URL, and the customer is hosting on something that doesn't support PHP but does let me insert Javascript, and I CAN'T use jQuery in this case. Instead, I need to do this in 100% pure Javascript. So, I can't read $_GET to pick up the cname and cemail.

I know that location.search will give me those parameters. I just need how to change the IMG tag so that like on a load event I can pass the location.search on the end. And I need it to work across all the browsers since IE7 and up, as well as Opera, Safari, and Chrome.

This is 100% on the server side. Nothing to do with JavaScript or jQuery. You need to stream out the binary after sending the MIME headers. — Diodeus - James MacFarlane, Feb 02 '12 at 20:28
See: http://stackoverflow.com/questions/6028452/load-a-php-image-using-src — Diodeus - James MacFarlane, Feb 02 '12 at 20:29
@Diodeus, uh, why not just read location.search in Javascript and pass it to the remote PHP page? See, user "caleb" below figure out what I'm talking about. — Volomike, Feb 03 '12 at 00:37

caleb · Answer 1 · 2012-02-03T01:30:31.653

1

Use Javascript to set image source.

<body onload="document.getElementById('tracking_pixel').src='http://example.com/pixel.php'+location.search;">
    <img id="tracking_pixel" src="" />
</body>

Edit:

Yes, you can make it shorter by putting it in the img's onload. You can even drop the id and the this keyword. However, you cannot have the initial src to be empty, in fact, it has to be a valid image for it to trigger the onload event. The problem with this is that you incur the cost of a request over the network.

Here is the shortest I could muster, instead of repeating the url, I used += but that meant the onload handler had to be cleared.

<body>
    <img src="http://example.com/pixel.php" onload="onload=''; src+=location.search;" />
</body>

Alternatively, you can use data URI. Unfortunately, the data URI for just 1 pixel is pretty long.

<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=" onload="src='http://example.com/pixel.php'+location.search;" />
</body>

edited Feb 03 '12 at 01:30

answered Feb 02 '12 at 20:33

caleb

1,579
12
12

Question. Is there a way to shorten this up such as using onload event inside the IMG tag, and then using the "this" variable in Javascript? And then make it work cross-platform with this shortened version? – Volomike Feb 03 '12 at 00:38
BTW, an Egyptian programmer colleague of mine had a great suggestion. Don't pass the location.search. Instead, use $_SERVER['HTTP_REFERER'] to pick that up in pixel.php. That avoids the Javascript need altogether and lets you insert this technique into things like emails and forums. – Volomike Feb 03 '12 at 01:12
1

Yes, you can do that, but sometimes you want to track more than just a number. For example, load time. – caleb Feb 03 '12 at 01:18
Good point. So, use the Javascript if necessary. Otherwise, use the HTTP_REFERER from the remote page. – Volomike Feb 03 '12 at 01:56
BTW, I just noticed your alternative solution just now. That's fantastic -- it shortens things up a bit. So, I can go with either option, $_SERVER['HTTP_REFERER'] in pixel.php or in the Javascript technique, depending on need. – Volomike Feb 03 '12 at 02:16
BTW, you can use this for a shorter src. data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAA‌AICVAEAOw== To all who are reading this, note that IE6 and prior do not support this sort of image URL, but that's okay because it's only for a second before it gets switched onload. An all white one is even shorter: http://stackoverflow.com/a/2933356/105539 – Volomike Feb 03 '12 at 02:20
An even shorter 1x1 invisible GIF URL: data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== – Volomike Feb 03 '12 at 02:27

score 1 · Accepted Answer · answered Feb 03 '12 at 03:21

1

You can just use the http://example.com/pixel.php as the img src, and then check the referral in that PHP script.

answered Feb 03 '12 at 03:21

doc_id

1,363
13
41

How to stream an image from PHP for tracking purposes

2 Answers2