Cloudflare Pages

Cloudflare Pages builds and hosts your static site. Add the snippet to your base layout before deploying — or use Cloudflare's HTML rewriting to inject it without changing your source files.

Add the snippet to your source layout

The cleanest approach is to paste the snippet in your site's base layout file before you push to Cloudflare Pages. Cloudflare Pages builds from your repository and deploys the output — the snippet in your source layout ends up in every generated page.

Find the layout file for your static site generator: for Hugo it is layouts/_default/baseof.html, for Jekyll it is _layouts/default.html, for Astro it is your Layout.astro, for plain HTML sites it is whatever shared template wraps your pages. Paste the snippet before the closing </body> tag and push the commit.

Cloudflare Pages will detect the push, trigger a build, and deploy within a couple of minutes. Load your site and check your StatelessID dashboard. If you see a page view, the install is complete.

Using Cloudflare Workers or Transform Rules to inject the snippet

If you cannot or do not want to modify your source code, Cloudflare offers HTML rewriting via Workers and the HTMLRewriter API, and header injection via Transform Rules. These are more advanced options that do not require touching your repository.

With a Cloudflare Worker, you can intercept every HTML response and use HTMLRewriter to append the snippet before </body>. This approach is powerful but requires writing and deploying a Worker, which is outside the scope of a basic tracking install. The Cloudflare documentation for HTMLRewriter covers the pattern in detail.

Transform Rules (available in Cloudflare's rules engine) let you inject JavaScript tags by modifying response headers. However, injecting script content via headers is complex and brittle compared to editing the source layout. The source layout approach is recommended for most sites.

Custom domains on Cloudflare Pages

Cloudflare Pages gives your site a pages.dev subdomain by default. If you add a custom domain in the Cloudflare Pages settings (Settings → Custom domains → Set up a custom domain), visitors will reach your site via the custom domain.

Register your custom domain in the StatelessID dashboard and use its key in your layout. If you currently use the pages.dev key and are switching to a custom domain, update the key in your source layout and register the new domain.

Since Cloudflare manages the DNS for custom domains, propagation is usually fast — often under a minute. Once the custom domain shows as Active in your Cloudflare Pages settings, your site is live and the beacon will fire under the custom domain origin.

Cloudflare's CSP and caching behavior

Cloudflare does not inject a Content Security Policy by default, so the snippet should work without any special header configuration. If you added a CSP header via a _headers file or a Transform Rule, ensure it includes script-src https://statelessid.com and connect-src https://statelessid.com.

Cloudflare's edge cache aggressively caches HTML responses. If you update the snippet in your layout and the dashboard does not reflect the change, purge the Cloudflare cache in your dashboard (Caching → Configuration → Purge Everything). Visitors may otherwise receive a cached copy of the HTML without the updated snippet.

Cloudflare's Auto Minify feature (Caching → Speed → Optimization) can occasionally strip inline attributes from script tags if misconfigured. If the data-k attribute is getting removed, disable Auto Minify for JavaScript or check the minification settings for your site.

Troubleshooting

My Cloudflare Pages build succeeded but the snippet is not in the output HTML. Open the deployed site, view source, and search for "asset.js." If it is missing, the snippet was not in the source layout file that the build process used. Check that you saved and pushed the correct file.

I see the snippet in source but the beacon is blocked. Open browser developer tools, check the Console for CSP errors. If you see a Content Security Policy violation for statelessid.com, add connect-src https://statelessid.com and script-src https://statelessid.com to your _headers file or Transform Rule.

My Cloudflare Pages preview deployments are sending beacons to my production dashboard. Each Cloudflare Pages preview gets a unique preview URL. If you want to suppress tracking on previews, add a conditional check in your layout that only includes the snippet when the hostname matches your production domain.