fivebar

Netlify

Copy page
View Markdown
Open with
Connect MCP
Claude Mistral Vibe Cursor VS Code

An Edge Function serves the script from your domain, passes its counts on, and names the visitor from what Netlify knows of them.

Add an Edge Function, netlify/edge-functions/fivebar.js, which names the visitor from what Netlify knows of them:

export default async (request, context) => {
  const { pathname } = new URL(request.url);
  if (pathname === '/js/tally.js') return fetch('https://fiveb.ar/js/tally.js');
  const geo = context.geo || {};
  const headers = new Headers({
    'Content-Type': 'text/plain',
    'User-Agent': request.headers.get('User-Agent') || '',
    'X-Fivebar-IP': context.ip,
  });
  const origin = request.headers.get('Origin');
  if (origin) headers.set('Origin', origin);
  const place = {
    'X-Fivebar-Country': geo.country?.code,
    'X-Fivebar-City': geo.city,
  };
  for (const [name, value] of Object.entries(place)) {
    if (value) headers.set(name, encodeURIComponent(value));
  }
  return fetch('https://fiveb.ar/api/tally', { method: 'POST', headers, body: request.body });
};

export const config = { path: ['/js/tally.js', '/api/tally'] };

A 200 rule in _redirects would proxy the paths too, but Netlify doesn’t say that it passes on who the visitor is. See Netlify’s help on Edge Functions.

Load the script

Once the proxy is live, load the script from your own domain. It sends its counts to the host it was loaded from, so nothing else changes:

<script async data-domain="example.com" src="/js/tally.js"></script>

Then check it works. If either path is already taken on your site, see Other paths. Proxying says how it works and which headers name the visitor.