How to add nana800 analytics to a site or an app in 5 minutes

Step 1. An organization and a project

Open the analytics web app and sign in to your nana800 account or sign up. If you have no analytics yet, the app shows a form with two fields: your organization name and the project name. Fill them in and press Create.

An organization holds projects, dashboards and the team. A project is one site or app, and one project can take events from several sources, for example the website and the mobile app of one service. Add more projects with the New project button on the organization page.

Step 2. The project key and the project ID

Open the project settings with the Project settings button on the project card or with Connect tracking. The Connection tab has a Project key card with a key like ingest_... and the project ID.

The project key can only send events to this project, so it is safe to put into the code of a site. Never put the personal API key from the account settings into a site or an app. Any visitor would see it in the page code and get access to your account. If the project key leaks, press Change key and the old one stops working at once.

Step 3. Code for a plain website

If the site is built without npm, for example on Tilda, WordPress or as plain HTML, paste the code before the closing </body> tag. The Install code card has this code with your key and project ID filled in.

nana800 analytics counts people by user id and does not send events until the id is set. The library does not invent an id. For a visitor who is not signed in, create a random id and keep it in the browser, as in the example below. When the person signs in, call identify with their real id.

<script src="https://cdn.jsdelivr.net/npm/nana800-analytics@1/dist/nana800-analytics.min.js"></script>
<script>
  const analytics = Nana800Analytics.createNana800Analytics({
    apiKey: 'ingest_your_project_key',
    appProjectId: 'your_project_id',
  });

  let visitorId = localStorage.getItem('visitor_id');
  if (!visitorId) {
    visitorId = crypto.randomUUID();
    localStorage.setItem('visitor_id', visitorId);
  }
  analytics.identify(visitorId);
  analytics.track('page_view', { page: window.location.pathname });
</script>

Step 3. Code for React, Vue, Next.js and Electron

Install the nana800-analytics package. It has no dependencies, the minified build is about 13 KB and TypeScript types are included.

// npm install nana800-analytics
import { createNana800Analytics } from 'nana800-analytics';

export const analytics = createNana800Analytics({
  apiKey: 'ingest_your_project_key',
  appProjectId: 'your_project_id',
});

// after sign in: the user id in your system and user properties
analytics.identify('user-123', { plan: 'pro' });
analytics.track('button_clicked', { button: 'signup' });

Property values are strings. Create the client once for the whole app, for example in its own file that other parts of the code import.

Step 3. Code for React Native, Expo and Node.js servers

In React Native and Expo pass AsyncStorage as the storage, otherwise events that were not sent yet are lost when the app closes. On a Node.js 18 or newer server no storage is needed, but call await analytics.flush() before the process exits.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createNana800Analytics } from 'nana800-analytics';

// React Native and Expo
const analytics = createNana800Analytics({
  apiKey: 'ingest_your_project_key',
  appProjectId: 'your_project_id',
  storageAdapter: AsyncStorage,
});

// Node.js: createNana800Analytics({ apiKey, appProjectId, disableStorage: true })
// and the user id as the third argument of track:
// analytics.track('api_request', { endpoint: '/orders' }, 'user-123');

Step 4. Check that events arrive

Open your site or app with the code installed. In the project settings the First event arrived card checks every 10 seconds and changes from waiting to "Events arrive, everything is connected". The event itself shows up on the Events page.

The library collects events and sends them in batches: first 3 seconds after start, then every 20 seconds, up to 100 events per request. If the network drops, the batch goes out on the next try. Every event gets its own event_id, so a repeated send creates no duplicates.

If events do not arrive

Open the Network tab of the browser developer tools and look at the answer to the request to api.analytics.nana800.io.

• 401: wrong key. You need the ingest_... project key of this very project.
• 402: the balance is empty and the free events of the month are used up.
• 403: the project settings have a list of allowed sites, and your site is not in it.
• 413: the request is over 1 MB or holds too many events.
• 429: the events per minute limit of the project or of the account is exceeded.
• No request at all: identify was not called and events have no user id, or the visitor looks like a robot. The library does not count browsers driven by programs or page speed checks.

Protect the key from foreign events

The project key is visible in the page code, so someone could send their own events with it and spend your balance. The Protection tab of the project settings has two switches: accept events only from your sites (up to 50 sites, subdomains included) and limit events per minute. Events over the limit are not saved and not charged. All projects of an account always share a cap of 50,000 events per minute.