Create Your Own Tracking Pixel like Facebook

Learn How to Build a Custom Tracking Pixel with PHP and JavaScript

A tracking pixel is a small piece of code that can track user behavior on a website. It’s a commonly used tool for gathering information such as page views, purchases, and other user interactions. Popular services like Facebook Pixel or Google Analytics use tracking pixels to provide advertisers and website owners with valuable insights about their audience.

In this blog, we’ll walk through how to build your own custom tracking pixel using PHP for the backend and JavaScript for the frontend. The custom pixel will allow website owners to collect and send data from their site to your server. Let’s get started!

1. What is a Tracking Pixel?

A tracking pixel is a small, invisible image (1×1 pixel) embedded into a webpage. When a user loads the page, the image is requested from the server. By attaching data to the request (via URL parameters or post data), you can track the user’s behavior on the page (such as views, clicks, or purchases).

In this case, we’ll go beyond just tracking views and allow users to send custom data (like purchase events, cart additions, etc.) to your server.

2. Overview of the System

We will build two main components:

Frontend (JavaScript): This will be the pixel code that website owners can embed on their websites. The script will track page views and custom events, sending the data to your server.
Backend (PHP): The PHP server will receive the tracking data and process it. We’ll store the data in a database (MySQL or SQLite) for later analysis or reporting.

3. Frontend: The JavaScript Tracking Pixel

This script will be embedded on the websites of users who want to use your tracking pixel. When a user visits a page, the pixel will send a request to your server with information about the event (e.g., page view, custom events).

Step 1: Create the JavaScript Pixel Script

Here’s a simple JavaScript code that website owners can embed on their page. This will track page views and custom events:

<!-- Custom Tracking Pixel Code -->
<script>
  (function() {
    // Pixel settings
    var pixel = {
      pixelId: 'YOUR_PIXEL_ID', // Your custom pixel ID
      baseUrl: 'https://your-server.com/track', // Server URL to send data to

      // Function to send data to your server
      sendData: function(eventData) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", this.baseUrl, true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.send(JSON.stringify(eventData));
      },

      // Function to track page views
      trackPageView: function() {
        var eventData = {
          event: 'PageView', 
          pixelId: this.pixelId,
          url: window.location.href,
          timestamp: new Date().toISOString(),
          referrer: document.referrer,
          userAgent: navigator.userAgent,
        };
        this.sendData(eventData);
      },

      // Function to track custom events
      trackEvent: function(eventName, additionalData) {
        var eventData = {
          event: eventName,
          pixelId: this.pixelId,
          url: window.location.href,
          timestamp: new Date().toISOString(),
          referrer: document.referrer,
          userAgent: navigator.userAgent,
          data: additionalData
        };
        this.sendData(eventData);
      },

      // Initialize the pixel and track the page view
      init: function() {
        this.trackPageView();
      }
    };

    // Initialize the tracking pixel
    pixel.init();

    // Expose a global function for tracking custom events
    window.trackCustomEvent = function(eventName, additionalData) {
      pixel.trackEvent(eventName, additionalData);
    };
  })();
</script>
<!-- End Custom Tracking Pixel Code -->

Explanation of the Script:

Pixel ID: Each pixel has a unique ID (YOUR_PIXEL_ID) to identify the requests from your pixel in the backend.
Send Data: sendData function uses XMLHttpRequest to send the event data to your server as a POST request. The data is sent as JSON.
Track Page View: When the pixel is initialized, it automatically tracks a PageView event, which includes the URL of the page and some additional details (user agent, referrer, timestamp).
Custom Events: The trackCustomEvent function allows users to send additional events (like button clicks, form submissions, etc.) to your server.

Website owners can embed this code on their websites. Whenever a user loads a page or triggers a custom event, the data is sent to your server.

4. Backend: PHP Server to Handle the Data

The PHP server will receive the data sent by the pixel and process it. For simplicity, we’ll store the event data in a MySQL database.

Step 1: Setting Up the Database

Create a simple MySQL table to store the tracking data.

CREATE TABLE `events` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `pixel_id` VARCHAR(255) NOT NULL,
  `event` VARCHAR(255) NOT NULL,
  `url` TEXT NOT NULL,
  `timestamp` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `referrer` TEXT,
  `user_agent` TEXT,
  `data` JSON
);

This table stores:

pixel_id: The unique ID of the tracking pixel.
event: The event name (e.g., PageView, Purchase).
url: The URL of the page where the event occurred.
timestamp: The time when the event occurred.
referrer: The referrer URL (where the user came from).
user_agent: The user’s browser or device.
data: Any custom data associated with the event (stored in JSON format).

Step 2: PHP Script to Handle the Incoming Data

Create a PHP script that listens for POST requests containing the event data and stores it in the database.

<?php
// Set up database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tracking_db";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// Get the raw POST data
$rawData = file_get_contents('php://input');
$eventData = json_decode($rawData, true);

// Validate and sanitize input
if ($eventData && isset($eventData['pixelId']) && isset($eventData['event']) && isset($eventData['url'])) {
  $pixelId = $conn->real_escape_string($eventData['pixelId']);
  $event = $conn->real_escape_string($eventData['event']);
  $url = $conn->real_escape_string($eventData['url']);
  $referrer = $conn->real_escape_string($eventData['referrer']);
  $userAgent = $conn->real_escape_string($eventData['userAgent']);
  $data = $conn->real_escape_string(json_encode($eventData['data']));

  // Insert event data into the database
  $sql = "INSERT INTO events (pixel_id, event, url, referrer, user_agent, data) 
          VALUES ('$pixelId', '$event', '$url', '$referrer', '$userAgent', '$data')";

  if ($conn->query($sql) === TRUE) {
    echo json_encode(['status' => 'success']);
  } else {
    echo json_encode(['status' => 'error', 'message' => $conn->error]);
  }
} else {
  echo json_encode(['status' => 'error', 'message' => 'Invalid data received']);
}

$conn->close();
?>

Explanation of the PHP Script:

Database Connection: The script connects to a MySQL database (tracking_db) using the mysqli extension.
Handling POST Data: The file_get_contents('php://input') function reads the raw POST data. This data is then decoded into an associative array.
Validation: We check that the necessary fields (pixelId, event, and url) are present in the incoming request.
Storing Data: The event data is sanitized and inserted into the events table in the database.
Response: A JSON response is sent back indicating whether the data was successfully stored or if there was an error.

5. Testing Your Tracking Pixel

Embed the Pixel: Add the JavaScript pixel code to the webpage you want to track.
Send Custom Events: Use window.trackCustomEvent('EventName', {additionalData: value}) to track events on the webpage.
Check Your Database: Once events are triggered on the page, check your MySQL database to see the event data being stored.

6. Security Considerations

Data Validation: Ensure that the incoming data is valid and sanitized to avoid SQL injection and other attacks.
Rate Limiting: Protect your server by limiting the number of requests per second/minute from a single IP address to avoid abuse.
Privacy Compliance: Make sure that your tracking pixel complies with data privacy laws (GDPR, CCPA, etc.) by anonymizing sensitive data where necessary.

Conclusion

Building a custom tracking pixel using PHP and JavaScript allows you to track user behavior on any website that embeds your pixel. By collecting and analyzing this data, you can gain valuable insights into user behavior, optimize your marketing campaigns, and make informed decisions.

This tutorial provided the basic building blocks of a tracking pixel system. From here, you can extend the functionality, such as adding support for more complex events, integrating third-party analytics tools, or creating dashboards for users to view their data.

Happy coding!