Astro SDK

Track your data via the Astro SDK for Vemetric.

The Astro SDK is the preferred way to integrate Vemetric into your Astro application.

Below you can see how to initialize and configure the SDK, as well as all the available functions.

Installation

Install the NPM package

In your project directory, run:

npm install @vemetric/astro

Include the Vemetric Component

Import and include the VemetricScript component in your Astro application (in a place that is rendered on every page, ideally in the <head> tag):

---
import VemetricScript from '@vemetric/astro';
---

<!doctype html>
<html lang="en">
  <head>
    <slot name="head" />
    <VemetricScript token="YOUR_PROJECT_TOKEN" />
  </head>
  <body>
    <slot />
  </body>
</html>

Replace YOUR_PROJECT_TOKEN with the unique token for your project (found in the project settings).

Verify installation

Once added, Vemetric will automatically start tracking page views on your site (each page load will be recorded). You can verify this by checking your Vemetric dashboard for incoming pageview events a few seconds after loading a page.

Data from localhost won’t be tracked.

Keep in mind that one project can be used to track data from multiple websites, which can be useful when you for example want to track users across your landing page and web application. We’ve also created a guide on how to track data across subdomains.

For more sophisticated integrations, see the Tracking Custom Events or User Identification sections.

Configuration

You can pass additional props to the VemetricScript component to configure Vemetric.

Look at the different options below for more details.

Example:

---
import VemetricScript from '@vemetric/astro';
---

<VemetricScript
  token="YOUR_PROJECT_TOKEN"
  scriptUrl="https://hub.yourdomain.com/main.js"
  host="https://hub.yourdomain.com"
  trackPageViews={true}
  trackOutboundLinks={true}
  trackDataAttributes={true}
  maskPaths={['/project/*', '/project/*/users']}
/>;

Replace YOUR_PROJECT_TOKEN with the unique token for your project (found in the project settings).

scriptUrl

Description

Here you can specify a different URL for the Vemetric script.

Necessary if you want to use a proxy for tracking your data via your own domain.

Type

string

Example

"https://hub.yourdomain.com/main.js"

host

Description

Here you can specify a different host for the Vemetric API.

Necessary if you want to use a proxy for tracking your data via your own domain.

Type

string

Example

"https://hub.yourdomain.com"

trackPageViews

Description

Whether to track page views automatically.

Listens to any kind of changes of the URL (hash, pathname, search, etc.) and records a page view event. If disabled, you need to track page views manually.

Type

boolean

Default

"true"

trackOutboundLinks

Description

Whether to track outbound link clicks.

Type

boolean

Default

"true"

trackDataAttributes

Description

Whether to listen to data-vmtrc attributes on elements for sending custom events.

Type

boolean

Default

"true"

maskPaths

Description

An array of paths to mask from the URL. Helpful if you mask sensitive information in the URL (e.g. user IDs) or group page views by a specific path (e.g. /project/*).

Type

"string[]"

Example

"['/project/*', '/project/*/users']"

Methods

The Astro SDK export the same vemetric object as the Web SDK NPM package and enables you to track custom events or identify users.

You can import it like this and use it anywhere in your application:

import { vemetric } from '@vemetric/astro';

<button id="custom-event-button">
  Track Custom Event
</button>

<script>
  import { vemetric } from '@vemetric/astro';

  document.getElementById('custom-event-button')?.addEventListener('click', () => {
    vemetric.trackEvent('custom_event_astro');
  });
</script>

Checkout the Web (Browser) SDK Docs for more details on the available methods.

Resources

NPM Package

View the NPM Package of the Astro SDK.

Source code

View the source code of the Astro SDK on GitHub.

React SDK

Track your data via the React SDK for Vemetric.

Backend - Node.js SDK

Track your data via the Node.js SDK for Vemetric.