DataLook

Install DataLook on Remix / React Router — the plain script tag, or the first-party proxy that beats ad blockers. Both on one page.

Add the tag to the document head in app/root.tsx.

Add the script to your root document

Place it just before </body> in the Layout export of app/root.tsx.

app/root.tsx

<script defer src="https://cdn.datalook.app/s.js" data-site="YOUR_SITE_ID"></script>

The proxy install serves both s.js and the collector from your own domain, so ad blockers — which match on domain, not path — can't see us. You rewrite one innocuous path prefix to our CDN; the script figures out the rest.

A splat resource route forwards both GET (s.js) and POST (collect).

Create a resource route

app/routes/_axis.$.ts

import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'const TARGET = 'https://cdn.datalook.app'async function proxy(request: Request, splat: string) {  const headers = new Headers()  const ct = request.headers.get('content-type')  if (ct) headers.set('content-type', ct)  const ip = request.headers.get('x-forwarded-for')  if (ip) headers.set('x-forwarded-for', ip)  const res = await fetch(`${TARGET}/${splat}`, {    method: request.method,    headers,    body: request.method === 'GET' ? undefined : await request.arrayBuffer(),  })  return new Response(res.body, { status: res.status, headers: res.headers })}export const loader = ({ request, params }: LoaderFunctionArgs) => proxy(request, params['*'] ?? '')export const action = ({ request, params }: ActionFunctionArgs) => proxy(request, params['*'] ?? '')

Point the script at the prefix

<script defer src="/_axis/s.js" data-site="YOUR_SITE_ID"></script>

Heads up

Your server now sits between the visitor and us, so forward the visitor IP (X-Forwarded-For) or your country breakdown will collapse to your server location. The DNS proxy avoids this entirely — see the proxy overview.