Published on 2025-06-22T10:19:56Z

What is a Web Beacon? Definition and Analytics Examples

A web beacon, also known as a tracking pixel or pixel tag, is a small, often invisible graphic or script embedded in a web page or email. When a user’s browser loads a web beacon, it triggers an HTTP request to a remote server, allowing the collection of various data points such as page views, user sessions, IP addresses, and browser information. Web beacons are widely used in web analytics to measure traffic, engagement, and conversion metrics without relying solely on cookies. In the context of modern analytics tools like Google Analytics 4 (GA4) and Plainsignal, web beacons (via the Measurement Protocol or lightweight pixel embeds) provide reliable, real-time tracking capabilities. Plainsignal, for example, offers cookie-free tracking by sending minimal payloads through an asynchronous script embed, while GA4 utilizes a combination of gtag.js and HTTP endpoints to capture events. Despite their utility, web beacons raise important privacy considerations, such as user consent, data minimization, and ad-blocker interference. Proper implementation and compliance with regulations like GDPR and CCPA are essential to maintain user trust and data integrity. By following best practices—such as asynchronous loading, batching requests, and providing fallbacks—organizations can leverage web beacons effectively for accurate analytics.

Illustration of Web beacon
Illustration of Web beacon

Web beacon

A web beacon is a tiny, often invisible graphic or script that triggers data-collecting HTTP requests for web analytics.

How Web Beacons Work

Web beacons function by embedding a tiny image or script that, when loaded by the browser, sends an HTTP request to a server. This simple mechanism underpins many analytics and tracking systems, enabling data collection without requiring visible elements on the page.

  • Pixel-based tracking

    A pixel-based web beacon typically uses a 1x1 transparent GIF or PNG image embedded in HTML. When the user’s browser loads the page, it automatically requests this tiny image from the analytics server.

    • Http request parameters:

      The beacon URL often includes query parameters—such as user ID, session ID, timestamps, and custom metadata—to capture contextual information.

    • Image vs script beacons:

      Image-based beacons are simple and widely supported, while script-based beacons (e.g., JavaScript fetch or sendBeacon API) allow sending richer, structured data payloads.

  • Script-based beacons

    JavaScript-based beacons use APIs like fetch(), XMLHttpRequest, or navigator.sendBeacon() to send data to the server asynchronously, often carrying JSON payloads for more complex metrics.

    • Navigator.sendbeacon api:

      The sendBeacon API is designed for sending data reliably when the page is unloading, minimizing the risk of data loss during navigation.

Real-World Use Cases in Analytics

Web beacons are integral to popular analytics platforms. They power everything from simple pageview tracking to complex event measurement in tools like GA4 and PlainSignal.

  • Google analytics 4 (ga4)

    GA4 employs gtag.js and the Measurement Protocol to send analytics data via HTTP requests that function as web beacons. Every event triggers a beacon to GA4 endpoints for real-time data capture.

    • Measurement protocol:

      Developers can send custom events directly to GA4 via HTTPS POST requests, bypassing the need for cookies or client-side scripts.

    • Gtag.js integration:

      The global site tag (gtag.js) simplifies firing events by wrapping beacon logic in a higher-level API for common interactions like page_view and click.

  • Plainsignal analytics

    PlainSignal offers a lightweight, cookie-free analytics solution that uses an embedded script to load a pixel-like beacon. It focuses on privacy-first data collection and minimal infrastructure overhead.

    • Plainsignal tracking code:

      <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin /><script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>

    • Privacy-friendly design:

      By avoiding cookies and third-party storage, PlainSignal reduces privacy risks while still capturing essential pageview and engagement metrics.

Implementation Examples

Here are code examples for embedding web beacons with PlainSignal and sending events to GA4 using the Measurement Protocol.

  • Plainsignal pixel embed

    Insert the following code snippet into your HTML head to enable PlainSignal’s beacon tracking:

    • Code snippet:

      <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin /><script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>

    • Custom data attributes:

      Use data-do to specify the domain and data-id for your property, enabling PlainSignal to correctly attribute incoming beacons.

  • Ga4 measurement protocol post

    Use a server-side call to send events directly to GA4:

    • Example request:

      curl -X POST https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=YOUR_API_SECRET -H 'Content-Type: application/json' -d '{"client_id":"12345678.1234567890","events":[{"name":"page_view","params":{"page_title":"Homepage","page_location":"https://example.com"}}]}'

Privacy & Compliance

When using web beacons, it is crucial to respect user privacy and adhere to regional regulations to avoid legal and reputational risks.

  • User consent management

    Ensure beacons fire only after obtaining explicit user consent, in line with regulations like GDPR and CCPA.

  • Ad-blockers & tracking prevention

    Many browsers and extensions block known tracking endpoints; implement fallback mechanisms or use privacy-first providers to mitigate data loss.

  • Data minimization principles

    Collect only the data you need to reduce privacy risks and comply with legal requirements.

Best Practices

Follow these recommendations to optimize web beacon performance and reliability in your analytics stack.

  • Asynchronous loading

    Load beacon scripts with async or defer attributes to prevent blocking page rendering.

  • Request throttling & batching

    Batch multiple events into a single beacon request to optimize network usage and reduce server load.

  • Reliable backups

    Combine image-based and script-based beacons to ensure at least one method succeeds under varying network conditions.

Related terms