Installation

Installation Methods

NPM Package

The recommended way to install roaarrr is via npm. 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');

// Optional: Configure additional settings
analytics.init('YOUR_API_KEY_HERE', {
  debug: false, // Enable debug mode in development
  trackPageViews: true, // Automatically track page views
  cookieConsent: true // Respect user cookie preferences
});