How to Track Website Traffic and Performance with Anosys

Page views and traffic sources answer the first set of questions about a website. The next set is harder: did Tuesday's deploy make checkout slower, which pages are slow on mobile, and do people who hit a slow page still sign up? Those questions need browser data and server data in the same place, joined on the same IDs.

This tutorial sets that up in about fifteen minutes: the tracker in your shared footer, named clicks for the actions you care about, backend events joined to the same visitors, and an alert on slow pages.

Step 1. Create a website endpoint

In the console, open Collecting → Endpoints and create an endpoint of type Website / Advertising Tracker. It starts in Pending Setup until the first event arrives.

Step 2. Add the tracker once, in your shared footer

Open Collecting → Integration Options, select the endpoint, open the Impression tab, and copy the snippet for Raw HTML, Next.js or React. The HTML version looks like this:

<script
  async
  src="https://console.anosys.ai/scripts/imp-latest.min.js"
  data-anosys-key="YOUR_WORKSPACE/a/YOUR_ENDPOINT"
></script>

Paste it once into the template every page already shares (a footer include, base layout or root component), just before </body>. Single-page apps are covered too: route changes are counted as page views.

Avoid adding it page by page. Pages get missed or counted twice, and every later change has to be made in many places.

data-anosys-key identifies the endpoint and is not a secret, so it is safe in public HTML.

What you get without further setup: page views, visitors and sessions; channel, referrer and UTM tags; engaged time and scroll depth; link, button and download clicks; and Core Web Vitals (LCP, CLS, INP) with page load timing. Form fields and input values are never captured.

Step 3. Name the clicks that matter

Click tracking records which links and buttons are used, but the visible text changes and so do the CSS classes. Give the important ones a stable name, and group them by section:

<section data-anosys-section="pricing">
  <a href="/signup" data-anosys-id="pricing-start-free">Start free</a>
</section>

Put these attributes in shared components (header, navigation, pricing cards, footer) so every page that uses them is covered, and reports stay readable after a redesign.

Step 4. Handle consent

The tracker reads the state of common consent managers and honors Do Not Track and Global Privacy Control. When a visitor declines, the visit is counted without a lasting identifier. If you use a consent tool it doesn't recognize, tell it the choice directly:

window.anosys.setConsent("granted"); // or "denied"

Step 5. Send backend events with the same IDs

The browser can't see server time, cache misses or API errors. Send those from your backend to a Generic / Custom HTTP endpoint. Custom fields are numbered by type: cvs1… for text, cvn1… for numbers and cvb1… for true/false. You name them later in Collecting → Field Mapping.

A Flask example that reports each request's path, duration and status:

import time
import requests
from flask import Flask, g, request

app = Flask(__name__)
ANOSYS_URL = "https://api.anosys.ai/ingestion/YOUR_WORKSPACE/YOUR_TYPE/YOUR_ENDPOINT"

@app.before_request
def start_timer():
    g.start = time.perf_counter()

@app.after_request
def report(response):
    try:
        requests.post(ANOSYS_URL, json=[{
            "cvs1": request.path,                    # route
            "cvn1": round((time.perf_counter() - g.start) * 1000, 1),  # ms
            "cvn2": response.status_code,            # HTTP status
            "cvs2": request.cookies.get("uid", ""),  # opaque user ID
        }], timeout=2)
    except requests.RequestException:
        pass  # never let analytics break a request
    return response

In production, send these from a background queue or batch them, so the analytics call is never on the request path.

To join browser and server data per user, pass the same opaque ID to the tracker with data-cid and send it as a backend field you map to user_id. Use an internal ID, never an email address.

Step 6. Build the views

Open Dashboards → Templates and deploy the website template, or add widgets one at a time from Visualizations:

Views worth building early:

• Slowest pages by device type, using LCP and INP from the tracker.
• Server time by route next to page load time for the same route, so you can tell whether a slow page is slow in the browser or on the server.
• A sign-up funnel using your named clicks, for example pricing-start-free to account created.
• Before and after a release: filter both charts by date and compare.

Step 7. Alert on what you would act on

In Data Processing → Alert Builder, create a rule on the backend endpoint, for example: average server time on /checkout above 800 ms in the last 10 minutes, sent to Slack. Start by sending it only to yourself, tune the threshold for a few days, then add the team.

Troubleshooting

• Still Pending Setup: open your site with the browser's network panel filtered for anosys. If the script doesn't load, the snippet isn't in the template that page uses. Ad blockers can block it; test in a private window.
• A single-page app shows one page view: make sure the tracker is in the root layout, not inside a route component.

Next steps

• Every attribute and the runtime API: tracker reference
• Follow signed-in users inside your app: product analytics
• Other ways to send events: send any data

Free plan, no credit card

Start tracking your website for free

Add one script tag and see traffic, sources, engagement and page performance in a few minutes, next to the rest of your product data.

Start tracking for free Read the tracker setup guide →