Installation

Installation Methods

CLI (recommended)

The fastest way to get set up. Detects your framework, installs the SDK, and wires up initialization automatically:

npx roaarrr-wizard

See the Quick Start guide for details on what it does and how to skip the login step with an existing API key.

NPM Package (manual)

If you'd rather wire things up yourself: this provides the best developer experience with TypeScript support and automatic updates.

npm install roaarrr-browser

Or using yarn:

yarn add roaarrr-browser

CDN Installation

For quick setup or if you prefer not to use a package manager, you can include roaarrr directly from our CDN:

<script type="module">
  import { analytics } from 'https://cdn.jsdelivr.net/npm/roaarrr-browser@latest/index.js';
  analytics.init('YOUR_API_KEY_HERE');
</script>

Manual Download

You can also download the latest release directly from GitHub and include it in your project.

Framework-Specific Setup

React / Next.js

For React applications, create a roaarrr hook for easy integration:

// hooks/useAnalytics.js
import { useEffect } from 'react';
import { analytics } from 'roaarrr-browser';

export function useAnalytics(apiKey) {
  useEffect(() => {
    if (apiKey && typeof window !== 'undefined') {
      analytics.init(apiKey);
    }
  }, [apiKey]);

  return analytics;
}

Vue.js

For Vue applications, create a plugin:

// plugins/roaarrr.js
import { analytics } from 'roaarrr-browser';

export default {
  install(app, options) {
    analytics.init(options.apiKey);
    app.config.globalProperties.$analytics = analytics;
    app.provide('analytics', analytics);
  }
};

Angular

For Angular applications, create a service:

// services/analytics.service.ts
import { Injectable } from '@angular/core';
import { analytics } from 'roaarrr-browser';

@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {
  init(apiKey: string) {
    analytics.init(apiKey);
  }

  identify(userData: any) {
    analytics.identify(userData);
  }

  funnel(eventName: string, eventData?: any) {
    analytics.funnel(eventName, eventData);
  }
}

Basic Configuration

After installation, initialize roaarrr with your API key. You can find your API key in your ROAARRR dashboard.

import { analytics } from 'roaarrr-browser';

// Initialize with your API key
analytics.init('YOUR_API_KEY_HERE');