Queantic vs Plausible

Queantic: 96 Bytes of Tracking

Queantic uses a remarkably simple technique to track pageviews and user visits — just a single image tag with an onerror attribute. Here is the entire snippet you add to your site:

<img onerror=src='//qntc.it/t/586c45fa?'+location src>
    

Here’s what happens when a browser encounters this tag:

1. The browser tries to load the image, but the src attribute is left empty on purpose, causing it to fail instantly. This failure isn't a mistake — it's a trick to activate the next line of logic while keeping the code extremely short.
2. The onerror handler runs as a result. It dynamically sets a new src that points to our tracking endpoint, appending location — which is JavaScript shorthand for the current page’s full URL. This captures where the hit came from without any extra setup.
3. The updated src triggers a second image load — this time successfully — and silently sends your visit data to the tracking server. The closing src at the end finalizes the tag structure and ensures it's valid HTML. No scripts, no bloat — just 96 bytes of precision.

This approach results in an extremely lightweight tracking footprint — under 100 bytes — without any additional JavaScript or complex logic.

Plausible: What’s Really in script.js

On the surface, Plausible appears simple. You add a single script tag to your HTML, like so:

<script defer data-domain="yoursite.com" 
src="https://plausible.io/js/script.js"></script>
    

But beneath this innocuous line lies a full-fledged analytics engine consisting of over 200 lines of JavaScript, executing every time a visitor loads your page. Here’s a unminified snapshot of what Plausible’s script does:

(function () {
    const locationInfo = window.location;
    const documentInfo = window.document;
    const currentScript = documentInfo.currentScript;
    const config = {};

    let isPaused = false;
    let currentURL = locationInfo.href;
    let customProps = {};
    let lastScrollDepth = -1;
    let visibleStart = 0;
    let accumulatedVisibleTime = 0;

    function sendEvent(endpoint, data, options) {
        if (window.fetch) {
            fetch(endpoint, {
                method: "POST",
                headers: { "Content-Type": "text/plain" },
                keepalive: true,
                body: JSON.stringify(data)
            })
            .then(response => {
                if (options?.callback) {
                    options.callback({ status: response.status });
                }
            })
            .catch(error => {
                if (options?.callback) {
                    options.callback({ error });
                }
            });
        }
    }

    function sendEngagement() {
        const engagementTime = getEngagementTime();
        if (!isPaused && (lastScrollDepth < maxScrollDepth() || engagementTime >= 3000)) {
            lastScrollDepth = maxScrollDepth();
            const payload = {
                n: "engagement",
                sd: Math.round((lastScrollDepth / scrollHeight()) * 100),
                d: config.domain,
                u: currentURL,
                p: customProps,
                e: engagementTime,
                v: 20
            };
            visibleStart = 0;
            accumulatedVisibleTime = 0;
            sendEvent(config.endpoint, payload);
        }
    }

    function handleVisibilityChange() {
        if (document.visibilityState === "visible" && document.hasFocus() && visibleStart === 0) {
            visibleStart = Date.now();
        } else if ((document.visibilityState === "hidden" || !document.hasFocus()) && visibleStart) {
            accumulatedVisibleTime += Date.now() - visibleStart;
            visibleStart = 0;
            sendEngagement();
        }
    }

    function getEngagementTime() {
        return visibleStart ? accumulatedVisibleTime + (Date.now() - visibleStart) : accumulatedVisibleTime;
    }

    function scrollHeight() {
        const body = document.body || {};
        const html = document.documentElement || {};
        return Math.max(
            body.scrollHeight || 0,
            body.offsetHeight || 0,
            body.clientHeight || 0,
            html.scrollHeight || 0,
            html.offsetHeight || 0,
            html.clientHeight || 0
        );
    }

    function maxScrollDepth() {
        const body = document.body || {};
        const html = document.documentElement || {};
        const viewportHeight = window.innerHeight || html.clientHeight || 0;
        const scrollTop = window.scrollY || html.scrollTop || body.scrollTop || 0;
        return scrollHeight() <= viewportHeight ? scrollHeight() : scrollTop + viewportHeight;
    }

    function trackEvent(eventName, options = {}) {
        const isPageview = eventName === "pageview";

        if (
            /^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(locationInfo.hostname) ||
            locationInfo.protocol === "file:" ||
            window._phantom || window.__nightmare || window.navigator.webdriver || window.Cypress ||
            window.__plausible
        ) {
            return skipEvent(eventName, options, "ignored environment");
        }

        try {
            if (localStorage.plausible_ignore === "true") {
                return skipEvent(eventName, options, "localStorage flag");
            }
        } catch (e) {}

        const payload = {
            n: eventName,
            v: 20,
            u: locationInfo.href,
            d: config.domain,
            r: documentInfo.referrer || null
        };

        if (options.meta) payload.m = JSON.stringify(options.meta);
        if (options.props) payload.p = options.props;
        if (options.interactive === false) payload.i = false;

        if (isPageview) {
            isPaused = false;
            currentURL = payload.u;
            customProps = payload.p || {};
            lastScrollDepth = -1;
            accumulatedVisibleTime = 0;
            visibleStart = Date.now();

            if (!engagementTrackingInitialized) {
                document.addEventListener("visibilitychange", handleVisibilityChange);
                window.addEventListener("blur", handleVisibilityChange);
                window.addEventListener("focus", handleVisibilityChange);
                engagementTrackingInitialized = true;
            }
        }

        sendEvent(config.endpoint, payload, options);
    }

    function skipEvent(eventName, options, reason) {
        if (reason && config.logging) {
            console.warn("Ignoring Event:", reason);
        }
        if (options.callback) {
            options.callback();
        }
        if (eventName === "pageview") {
            isPaused = true;
        }
    }

    let engagementTrackingInitialized = false;

    function initializePlausible() {
        config.endpoint = currentScript.getAttribute("data-api") || new URL(currentScript.src).origin + "/api/event";
        config.domain = currentScript.getAttribute("data-domain");
        config.logging = true;

        let height = scrollHeight();
        let depth = maxScrollDepth();

        window.addEventListener("load", () => {
            height = scrollHeight();
            let count = 0;
            const interval = setInterval(() => {
                height = scrollHeight();
                if (++count === 15) clearInterval(interval);
            }, 200);
        });

        document.addEventListener("scroll", () => {
            height = scrollHeight();
            const currentDepth = maxScrollDepth();
            if (currentDepth > depth) depth = currentDepth;
        });

        (function setupSPATracking(trackFunc) {
            let lastPathname;
            const triggerPageview = (force = false) => {
                if (!force && lastPathname === locationInfo.pathname) return;
                lastPathname = locationInfo.pathname;
                trackFunc("pageview");
            };

            const history = window.history;
            if (history.pushState) {
                const originalPushState = history.pushState;
                history.pushState = function () {
                    originalPushState.apply(this, arguments);
                    triggerPageview(true);
                };
                window.addEventListener("popstate", () => triggerPageview(true));
            }

            if (documentInfo.visibilityState === "hidden" || documentInfo.visibilityState === "prerender") {
                documentInfo.addEventListener("visibilitychange", () => {
                    if (!lastPathname && documentInfo.visibilityState === "visible") {
                        triggerPageview();
                    }
                });
            } else {
                triggerPageview();
            }

            window.addEventListener("pageshow", (event) => {
                if (event.persisted) triggerPageview();
            });
        })(trackEvent);

        const queued = (window.plausible && window.plausible.q) || [];
        for (let i = 0; i < queued.length; i++) {
            trackEvent.apply(this, queued[i]);
        }

        window.plausible = trackEvent;
        window.plausible.init = initializePlausible;
        window.plausible.l = true;
    }

    initializePlausible();
})();
    

As you scroll through this seemingly endless chunk of code, ask yourself: is all this really necessary? From event tracking and scroll depth detection to engagement timers, visibility listeners, and SPA routing logic — this script is doing a lot more than simply recording a pageview.

All of it runs on every page load, in every user’s browser, just to send basic analytics data. For a service that claims to be simple and privacy-friendly, that's a surprising amount of bloat.

Queantic offers the same insights—without the baggage. Take a look at our demo.