Setting up a Usermaven Proxy with Cloudflare Workers

You can use Cloudflare Workers to proxy your Usermaven Analytics requests. Cloudflare Workers offers free service for up to 100,000 requests per day. All you need to set it up is a free Cloudflare account.

Here's the step-by-step process for creating a proxy. It takes only a few minutes and requires no tech know-how or prior experience.

Prerequisites

Sign up for a free Cloudflare account if you don't have one already
Add your site to Cloudflare if you haven't done so
Have your Usermaven API key ready

Setup Steps

Create a Cloudflare Worker

Log into your Cloudflare dashboard
- Go to "Workers & Pages"
- Choose "Create Worker"

Deploy the Worker Code

Copy and paste the following code into the Worker editor:

// Configuration
const config = {
  routes: {
    script: "/lib.js",
    api: "/api/v1/event"
  },
  upstream: {
    script: "https://t.usermaven.com/lib.js",
    api: "https://events.usermaven.com"
  },
  cors: {
    origin: "*",
    methods: "GET, POST, OPTIONS",
    headers: ["Content-Type", "Origin", "Accept", "User-Agent", "Referer"]
  }
};
 
addEventListener("fetch", e => e.respondWith(
  handleRequest(e.request).catch(err => new Response(err.message, { status: 500 }))
));
 
async function handleRequest(request) {
  const { pathname } = new URL(request.url);
 
  // Quick response for root and OPTIONS
  if (pathname === "/" || pathname === "") {
    return new Response("OK", { status: 200 });
  }
  if (request.method === "OPTIONS") {
    return addCors(new Response(null));
  }
 
  // Route handling
  if (pathname.endsWith(config.routes.script)) {
    return fetch(config.upstream.script)
      .then(r => addCors(r, { cache: "public, max-age=3600" }));
  }
 
  if (pathname.endsWith(config.routes.api)) {
    return proxyEvent(request);
  }
 
  return new Response("Not Found", { status: 404 });
}
 
async function proxyEvent(request) {
  const url = new URL(request.url);
  const upstream = new URL(config.routes.api, config.upstream.api);
  const token = url.searchParams.get("token");
  if (token) upstream.searchParams.set("token", token);
 
  const response = await fetch(upstream, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Accept": "*/*",
      "Origin": request.headers.get("origin") || "",
      "User-Agent": request.headers.get("user-agent") || "",
      "Referer": request.headers.get("referer") || ""
  },
    body: request.body
  });
 
  return addCors(response);
}
 
function addCors(response, extra = {}) {
  const headers = new Headers(response.headers);
  headers.set("Access-Control-Allow-Origin", config.cors.origin);
  headers.set("Access-Control-Allow-Methods", config.cors.methods);
  headers.set("Access-Control-Allow-Headers", config.cors.headers.join(", "));
 
  Object.entries(extra).forEach(([k, v]) => headers.set(k, v));
 
  return new Response(response.body, {
    status: response.status,
    headers
  });
}

If your are using white-labeling, replace https://t.usermaven.com/lib.js and https://events.usermaven.com with your custom domain.

Update Your Tracking Script

After deploying the worker, you'll get a unique URL for your worker, it should look like https://your-worker.your-domain.workers.dev.

Replace your existing Usermaven script with:

<script type="text/javascript">
  (function() {
    window.usermaven = window.usermaven || (function() {
      (window.usermavenQ = window.usermavenQ || []).push(arguments);
    });
    var t = document.createElement("script"),
      s = document.getElementsByTagName("script")[0];
    t.defer = true;
    t.id = "um-tracker";
    t.setAttribute("data-tracking-host", "https://your-worker.your-domain.workers.dev");
    t.setAttribute("data-key", "YOUR_API_KEY");
    t.setAttribute("data-autocapture", "true");
    t.src = "https://your-worker.your-domain.workers.dev/lib.js";
    s.parentNode.insertBefore(t, s);
  })();
</script>

Optional: Custom Domain Setup

To use your own domain instead of workers.dev:

Go to your worker's Settings > Custom Domains
Add your domain (e.g., analytics.yourdomain.com)
Update your tracking script to use your custom domain

Benefits

Bypasses ad blockers
First-party cookie support
Better privacy for your users
Custom domain support
Free for up to 100,000 requests/day with Cloudflare Workers

Testing

Visit your worker URL - should see "OK"
Check your-worker-url/lib.js - should return the Usermaven script
Verify events are being tracked in your Usermaven dashboard

Troubleshooting

If script doesn't load, check browser console for errors
Verify your API key is correct
Ensure CORS headers are properly set if using custom domain
Check Cloudflare Worker logs for any errors

Cloudflare Limitations

Free tier limited to 100,000 requests/day
Some setup required for custom domains
Requires Cloudflare account

Google Tag Manager React.js