Published on 2025-06-22T06:19:12Z

What is Synchronous Tracking? Definition and Examples in Analytics

Synchronous tracking is an analytics technique where data is sent in a blocking manner, ensuring that tracking requests complete before the page continues loading or unloading. Historically, developers implemented this using synchronous XMLHttpRequest calls (async=false), which forced the browser to wait for the analytics server response. Modern browsers also offer the Beacon API, allowing reliable delivery of tracking data on page unload without blocking user interactions. While synchronous tracking improves data reliability—particularly for critical events like purchases or form submissions—it can increase page load times and degrade user experience if overused. It contrasts with asynchronous tracking, which prioritizes performance by sending data in parallel but may risk losing events if the user navigates away prematurely. The choice between synchronous and asynchronous methods depends on balancing data fidelity and performance requirements. Tools like Plainsignal and Google Analytics 4 provide configurations to implement synchronous-style tracking for key interactions.

Illustration of Synchronous tracking
Illustration of Synchronous tracking

Synchronous tracking

Synchronous tracking sends analytics data in a blocking manner to ensure event delivery before page load/unload, trading speed for reliability.

Definition of Synchronous Tracking

This section provides a high-level overview of synchronous tracking, including its definition and use in web analytics.

  • Core concept

    Synchronous tracking sends analytics calls in a blocking fashion, causing the browser to wait until the request completes before continuing with page load or unload.

  • Key characteristics

    It guarantees that critical user interactions—such as conversions or form submissions—are recorded even if the user navigates away immediately.

How Synchronous Tracking Works

Dive into the technical mechanisms—like blocking requests and browser APIs—that make synchronous tracking possible.

  • Synchronous xhr

    An XMLHttpRequest configured with async=false forces the browser to pause JavaScript execution and rendering until the analytics server responds, ensuring delivery at the cost of performance.

  • Beacon api

    The navigator.sendBeacon() method queues analytics data to be sent in the background during page unload, offering reliability without fully blocking user interactions.

  • Execution placement

    Placing tracking scripts in the <head> without async or defer attributes ensures they fire early, capturing initial pageview data accurately but potentially delaying rendering.

Comparison: Synchronous vs Asynchronous Tracking

Understand the trade-offs between blocking and non-blocking analytics implementations.

  • Performance trade-offs

    Synchronous requests can slow page loads by blocking rendering, while asynchronous approaches improve speed but may drop events if users leave too quickly.

  • Data reliability

    Synchronous tracking maximizes data fidelity for critical events, whereas asynchronous methods risk data loss under rapid navigation or heavy load.

  • Use case scenarios

    Use synchronous tracking for high-value interactions like checkouts; use asynchronous tracking for routine pageviews and non-critical metrics.

Implementation Examples

Practical code snippets demonstrating synchronous-style tracking with PlainSignal and a Beacon-enabled GA4 configuration.

  • Plainsignal example

    PlainSignal’s simple snippet can be placed in the <head> to ensure data is sent before other scripts run:

    <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>

    This script leverages execution order (via defer) to capture pageviews reliably without using cookies.

  • Ga4 beacon api

    Google Analytics 4’s default snippet is asynchronous, but you can force reliable delivery on page unload:

    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon' });
</script>

    This uses the Beacon API under the hood to send events without blocking the UI.

Best Practices and Considerations

Guidelines to balance reliability and performance when implementing synchronous tracking.

  • Prioritize critical events

    Only block for high-value interactions (e.g., transactions) to minimize overall performance impact.

  • Prefer beacon api

    Use navigator.sendBeacon() over synchronous XHR to reduce blocking while still ensuring data delivery on unload.

  • Optimize script size

    Keep tracking scripts lightweight and defer non-essential analytics code to speed up initial rendering.

  • Implement fallbacks

    Use asynchronous fallbacks for low-priority events in case blocking requests fail or timeout.

Related terms