// app/layout.tsx
import { Analytics } from 'clickchutney-analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Next.js (Pages Router)

// pages/_app.tsx
import { Analytics } from 'clickchutney-analytics/react'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

React

import { Analytics } from 'clickchutney-analytics/react'

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Analytics />
    </div>
  )
}

Vanilla JavaScript

<script type="module">
  import { inject, track } from 'https://unpkg.com/clickchutney-analytics'
  
  // Initialize
  inject()
  
  // Track custom events
  track('button_click', { button: 'cta' })
</script>

Or using the global:

<script src="https://unpkg.com/clickchutney-analytics/dist/index.js"></script>
<script>
  // Initialize
  ccAnalytics.inject()
  
  // Track custom events  
  ccAnalytics.track('signup', { plan: 'premium' })
</script>

API

`inject(options?)`

Initialize the analytics tracking.

import { inject } from 'clickchutney-analytics'

inject({
  endpoint: 'https://your-worker.domain.com/api/collect', // optional
  debug: true, // optional, default: false
  beforeSend: (event) => {
    // Optional: filter or modify events before sending
    if (event.url.includes('localhost')) return null
    return event
  }
})

`track(eventName, properties?)`

Track a custom event.

import { track } from 'clickchutney-analytics'

track('purchase', {
  value: 99.99,
  currency: 'USD',
  items: 3
})

`page(path?)`

Manually track a page view (automatically done on route changes).

import { page } from 'clickchutney-analytics'

page('/custom-page')

`<Analytics />` Component Props

interface AnalyticsProps {
  endpoint?: string;          // Custom endpoint URL
  debug?: boolean;           // Enable debug logging
  enabled?: boolean;         // Toggle analytics on/off
  beforeSend?: (event: any) => any | null;
}

Configuration

Custom Endpoint

By default, analytics are sent to https://clickchutney-analytics.contact-sushilpandey.workers.dev/api/collect. You can specify a custom endpoint:

inject({
  endpoint: 'https://your-domain.com/api/collect'
})

Development Mode

Analytics are automatically disabled in development mode unless debug: true is set.

Event Data

Each event includes:

{
  type: 'pageview' | 'custom_event_name',
  timestamp: number,
  url: string,
  referrer?: string,
  title: string,
  sessionId: string,
  userId: string,
  userAgent: string,
  screen: { width: number, height: number },
  viewport: { width: number, height: number },
  properties?: { [key: string]: any }
}

Privacy

No cookies are used
No personal information is collected
Session/User IDs are randomly generated
GDPR compliant by design
Data is processed on Cloudflare's edge network

License

MIT

Keywords

FAQs

What is clickchutney-analytics?

Is clickchutney-analytics well maintained?

Package last updated on 12 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

clickchutney-analytics