Install Pipetrace

Connect a website, a backend, or both. Each works independently.

Choose what to connect

  • Website: visitors, pages, traffic sources and browser activity. One script.
  • Backend: requests, logs and performance. Install the Node SDK or use an existing OpenTelemetry exporter. No website required.
  • Both: connect the website to a backend project, then link browser requests to their traces.

Connect your website

  1. Add your website in the dashboard.
  2. Open its installation guide and copy the browser snippet. It already contains your public tracking ID and this server’s collector address.
  3. Paste it once inside your shared <head>, then publish.

website example

<script defer data-site="YOUR_TRACKING_ID" src="https://api.pipetrace.andginja.com/t.js"></script>

This example needs your actual pt_… tracking ID. Use the tracking ID, not the site’s UUID from the dashboard URL. Backend keys are secret and never belong in HTML.

Where to put the script

WebsiteLocation
HTML, React or Vue with Viteindex.html, inside the head.
Next.jsUse next/script in your root layout with strategy="afterInteractive". The installation guide generates its attributes.
TanStack StartYour root document’s head. Keep the tag in the shared document so navigation does not add duplicate scripts.
AstroYour shared layout’s head, with is:inline to preserve the tag.
SvelteKitsrc/app.html, before the closing head tag.
Nuxtapp.head.script in nuxt.config.ts. The guide supplies the configuration.
WordPress or a website builderThe site-wide header code setting. Publish after saving.

Check a real visit

Open your website, allow tracking if your site asks for consent, and navigate to another page. Return to the installation guide and select Refresh browser check. It checks pageviews in the last 24 hours. Existing traffic confirms collection, but does not prove your latest edit was deployed.

If no visit appears

  • Confirm t.js loads successfully in browser developer tools and the deployed tag has your tracking ID.
  • Check that your domain matches the registered website and that consent or a content blocker is not preventing collection.
  • If you use a Content Security Policy, allow this collector in script-src and connect-src.
  • For localhost or local IP addresses, copy the local snippet from setup: it includes data-local and data-api.

Add a backend later

Open Backend → Connection setup for the website. Your tracking ID stays the same. You can keep website analytics running while setting up the backend separately. Read the backend installation guide for Node startup, logging, database calls and verification.