About
Tracking pixels (aka beacon, 1×1 gif, or clear gif) is a tracker that allow for tracking where a POST requests are disallowed (mostly to track Open Email), but where you can embed an image that will perform a get with data passed in query string
Articles Related
Pro/Cons
- Pro: Works even if POST requests are disallowed
- Cons: Data payload is limited by the 2000 character URL length limit.
Usage
- and checkout pages
Syntax
Raw data
https://trackingapi.example.com/endpoint?att1=value1&att2=value2...
Example:
- Aws - Cloudfront - the request gets logged to the web log saved in S3 including some additional data provided by Cloudfront. (E.g. requester IP address and URL.)
Json Encoded
https://trackingapi.example.com/endpoint?data=<base64-ENCODED-JSON>
where:
Example
The IMG tag
- The Img tab would be where the src is a route that returns a 1×1 pixel image
<img id="pixel" src="https://api.example.com/pixel/track?data=xxxxthedataxxx" style="display:none">
Json Payload Encoding
- A payload (a json)
let payload = {
"userId": "025pikachu025",
"event": "Email Opened",
"properties": {
"subject": "The Electric Daily",
"email": "[email protected]"
}
}
- We can encode it in base64
let encodedData = window.btoa(JSON.stringify(payload));
console.log("The payload encoded is: "+encodedData);
- Result:
Return a 1×1 image in Php
How to send a 1×1 image as response in php. Source
$img = base64_decode('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7');
header('Content-Type: image/gif');
header('Content-Length: '.strlen($img));
header('Connection: Close');
print $img;
tpl_flush();