📚 Documentation

Everything you need to integrate LoggerLizard into your project

⚡ Quick Start (2 minutes)

Step 1: Create Account & Project

Sign up at dashboard.loggerlizard.com
Create a new project
Copy your public API key (starts with llz_pub_)

Step 2: Install (Choose One)

📜 Option A: Script Tag (Recommended)

<script
  data-project="your-project-name"
  data-api-key="llz_pub_YOUR_KEY"
  src="https://api.loggerlizard.com/js/tracker.js">
</script>

Add this to your HTML <head> or before </body>

📦 Option B: NPM Package

npm install @loggerlizard/lizard

import Lizard from '@loggerlizard/lizard';

new Lizard('llz_pub_YOUR_KEY', {
  autoTrack: true
});

Step 3: See Your Data

Visit your dashboard and watch events roll in! Page views are tracked automatically.

✅ That's it! You're tracking events.

Page views, clicks, scroll depth, and errors are auto-tracked when autoTrack: true

🎯 Track Custom Events

Track button clicks, form submissions, purchases, or any custom event.

With NPM package:

import Lizard from '@loggerlizard/lizard';

const liz = new Lizard('llz_pub_YOUR_KEY', { autoTrack: true });

// Simple event
liz.log('button_click');

// Event with metadata
liz.log('purchase', {
  plan: 'pro',
  amount: 19,
  currency: 'USD'
});

// Error tracking
liz.log('error', {
  message: 'Failed to load data',
  stack: error.stack
});

With script tag:

<button onclick="window.lizard.log('cta_click')">
  Sign Up
</button>

<script>
  // Track anywhere in your code
  window.lizard.log('signup', { plan: 'free' });
</script>

🚀 Framework Integration

Next.js (App Router)

Create lib/loggerlizard.js:

import Lizard from '@loggerlizard/lizard';

new Lizard('llz_pub_YOUR_KEY', { autoTrack: true });

Import in app/layout.tsx:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="/lib/loggerlizard.js" type="module" />
      </body>
    </html>
  );
}

Astro

Create src/lib/loggerlizard.js:

import Lizard from '@loggerlizard/lizard';

const liz = new Lizard('llz_pub_YOUR_KEY', { autoTrack: true });

// Track Astro page transitions (skip first load)
let isFirstLoad = true;
document.addEventListener('astro:page-load', () => {
  if (isFirstLoad) {
    isFirstLoad = false;
    return;
  }
  liz.log('page_view');
});

Import in your base layout:

<script>
  import '../lib/loggerlizard.js';
</script>

React / Vite

Initialize in your main entry point:

// main.jsx or App.jsx
import Lizard from '@loggerlizard/lizard';

new Lizard('llz_pub_YOUR_KEY', { autoTrack: true });

// Rest of your app...

📖 API Reference

new Lizard(apiKey, options)

Initialize the tracker

apiKey: string - Your public API key
options: object
autoTrack: boolean - Auto-track page views, clicks, scroll, errors (default: true)
debug: boolean - Log events to console (default: false)

liz.log(event, metadata?)

Track a custom event

event: string - Event name (e.g., 'button_click', 'purchase')
metadata: object - Optional data to attach (e.g., {plan: 'pro', amount: 19})

🔧 Troubleshooting

Double page views?

If you're seeing 2x page views, you're probably tracking both on SDK init AND manually. The SDK auto-tracks page views on load. For SPA frameworks (Astro, Next.js), skip the first load event.

Events not showing up?

Check:

API key is correct and starts with llz_pub_
Script is loading (check Network tab in DevTools)
Enable debug: true to see console logs
Check browser console for errors

Need help?

Email support@loggerlizard.com and we'll help you out.