Analítica Web “Zero-Tracking”: construye tu propio sistema en JS puro y Rust sin cookies ni identificadores

(function () {
  var currentScript = document.currentScript;
  var endpoint = (currentScript && currentScript.dataset && currentScript.dataset.endpoint) || "/collect";
  var debug = !!(currentScript && currentScript.dataset && currentScript.dataset.debug === "true");
  var lastSentPath = null;

  function currentPath() {
    return location.pathname + location.search;
  }

  function payload() {
    return {
      path: currentPath(),
      referrer: document.referrer || null,
      screen_w: window.screen ? window.screen.width : null,
      screen_h: window.screen ? window.screen.height : null,
      lang: navigator.language || null,
      tz_offset: new Date().getTimezoneOffset(),
      title: document.title || null,
      ts_client: new Date().toISOString()
    };
  }

  function notify(result) {
    try {
      window.dispatchEvent(new CustomEvent("zt:pageview-sent", { detail: result }));
    } catch (_) {}
  }

  function sendPageView() {
    var path = currentPath();
    if (path === lastSentPath) return;
    lastSentPath = path;

    var body = JSON.stringify(payload());

    if (debug && window.console) {
      console.log("[zero-tracking] sending pageview", path, endpoint);
    }

    if (navigator.sendBeacon) {
      var blob = new Blob([body], { type: "application/json" });
      var queued = navigator.sendBeacon(endpoint, blob);
      notify({ path: path, endpoint: endpoint, transport: "beacon", queued: queued });
      return;
    }

    fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: body,
      keepalive: true,
      credentials: "omit"
    })
      .then(function (response) {
        notify({
          path: path,
          endpoint: endpoint,
          transport: "fetch",
          ok: response.ok,
          status: response.status
        });
      })
      .catch(function (error) {
        if (debug && window.console) {
          console.error("[zero-tracking] pageview failed", error);
        }
        notify({
          path: path,
          endpoint: endpoint,
          transport: "fetch",
          ok: false,
          error: String(error)
        });
      });
  }

  function wrapHistoryMethod(methodName) {
    var original = history[methodName];
    if (typeof original !== "function") return;

    history[methodName] = function () {
      var result = original.apply(this, arguments);
      setTimeout(sendPageView, 0);
      return result;
    };
  }

  wrapHistoryMethod("pushState");
  wrapHistoryMethod("replaceState");
  window.addEventListener("popstate", sendPageView);

  if (document.readyState === "complete") {
    sendPageView();
  } else {
    window.addEventListener("load", sendPageView, { once: true });
  }
})();

use std::{
    collections::HashMap,
    net::SocketAddr,
    sync::Arc,
    time::{Duration, Instant},
};

use axum::{
    extract::{ConnectInfo, Query, State},
    http::{header, HeaderMap, Method, StatusCode},
    response::{Html, IntoResponse, Response},
    routing::{get, post},
    Json, Router,
};
use chrono::Utc;
use rusqlite::{params, Connection, OptionalExtension};
use serde::{Deserialize, Serialize};
use tokio::sync::Mutex;
use tower_http::{
    cors::{Any, CorsLayer},
    trace::TraceLayer,
};

#[derive(Clone)]
pub struct AppState {
    pub db: Arc<Mutex<Connection>>,
    pub limiter: Arc<SimpleRateLimiter>,
}

pub struct SimpleRateLimiter {
    entries: Mutex<HashMap<String, Vec<Instant>>>,
    max_requests: usize,
    window: Duration,
}

impl SimpleRateLimiter {
    pub fn new(max_requests: usize, window: Duration) -> Self {
        Self {
            entries: Mutex::new(HashMap::new()),
            max_requests,
            window,
        }
    }

    pub async fn allow(&self, key: &str) -> bool {
        let now = Instant::now();
        let mut entries = self.entries.lock().await;
        let slot = entries.entry(key.to_string()).or_default();
        slot.retain(|t| now.duration_since(*t) <= self.window);

        if slot.len() >= self.max_requests {
            return false;
        }

        slot.push(now);
        true
    }
}

#[derive(Debug, Deserialize, Serialize, Clone)]
pub struct CollectPayload {
    pub path: String,
    pub referrer: Option<String>,
    pub screen_w: Option<u32>,
    pub screen_h: Option<u32>,
    pub lang: Option<String>,
    pub tz_offset: Option<i32>,
    pub title: Option<String>,
    pub ts_client: Option<String>,
}

#[derive(Debug, Serialize)]
pub struct CollectResponse {
    pub ok: bool,
}

#[derive(Debug, Serialize)]
pub struct HealthResponse {
    pub ok: bool,
    pub now: String,
}

#[derive(Debug, Deserialize)]
pub struct DashboardParams {
    pub days: Option<u32>,
}

#[derive(Debug)]
pub struct DashboardData {
    pub total_events: i64,
    pub top_pages: Vec<(String, i64)>,
    pub top_referrers: Vec<(String, i64)>,
    pub daily_views: Vec<(String, i64)>,
    pub top_languages: Vec<(String, i64)>,
}

pub fn create_app(state: AppState) -> Router {
    Router::new()
        .route("/health", get(health))
        .route("/collect", post(collect))
        .route("/dashboard", get(dashboard))
        .route("/tracker.js", get(tracker_js))
        .route("/demo", get(demo_page))
        .route("/demo-spa", get(demo_spa_page))
        .layer(TraceLayer::new_for_http())
        .layer(
            CorsLayer::new()
                .allow_methods([Method::GET, Method::POST])
                .allow_headers(Any)
                .allow_origin(Any),
        )
        .with_state(state)
}

pub async fn build_state(db_path: &str) -> Result<AppState, String> {
    let conn = Connection::open(db_path).map_err(|e| format!("opening db: {e}"))?;
    init_db(&conn).map_err(|e| format!("initializing db: {e}"))?;

    Ok(AppState {
        db: Arc::new(Mutex::new(conn)),
        limiter: Arc::new(SimpleRateLimiter::new(120, Duration::from_secs(60))),
    })
}

pub fn init_db(conn: &Connection) -> rusqlite::Result<()> {
    conn.execute_batch(
        r#"
        CREATE TABLE IF NOT EXISTS events (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            event_type TEXT NOT NULL,
            path TEXT NOT NULL,
            referrer TEXT,
            screen_w INTEGER,
            screen_h INTEGER,
            lang TEXT,
            tz_offset INTEGER,
            title TEXT,
            ts_client TEXT,
            received_at TEXT NOT NULL,
            ip_truncated TEXT,
            ua_family TEXT,
            ua_raw TEXT
        );

        CREATE INDEX IF NOT EXISTS idx_events_received_at ON events(received_at);
        CREATE INDEX IF NOT EXISTS idx_events_path ON events(path);
        CREATE INDEX IF NOT EXISTS idx_events_referrer ON events(referrer);
        "#,
    )
}

async fn health() -> impl IntoResponse {
    Json(HealthResponse {
        ok: true,
        now: Utc::now().to_rfc3339(),
    })
}

async fn tracker_js() -> impl IntoResponse {
    let js = include_str!("static/tracker.js");
    (
        [(header::CONTENT_TYPE, "application/javascript; charset=utf-8")],
        js,
    )
}

async fn demo_page() -> impl IntoResponse {
    Html(include_str!("static/demo.html"))
}

async fn demo_spa_page() -> impl IntoResponse {
    Html(include_str!("static/demo_spa.html"))
}

async fn collect(
    State(state): State<AppState>,
    headers: HeaderMap,
    ConnectInfo(addr): ConnectInfo<SocketAddr>,
    Json(payload): Json<CollectPayload>,
) -> Response {
    if payload.path.trim().is_empty() {
        return error_response(StatusCode::BAD_REQUEST, "path is required");
    }

    if payload.path.len() > 2048 {
        return error_response(StatusCode::BAD_REQUEST, "path is too long");
    }

    let ip_key = truncate_ip(addr.ip().to_string().as_str());
    if !state.limiter.allow(&ip_key).await {
        return error_response(StatusCode::TOO_MANY_REQUESTS, "rate limit exceeded");
    }

    let user_agent_raw = headers
        .get(header::USER_AGENT)
        .and_then(|v| v.to_str().ok())
        .unwrap_or("")
        .to_string();

    let normalized = normalize_payload(payload);
    let ua_family = classify_user_agent(&user_agent_raw);

    let conn = state.db.lock().await;
    let result = conn.execute(
        r#"
        INSERT INTO events (
            event_type, path, referrer, screen_w, screen_h, lang, tz_offset,
            title, ts_client, received_at, ip_truncated, ua_family, ua_raw
        ) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, ?11, ?12, ?13)
        "#,
        params![
            "pageview",
            normalized.path,
            normalized.referrer,
            normalized.screen_w,
            normalized.screen_h,
            normalized.lang,
            normalized.tz_offset,
            normalized.title,
            normalized.ts_client,
            now_sqlite(),
            ip_key,
            ua_family,
            user_agent_raw,
        ],
    );

    match result {
        Ok(_) => Json(CollectResponse { ok: true }).into_response(),
        Err(e) => error_response(StatusCode::INTERNAL_SERVER_ERROR, &format!("db error: {e}")),
    }
}

async fn dashboard(
    State(state): State<AppState>,
    Query(params): Query<DashboardParams>,
) -> impl IntoResponse {
    let days = params.days.unwrap_or(7).clamp(1, 90);
    let conn = state.db.lock().await;

    match fetch_dashboard_data(&conn, days) {
        Ok(data) => Html(render_dashboard(&data, days)).into_response(),
        Err(e) => error_response(
            StatusCode::INTERNAL_SERVER_ERROR,
            &format!("dashboard error: {e}"),
        ),
    }
}

pub fn fetch_dashboard_data(conn: &Connection, days: u32) -> rusqlite::Result<DashboardData> {
    let total_events: i64 = conn.query_row(
        "SELECT COUNT(*) FROM events WHERE received_at >= datetime('now', ?1)",
        [format!("-{} days", days)],
        |row| row.get(0),
    )?;

    let top_pages = query_pairs(
        conn,
        "SELECT path, COUNT(*) AS total FROM events WHERE received_at >= datetime('now', ?1) GROUP BY path ORDER BY total DESC, path ASC LIMIT 10",
        &format!("-{} days", days),
    )?;

    let top_referrers = query_pairs(
        conn,
        "SELECT COALESCE(NULLIF(referrer, ''), '(direct)') AS label, COUNT(*) AS total FROM events WHERE received_at >= datetime('now', ?1) GROUP BY label ORDER BY total DESC, label ASC LIMIT 10",
        &format!("-{} days", days),
    )?;

    let daily_views = query_pairs(
        conn,
        "SELECT substr(received_at, 1, 10) AS day, COUNT(*) AS total FROM events WHERE received_at >= datetime('now', ?1) GROUP BY day ORDER BY day DESC LIMIT 14",
        &format!("-{} days", days),
    )?;

    let top_languages = query_pairs(
        conn,
        "SELECT COALESCE(NULLIF(lang, ''), '(unknown)') AS label, COUNT(*) AS total FROM events WHERE received_at >= datetime('now', ?1) GROUP BY label ORDER BY total DESC, label ASC LIMIT 10",
        &format!("-{} days", days),
    )?;

    Ok(DashboardData {
        total_events,
        top_pages,
        top_referrers,
        daily_views,
        top_languages,
    })
}

fn query_pairs(conn: &Connection, sql: &str, lookback: &str) -> rusqlite::Result<Vec<(String, i64)>> {
    let mut stmt = conn.prepare(sql)?;
    let rows = stmt.query_map([lookback], |row| Ok((row.get(0)?, row.get(1)?)))?;
    rows.collect()
}

pub fn render_dashboard(data: &DashboardData, days: u32) -> String {
    format!(
        r#"<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Zero-Tracking Dashboard</title>
  <style>
    body {{ font-family: system-ui, sans-serif; margin: 2rem; line-height: 1.4; }}
    h1, h2 {{ margin-bottom: .4rem; }}
    .grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }}
    .card {{ border: 1px solid #ddd; border-radius: 16px; padding: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.04); }}
    table {{ width: 100%; border-collapse: collapse; }}
    th, td {{ text-align: left; padding: .45rem 0; border-bottom: 1px solid #eee; font-size: .95rem; }}
    .muted {{ color: #666; }}
    code {{ background: #f6f6f6; padding: .15rem .35rem; border-radius: 8px; }}
    .links a {{ margin-right: .8rem; }}
  </style>
</head>
<body>
  <h1>Zero-Tracking Analytics</h1>
  <p class="muted">Últimos {days} días · No cookies · No IDs persistentes · Dashboard mínimo</p>
  <p class="links">
    <a href="/demo">Demo</a>
    <a href="/demo-spa">Demo SPA</a>
    <a href="/health">Health</a>
  </p>
  <div class="grid">
    <section class="card">
      <h2>Total de eventos</h2>
      <p style="font-size: 2rem; margin: 0;">{total_events}</p>
    </section>
    <section class="card">
      <h2>Integración</h2>
      <p>Inserta <code><script defer src="/tracker.js" data-endpoint="/collect"></script></code> en tu HTML.</p>
    </section>
  </div>
  <div class="grid" style="margin-top: 1rem;">
    <section class="card">
      <h2>Top páginas</h2>
      {top_pages}
    </section>
    <section class="card">
      <h2>Top referrers</h2>
      {top_referrers}
    </section>
    <section class="card">
      <h2>Visitas por día</h2>
      {daily_views}
    </section>
    <section class="card">
      <h2>Idiomas</h2>
      {top_languages}
    </section>
  </div>
</body>
</html>"#,
        days = days,
        total_events = data.total_events,
        top_pages = render_table(&data.top_pages, "Ruta", "Visitas"),
        top_referrers = render_table(&data.top_referrers, "Referrer", "Visitas"),
        daily_views = render_table(&data.daily_views, "Día", "Visitas"),
        top_languages = render_table(&data.top_languages, "Idioma", "Visitas"),
    )
}

fn render_table(rows: &[(String, i64)], col_a: &str, col_b: &str) -> String {
    let body = if rows.is_empty() {
        String::from("<tr><td colspan=\"2\" class=\"muted\">Sin datos todavía.</td></tr>")
    } else {
        rows.iter()
            .map(|(a, b)| format!("<tr><td>{}</td><td>{}</td></tr>", escape_html(a), b))
            .collect::<Vec<_>>()
            .join("")
    };

    format!(
        "<table><thead><tr><th>{}</th><th>{}</th></tr></thead><tbody>{}</tbody></table>",
        col_a, col_b, body
    )
}

fn error_response(status: StatusCode, message: &str) -> Response {
    (status, Json(serde_json::json!({ "ok": false, "error": message }))).into_response()
}

pub fn normalize_payload(mut payload: CollectPayload) -> CollectPayload {
    payload.path = sanitize_path(&payload.path);
    payload.referrer = payload.referrer.map(|v| sanitize_referrer(&v));
    payload.lang = payload.lang.map(|v| truncate_and_trim(&v, 32));
    payload.title = payload.title.map(|v| truncate_and_trim(&v, 120));
    payload
}

pub fn sanitize_path(input: &str) -> String {
    let trimmed = truncate_and_trim(input, 2048);
    if trimmed.is_empty() {
        "/".to_string()
    } else if trimmed.starts_with('/') {
        trimmed
    } else {
        format!("/{}", trimmed.trim_start_matches('/'))
    }
}

pub fn sanitize_referrer(input: &str) -> String {
    let trimmed = truncate_and_trim(input, 512);
    if trimmed.is_empty() {
        return String::new();
    }
    if trimmed.starts_with("http://") || trimmed.starts_with("https://") {
        trimmed
    } else {
        String::new()
    }
}

pub fn truncate_and_trim(input: &str, max_len: usize) -> String {
    input.trim().chars().take(max_len).collect()
}

pub fn truncate_ip(ip: &str) -> String {
    if ip.contains('.') {
        let mut parts: Vec<&str> = ip.split('.').collect();
        if parts.len() == 4 {
            parts[3] = "0";
            return parts.join(".");
        }
    }

    if ip.contains(':') {
        let parts: Vec<&str> = ip.split(':').take(4).collect();
        return format!("{}::", parts.join(":"));
    }

    "unknown".to_string()
}

pub fn classify_user_agent(ua: &str) -> String {
    let ua = ua.to_ascii_lowercase();
    if ua.contains("firefox") {
        "Firefox".to_string()
    } else if ua.contains("edg/") {
        "Edge".to_string()
    } else if ua.contains("chrome") {
        "Chrome".to_string()
    } else if ua.contains("safari") {
        "Safari".to_string()
    } else if ua.contains("curl") {
        "curl".to_string()
    } else {
        "Other".to_string()
    }
}

pub fn escape_html(input: &str) -> String {
    input
        .replace('&', "&")
        .replace('<', "<")
        .replace('>', ">")
        .replace('"', """)
        .replace('\'', "'")
}

pub async fn run_server(state: AppState, addr: SocketAddr) -> Result<(), String> {
    let app = create_app(state).into_make_service_with_connect_info::<SocketAddr>();
    let listener = tokio::net::TcpListener::bind(addr)
        .await
        .map_err(|e| format!("bind error: {e}"))?;

    axum::serve(listener, app)
        .await
        .map_err(|e| format!("server error: {e}"))
}

pub fn seed_demo_data(conn: &Connection) -> rusqlite::Result<()> {
    let rows = vec![
        ("/", Some("https://google.com/"), Some("es-CO"), "Chrome"),
        ("/", Some("https://google.com/"), Some("es-CO"), "Chrome"),
        ("/guias/zero-tracking", Some("https://t.co/abc"), Some("es-CO"), "Firefox"),
        ("/guia-rust", None, Some("en-US"), "Firefox"),
        ("/guias/zero-tracking", None, Some("es-CO"), "Chrome"),
    ];

    for (path, referrer, lang, ua_family) in rows {
        conn.execute(
            r#"INSERT INTO events (
                event_type, path, referrer, screen_w, screen_h, lang, tz_offset,
                title, ts_client, received_at, ip_truncated, ua_family, ua_raw
            ) VALUES (?1, ?2, ?3, 1920, 1080, ?4, -300, 'Demo', ?5, ?6, '127.0.0.0', ?7, ?8)"#,
            params![
                "pageview",
                path,
                referrer,
                lang,
                Utc::now().to_rfc3339(),
                now_sqlite(),
                ua_family,
                ua_family,
            ],
        )?;
    }

    Ok(())
}

pub fn now_sqlite() -> String {
    Utc::now().format("%Y-%m-%d %H:%M:%S").to_string()
}

pub fn latest_event_path(conn: &Connection) -> rusqlite::Result<Option<String>> {
    conn.query_row(
        "SELECT path FROM events ORDER BY id DESC LIMIT 1",
        [],
        |row| row.get(0),
    )
    .optional()
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn path_is_normalized() {
        assert_eq!(sanitize_path("about"), "/about");
        assert_eq!(sanitize_path(" /pricing "), "/pricing");
        assert_eq!(sanitize_path(""), "/");
    }

    #[test]
    fn referrer_requires_http_or_https() {
        assert_eq!(
            sanitize_referrer("https://example.com/a"),
            "https://example.com/a"
        );
        assert_eq!(sanitize_referrer("javascript:alert(1)"), "");
    }

    #[test]
    fn ip_is_truncated() {
        assert_eq!(truncate_ip("192.168.1.55"), "192.168.1.0");
    }

    #[test]
    fn user_agent_classification_works() {
        assert_eq!(classify_user_agent("Mozilla Firefox"), "Firefox");
        assert_eq!(classify_user_agent("curl/8.0"), "curl");
    }
}

use std::{env, net::SocketAddr};

use zero_tracking_analytics::{build_state, run_server, seed_demo_data};

#[tokio::main]
async fn main() {
    if let Err(err) = real_main().await {
        eprintln!("error: {err}");
        std::process::exit(1);
    }
}

async fn real_main() -> Result<(), String> {
    let db_path = env::var("APP_DB_PATH").unwrap_or_else(|_| "analytics.db".to_string());
    let host = env::var("APP_HOST").unwrap_or_else(|_| "127.0.0.1".to_string());
    let port: u16 = env::var("APP_PORT")
        .ok()
        .and_then(|v| v.parse().ok())
        .unwrap_or(3001);

    let seed_demo = env::var("SEED_DEMO_DATA")
        .map(|v| v == "1" || v.eq_ignore_ascii_case("true"))
        .unwrap_or(false);

    let addr: SocketAddr = format!("{host}:{port}")
        .parse()
        .map_err(|e| format!("invalid APP_HOST/APP_PORT: {e}"))?;

    let state = build_state(&db_path).await?;

    if seed_demo {
        let conn = state.db.lock().await;
        seed_demo_data(&conn).map_err(|e| format!("seeding demo data: {e}"))?;
    }

    println!("Zero-Tracking analytics listening on http://{addr}");
    println!("Health: http://{addr}/health");
    println!("Dashboard: http://{addr}/dashboard");
    println!("Tracker JS: http://{addr}/tracker.js");
    println!("Demo page: http://{addr}/demo");
    println!("SPA demo: http://{addr}/demo-spa");

    run_server(state, addr)
        .await
        .map_err(|e| format!("server failed on {addr}: {e}"))
}

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Demo Zero-Tracking</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; line-height: 1.5; }
    .card { border: 1px solid #ddd; border-radius: 16px; padding: 1rem 1.2rem; max-width: 760px; }
    code { background: #f6f6f6; padding: .15rem .35rem; border-radius: 8px; }
    .log { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #fafafa; border: 1px solid #eee; }
    a { margin-right: .75rem; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Demo Zero-Tracking</h1>
    <p>Esta página sí envía un <code>pageview</code> al backend cuando la cargas.</p>
    <p>
      Luego puedes revisar:
      <a href="/dashboard">dashboard</a>
      <a href="/demo-spa">demo SPA</a>
      <a href="/health">health</a>
    </p>
    <div class="log" id="status">Esperando señal del tracker…</div>
  </div>

  <script>
    window.addEventListener("zt:pageview-sent", function (event) {
      var detail = event.detail || {};
      document.getElementById("status").textContent =
        "Evento enviado. Ruta=" + (detail.path || "?") +
        " · transporte=" + (detail.transport || "?") +
        (detail.status ? " · status=" + detail.status : "");
    });
  </script>

  <script defer src="/tracker.js" data-endpoint="/collect" data-debug="true"></script>
</body>
</html>

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SPA Demo</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; line-height: 1.5; }
    .card { border: 1px solid #ddd; border-radius: 16px; padding: 1rem 1.2rem; max-width: 760px; }
    button { margin-right: .75rem; margin-top: .5rem; padding: .65rem .9rem; }
    .log { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #fafafa; border: 1px solid #eee; }
    a { margin-right: .75rem; }
  </style>
</head>
<body>
  <div class="card">
    <h1>SPA Demo</h1>
    <p>Pulsa los botones para cambiar la ruta sin recargar. Cada cambio debe crear un nuevo pageview.</p>
    <p>
      <a href="/dashboard">dashboard</a>
      <a href="/demo">demo simple</a>
    </p>

    <button id="home">Home</button>
    <button id="pricing">Pricing</button>
    <button id="post">Post</button>

    <div class="log" id="status">Ruta actual: <span id="route"></span></div>
  </div>

  <script>
    function showRoute() {
      document.getElementById("route").textContent = location.pathname + location.search;
    }

    document.getElementById("home").onclick = function () {
      history.pushState({}, "", "/demo-spa");
      showRoute();
    };

    document.getElementById("pricing").onclick = function () {
      history.pushState({}, "", "/pricing?from=spa");
      showRoute();
    };

    document.getElementById("post").onclick = function () {
      history.pushState({}, "", "/blog/zero-tracking?step=2");
      showRoute();
    };

    window.addEventListener("zt:pageview-sent", function (event) {
      var detail = event.detail || {};
      document.getElementById("status").textContent =
        "Ruta actual: " + (location.pathname + location.search) +
        " · último envío=" + (detail.path || "?") +
        " · transporte=" + (detail.transport || "?");
    });

    showRoute();
  </script>

  <script defer src="/tracker.js" data-endpoint="/collect" data-debug="true"></script>
</body>
</html>