Getting Started with Racoons

This guide will walk you through signing up for Racoons and integrating it into your web application to start collecting data.

Visit the Racoons website and click "Sign In"
Create your account using your email or sign in with a social provider

Create an Organization

After signing up, you'll be guided through creating your first organization:

Enter your organization name
Click "Submit"

Create a Project

Once your organization is set up, you'll be asked to create your first project:

Click "New Project" or follow the onboarding flow
Enter your project details:
- Organization
- Project name
- Project URL
- Project goal
Click "Submit"

Install the Metrics Script

After creating your project, navigate to your project's settings page to find your unique integration code.

Installation

Copy the script block provided in your project settings and paste it into the <head> section of your web application:

<script type="module">
  import { initializeRacoons } from "https://cdn.racoons.ai/libs/index.mjs";
  initializeRacoons("<project-id>", { debugMode: false });
</script>

Important: Replace the project ID in the example above with your actual project ID from your settings page.

Configuration

The initializeRacoons() function accepts two parameters:

Parameters

projectId (string, required)
- Your unique project identifier
- Found in your project settings page
- Example: "9505de74-2e4f-4529-962b-781a4a13c4bb"
options (object, required)
- debugMode (boolean)
  - When true: Logs all events to the browser console before sending
  - When false: Sends events without console logging
  - Recommended: Use true during development, false in production

Example Configurations

Production Setup

initializeRacoons("<project-id>", { debugMode: false });

Development Setup

initializeRacoons("<project-id>", { debugMode: true });

Next.js Setup

<Script
  id="racoons-module"
  type="module"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
                import { initializeRacoons }
                  from "https://cdn.racoons.ai/libs/index.mjs";
                initializeRacoons(
                  "<project-id>",
                  { debugMode: false }
                );
              `,
  }}
/>

Verification

To verify your integration is working:

Open your web application in a browser
If using debugMode: true, open the browser console to see event logs
Navigate through your application to trigger events
If in production check your Racoons dashboard to confirm data is being received

Next Steps

Once your integration is complete and data is flowing:

Review your first landing page analysis in the Racoons dashboard
Set up team members and permissions
Use the chat to create charts and understand your data
Explore the MCP server for AI-powered insights (see MCP Server Guide)

Troubleshooting

Events not appearing in dashboard

Verify the project ID is correct
Check browser console for errors
Ensure the script is in the <head> section
Confirm your domain is authorized in project settings

Script loading errors

Verify you have internet connectivity
Check that https://cdn.racoons.ai is not blocked by ad blockers or firewalls
Ensure you're using the type="module" attribute in the script tag
Check that your project's Content Security Policy (CSP) is not blocking outbound requests to racoons.ai. You may need to add https://*.racoons.ai/ to your CSP.
- The error will look something like this: Refused to connect to 'https://api.racoons.ai/events' because it violates the following Content Security Policy directive: "connect-src 'self'

Integration Guide