Documentation

Analytics

Vantrex Analytics shows what happens in your own app: who signs in, who signs up, which buttons get clicked and who is online right now. It is a separate service from deploying, so it works for any Next.js or React app, wherever it is hosted.

What you get

  • Logins and sign-ups, successful and failed, with the country, browser, device, how long each took and why the failed ones failed.
  • Clicks on the buttons you mark.
  • Active users: who is on your site now, on a map, with their name or email if you choose to collect it.

It works with apps that have a server part, such as Next.js, Remix or an Express backend with a React front end. Plain HTML sites are not supported in this first version, because sign-ins have to be reported from a server.

Set up a project

  1. Create the project

    In the dashboard choose New project, then Analytics. Give it a name and the address of your website, and choose which details of signed-in people to collect. You can link a deploy project here or skip it.

  2. Copy the keys

    You get a publishable key and a secret key. The secret key is shown once; copy it into your server's environment.

  3. Install the package

    Run npm install @vantrex/analytics in your app.

  4. Report from the browser and the server

    Add the component to your layout and call trackLogin on your server after a sign-in. The SDK guide has the code.
.env
NEXT_PUBLIC_VANTREX_ANALYTICS_KEY=vtxa_pk_…
VANTREX_ANALYTICS_SECRET=vtxa_sk_…

The two keys

KeyStarts withUse itWhat it can do
Publishablevtxa_pk_In the browserReport that someone is on a page, and clicks. Nothing else.
Secretvtxa_sk_On your server onlyReport logins, sign-ups and who a visitor is.

Logins and sign-ups are only accepted with the secret key, because a browser can be made to claim anything. If a secret key is ever exposed, rotate it in the project settings: a new key is created and the old one keeps working for 10 minutes so you can roll the new one out.

A publishable key only reports from your project's website address, and from localhost while you develop. Add other addresses, such as a staging site, in the project settings.

The dashboard pages

PageWhat it shows
HomeYour projects with a picture of the site and when it was last active, and four cards: logins, sign-ups, people online now, and the project with the most activity.
Logins and SignupsTotals, success rate, a chart over time, countries, browsers, operating systems, devices and the reasons attempts failed. Choose all projects or one, a period, and all, successful or failed.
Active usersA map of who is online, with a list of their name or email, page, device and when they were last seen.
Project settingsRename the project, change its address, choose what to collect about people, rotate the secret key, copy the project ID, link a deploy project, export your data or delete the project.

A person counts as online if their browser reported in during the last two minutes. People who close the tab abruptly can stay on the list for up to that long.

Linking a deploy project

You can link an analytics project to one of your deploy projects. A linked project can be filtered by deployment on the Logins and Signups pages, and its keys also appear in the deploy project's settings. Unlinked projects work the same, without the filter. The link can be added or removed at any time in the analytics project's settings.

What is stored

You choose which details of signed-in people are kept: user ID, name and email. Anything you leave off is dropped when it arrives, and without the user ID only a one-way code is kept so distinct users can still be counted. IP addresses are used to work out the country and are not stored. Raw events are kept for 90 days; the counts behind the charts are kept longer.

You can download everything stored for a project from its settings, as CSV or JSON lines, and deleting the project removes its events. Deleting your account removes all of your analytics projects.

Limits

Each account can have 20 analytics projects. Events are rate limited so one site cannot flood the service: a visitor's browser may report 60 heartbeats a minute, and a project 3 000 browser events and 6 000 server events a minute. Past a limit the service answers 429 with a Retry-After header. See the API reference.