Plain JavaScript, Vue, and Svelte

This page installs Grain Tag in a plain JavaScript app, a Vue app, or a Svelte app. It works the same way in Angular and in every other framework that runs in a browser. For React, read React. For Next.js, read Next.js.

Before you start

You need three things:

Your tenant alias. The dashboard at https://grainql.com/dashboard shows it. It is not the UUID.
A decision between the script tag and the npm package. The script tag needs no build step. The npm package gives you typed imports.
A browser with developer tools, to make sure that events arrive.

1. Install by script tag

Put this tag in the <head> of your HTML. Replace your-tenant-id with your tenant alias.

<script src="https://tag.grainql.com/v4/your-tenant-id.js"></script>

The script initializes itself. It exposes the global GrainTag object with track, identify, and getInstance. If you use the script tag, skip step 2.

2. Install by npm

npm install @grainql/tag

Then call init one time, in the entry point of your app.

import { init, track, identify } from '@grainql/tag';

init({ tenantId: 'your-tenant-id' });

The import has no side effects. Outside a browser, init returns a no-op stub, so a server render or a test does not need a guard. track and identify called before init are queued and replayed after initialization.

3. Make sure that events arrive

Open the app in a browser. In the developer console, run:

GrainTag.track('installation_test');

The dashboard shows the installation_test event within 30 seconds. With the npm package, pass debug: true to init to see the batching and sending activity in the console. If the event does not appear, read Troubleshooting.

4. Track a custom event

Call track with an event name and an optional properties object. The script tag and the npm package use the same signature.

import { track } from '@grainql/tag';

track('button_clicked', { button_name: 'signup', location: 'hero' });

With the script tag, call GrainTag.track with the same arguments. Grain Tag batches events and sends them in groups. A manual flush is not necessary. Read Track an event.

5. Identify a user

After a login, pass the user ID to identify. Every later event holds this user ID.

import { identify } from '@grainql/tag';

identify('user_123');

With the script tag, call GrainTag.identify('user_123'). Read Identify users. Grain Tag is cookieless by default and uses daily rotating IDs. When your site asks for consent, call the consent methods on the instance.

import { getInstance } from '@grainql/tag';

const grain = getInstance();

grain.consent.grant();
grain.consent.revoke();
const status = grain.consent.status();

grant enables persistent tracking. status returns the current ConsentState, or null. Read Privacy and consent.

7. Vue

Call init in main.ts, then call track from any component.

import { createApp } from 'vue';
import { init } from '@grainql/tag';
import App from './App.vue';

init({ tenantId: 'your-tenant-id' });

createApp(App).mount('#app');

<template>
  <button @click="handleClick">Get Started</button>
</template>

<script setup>
import { track } from '@grainql/tag';

const handleClick = () => {
  track('button_clicked', { location: 'hero' });
};
</script>

Vue Router navigates through the History API, so Grain Tag tracks each route change as a page view. With the script tag in index.html, call GrainTag.track instead of the import.

8. Svelte

Call init in src/main.ts, then call track from any component.

import { init } from '@grainql/tag';
import App from './App.svelte';

init({ tenantId: 'your-tenant-id' });

const app = new App({ target: document.getElementById('app')! });
export default app;

<script>
  import { track } from '@grainql/tag';

  function handleClick() {
    track('button_clicked', { location: 'hero' });
  }
</script>

<button on:click={handleClick}>Get Started</button>

SvelteKit navigates through the History API, so Grain Tag tracks each route change as a page view. With the script tag in app.html, call GrainTag.track instead of the import.

Next steps

Core methods

Every method of both SDKs, with signatures.

Identify users

Anonymous IDs, daily rotating IDs, and identify.

Trackers

Track element clicks from the dashboard, without code.

Track an event

Properties, batching, and delivery.

Start here

Install without code

Install with code

Track events

Dashboard

Remote configuration

Guides

React

Advanced

Plain JavaScript, Vue, and Svelte

Before you start

1. Install by script tag

2. Install by npm

3. Make sure that events arrive

4. Track a custom event

5. Identify a user

7. Vue

8. Svelte

Next steps

Core methods

Identify users

Trackers

Track an event

​Before you start

​1. Install by script tag

​2. Install by npm

​3. Make sure that events arrive

​4. Track a custom event

​5. Identify a user

​6. Grant consent

​7. Vue

​8. Svelte

​Next steps

Core methods

Identify users

Trackers

Track an event

Before you start

1. Install by script tag

2. Install by npm

3. Make sure that events arrive

4. Track a custom event

5. Identify a user

6. Grant consent

7. Vue

8. Svelte

Next steps