Load the JavaScript tag through your own domain

Load the JavaScript tag and send its data through a subdomain you own, like t.example.com, instead of Better Stack's hosts. Use it when your pages may only talk to your own domain, and to keep the tag working for visitors with ad blockers.

Add your subdomain

1. Go to Error tracking → Applications
2. Next to your application, click ⋯ → Configure.
3. Open the Frontend tab.
4. At the bottom of the page, click Advanced settings.
5. Under Your own domain, enter a subdomain of a domain you own, like t.example.com. Avoid words ad blockers look for, such as analytics, tracking or telemetry.
6. Click Save changes.

Add the CNAME record

At your DNS provider, add a CNAME record for your subdomain:

In Cloudflare, set the record to DNS only, so Cloudflare doesn't proxy it.

Better Stack checks the record, usually in under a minute. Once it's right, the Subdomain field shows a green check with the tooltip CNAME configured correctly.

Update the snippet

1. Reload the Frontend page.
2. Copy the snippet at the top. It now loads the tag from your subdomain.
3. Replace the snippet on your pages with it.

The tag now sends errors, session replays, web events and console logs through your subdomain.

Use your own reverse proxy

Already run a reverse proxy on your domain, like a Cloudflare Worker or nginx? Point the tag at it instead of adding the CNAME record, and leave Subdomain in Better Stack empty. Your proxy needs to:

• Forward /b.js to https://betterstack.net/b.js, keeping the query string.
• Forward every other path, with its query string, to the host named in its first segment. For example, https://t.example.com/s123.eu-nbg-2.betterstackdata.com/web/123 goes to https://s123.eu-nbg-2.betterstackdata.com/web/123. Only forward to betterstack.net and *.betterstackdata.com.
• Put the visitor's IP address first in X-Forwarded-For. Otherwise, Better Stack shows your proxy's address and location instead of the visitor's.

Then load the tag from your proxy, and set proxyHost before init:

<script>
  !function(b,e,t,r){
    b[t]=b[t]||function(...args){(b[t].q=b[t].q||[]).push(args)};
    b[t].l=+new Date;
    var s=e.createElement('script'); s.async=1; s.crossOrigin='anonymous';
    s.src='https://t.example.com/b.js?t='+r;
    (e.head||e.getElementsByTagName('head')[0]).appendChild(s);
  }(window,document,'betterstack','$APPLICATION_TOKEN');
  betterstack('config', { proxyHost: 'https://t.example.com' });
  betterstack('init', { environment: 'production' });
</script>

Bundle the tag with your app

Some environments, like a Twitch extension, only run scripts bundled with your app.

1. Download the tag:

   Download the JavaScript tag

   Copied!

   curl -o betterstack.js "https://betterstack.net/b.js?t=$APPLICATION_TOKEN"
   

   
   

2. Load betterstack.js in your build in place of the snippet.

3. After it runs, start the tag through your subdomain or reverse proxy:

   Start the bundled tag

   Copied!

   betterstack('config', { proxyHost: 'https://t.example.com' });
   betterstack('init', { environment: 'production' });
   

The copy keeps the settings it was downloaded with, so download it again after you change them in Better Stack.

Next steps

• Installation: snippet, init options, identifying users, tracking custom events.
• Configuration: UI settings, collection toggles, sampling, session replays, sessions, batching, and more.