Skip to content

sentu1993/NotJar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NotJar 🚀

The Open-Source, Self-Hosted User Behavior Analytics Tool

NotJar is a powerful, fully open-source alternative to Hotjar, designed for developers and privacy-conscious teams. It allows you to monitor user behavior on your own servers, giving you full control over your data.


✨ Key Features

🕵️‍♂️ Session Recording & Replay

  • Pixel-Perfect Replays: Watch exactly what your users see, including mouse movements, clicks, and scrolls.
  • Event Timeline: A chronological log of every interaction within a session.
  • Privacy Controls: Automatically masks sensitive data fields.

🔥 Heatmaps (Coming Soon)

  • Click Heatmaps: See where users are clicking most.
  • Scroll Heatmaps: Understand how far down users are scrolling.
  • Move Heatmaps: Track user attention through mouse movement.

🛠 Project Management

  • Multi-Tenant System: Manage multiple websites/projects from a single dashboard.
  • Dynamic Script Generation: Each project gets a unique, lightweight tracking snippet.
  • Geographic Data: Insights into where your users are coming from (Country/City).

🚀 Self-Hosted & Privacy First

  • Full Data Ownership: Your data stays on your infrastructure.
  • GDPR Friendly: Easy IP anonymization and cookie-less tracking options.
  • No Hidden Costs: No monthly fees or recording limits.

🏗 Tech Stack


image

� Quick Start (Docker)

Get up and running in less than 2 minutes:

# 1. Clone and enter
git clone https://github.com/sentu1993/NotJar.git
cd NotJar

# 2. Setup Env
cp .env.example .env

# 3. Launch
docker-compose up -d --build

# 4. Init Database
docker-compose exec api npx prisma migrate dev --name init

Access the dashboard at http://localhost:3000


� Detailed Installation Guide

1. Prerequisites

Ensure you have the following installed on your machine:

  • Docker (v20.10.0 or higher)
  • Docker Compose (v2.0.0 or higher)
  • Git

2. Clone the Repository

git clone https://github.com/your-username/notjar.git
cd notjar

3. Environment Configuration

Create a .env file from the example:

cp .env.example .env

Note: For production, make sure to change the JWT_SECRET and database credentials in .env and docker-compose.yml.

4. One-Click Launch

Start all services using Docker Compose:

docker-compose up -d --build

This command will:

  1. Spin up a PostgreSQL database.
  2. Start the Express API (Backend) on port 5000.
  3. Start the Next.js Dashboard (Frontend) on port 3000.

5. Database Initialization

Once the containers are running, run the Prisma migrations:

docker-compose exec api npx prisma migrate dev --name init

🖥️ Manual Installation (Without Docker)

If you prefer not to use Docker, follow these steps:

1. Backend Setup

cd backend
npm install
cp .env.example .env # Update with your DB credentials
npx prisma migrate dev
npm run dev

2. Frontend Setup

cd frontend
npm install
cp .env.example .env # Update NEXT_PUBLIC_API_URL
npm run dev

🚀 Getting Started Steps

Step 1: Create an Account

Navigate to http://localhost:3000/register and create your admin account.

Step 2: Add a Project

In your dashboard, click "Add Project". Provide a name (e.g., "My Blog") and the domain where you'll install the script (e.g., myblog.com).

Step 3: Install the Tracker

Copy the generated tracking script from the project settings page. Paste it into the <head> section of your target website:

<script>
  (function(n,o,t,j,a,r){
    n.NotJarId=j; a=o.getElementsByTagName('head')[0];
    r=o.createElement('script'); r.async=1;
    r.src='http://your-server-ip:5000/tracker.js?id='+j;
    a.appendChild(r);
  })(window,document);
</script>

Step 4: Monitor Behavior

Open your website in a new tab, move around, and click some buttons. Go back to the NotJar dashboard, click on your project, and you'll see your session appear under "Recent Sessions". Click "Replay" to watch the magic!


📂 Project Structure

notjar/
├── backend/          # Express API & Prisma Schema
├── frontend/         # Next.js Dashboard UI
├── tracker/          # Vanilla JS tracking script
├── docker-compose.yml # Docker orchestration
└── .env.example      # Template for environment variables

� How to Push Changes to Your Repository

To save your changes and push them to your own GitHub:

# 1. Stage your changes
git add .

# 2. Commit your changes
git commit -m "feat: updated installation instructions"

# 3. Push to GitHub
git push origin main

�🛡 Security & Privacy

  • JWT Auth: All dashboard endpoints are secured with JSON Web Tokens.
  • CORS: Configurable cross-origin resource sharing.
  • Data Scrubbing: The tracker can be configured to ignore specific input fields to protect PII (Personally Identifiable Information).

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.


🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or new features.


Built with ❤️ for the Open Source Community.

Releases

No releases published

Packages

 
 
 

Contributors