### Install Dependencies

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/vite-react-router-v7/README.md

Run this command to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/nuxt/README.md

Launch the development server to view the application at http://localhost:3000.

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Run development server

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/svelte-spa/README.md

Starts the local development server, optionally opening the application in a browser.

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install Dependencies

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/nuxt/README.md

Install all project dependencies required for the Nuxt application.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Install OneDollarStats Package

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Install the OneDollarStats package using npm.

```bash
npm i onedollarstats
```

--------------------------------

### Run Development Server

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/next/README.md

Use these commands to start the Next.js development server. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Start Development Server

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/vite-react-router-v7/README.md

Starts the development server with Hot Module Replacement (HMR) enabled. Your application will be accessible at http://localhost:5173.

```bash
npm run dev
```

--------------------------------

### Integrate React-Specific ESLint Plugins

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/vite-react/README.md

Adds React-specific linting rules using eslint-plugin-react-x and eslint-plugin-react-dom. Ensure these plugins are installed in the project dependencies.

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Build for Production

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/nuxt/README.md

Compile the application into a production-ready build.

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Initialize Astro Project

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/astro/README.md

Use this command to scaffold a new project using the Astro basics template.

```sh
pnpm create astro@latest -- --template basics
```

--------------------------------

### Preview Production Build

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/nuxt/README.md

Run the production build locally to verify the application before deployment.

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Build for production

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/svelte-spa/README.md

Compiles the application into a production-ready build.

```sh
npm run build
```

--------------------------------

### Docker Build and Run

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/vite-react-router-v7/README.md

Builds a Docker image for your application and runs it in a container, exposing the application on port 3000.

```bash
docker build -t my-app .

# Run the container
docker run -p 3000:3000 my-app
```

--------------------------------

### configure(config)

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Initializes the OneDollarStats tracker. Should be called once at the application entry point.

```APIDOC
## configure(config)

### Description
Initializes the OneDollarStats tracker with configuration options. If called before tracking methods, it uses default settings.

### Parameters
#### Request Body
- **collectorUrl** (string) - Optional - Custom collector URL.
- **autocollect** (boolean) - Optional - Automatically track pageviews & clicks (default: true).
- **hashRouting** (boolean) - Optional - Track SPA hash route changes (default: false).
- **excludePages** (array) - Optional - Pages to ignore for tracking.
- **includePages** (array) - Optional - Only track these pages.
- **hostname** (string) - Optional - Override hostname (required for devmode).
- **devmode** (boolean) - Optional - Enable local development testing.
```

--------------------------------

### Create a Svelte project

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/svelte-spa/README.md

Initializes a new Svelte project in the current directory or a specified folder.

```sh
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### Create a New Svelte Project

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/svelte-ssr/README.md

Use 'npx sv create' to initialize a new Svelte project. Specify a directory name to create the project in a subdirectory.

```sh
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### API Reference - configure

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Initializes the tracker with your configuration. Accepts an optional `AnalyticsConfig` object.

```APIDOC
## configure(config?: AnalyticsConfig)

### Description
Initializes the tracker with your configuration.

### Parameters
#### Request Body
- **collectorUrl** (string) - Required - URL to send analytics events. Default: `https://collector.onedollarstats.com/events`
- **trackLocalhostAs** (string | null) - Optional - Deprecated. Use `hostname` and `devmode`. Default: `null`
- **hostname** (string | null) - Optional - Override event hostname (for server-side or desktop runtimes). Required for devmode. Default: `null`
- **devmode** (boolean) - Optional - For dev testing, requires `hostname`. Default: `false`
- **hashRouting** (boolean) - Optional - Track hash route changes as pageviews. Default: `false`
- **autocollect** (boolean) - Optional - Automatically track pageviews & clicks. Default: `true`
- **excludePages** (string[]) - Optional - Pages to ignore for automatic tracking. Default: `[]`
- **includePages** (string[]) - Optional - Pages to explicitly include for tracking. Default: `[]`

### Notes
- Manual calls of `view` or `event` ignore `excludePages`/`includePages`.
- By default, events from `localhost` are ignored. Use the `hostname` and `devmode` options to simulate a hostname for local development.
```

--------------------------------

### Configuration

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Configure the OneDollarStats tracker with essential options. It's recommended to initialize analytics on every page for static sites or at the root layout for SPAs.

```typescript
import { configure } from "onedollarstats";

configure({
  collectorUrl: "https://collector.onedollarstats.com/events",
  autocollect: true, // automatically tracks pageviews & clicks
  hashRouting: true // track SPA hash route changes
});
```

--------------------------------

### Configure OneDollarStats

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Initializes the tracker. Call this once at the application entry point.

```typescript
import { configure } from "onedollarstats";

// Basic configuration with all options
configure({
  collectorUrl: "https://collector.onedollarstats.com/events", // Custom collector URL (optional)
  autocollect: true,      // Automatically track pageviews & clicks (default: true)
  hashRouting: true,      // Track SPA hash route changes as pageviews (default: false)
  excludePages: ["/admin/*", "/private"],  // Pages to ignore for tracking
  includePages: ["/public/*", "/blog/*"],  // Only track these pages (if set)
  hostname: "mysite.com", // Override hostname (required for devmode)
  devmode: true           // Enable local development testing (requires hostname)
});

// Minimal production configuration (uses all defaults)
configure();

// Development mode configuration (for testing on localhost)
configure({
  hostname: "example.com",
  devmode: true
});
```

--------------------------------

### Configure OneDollarStats Analytics

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Initialize the analytics tracker with your configuration. Ensure this is called on every page for static sites or at the root layout for SPAs. Autocollect and hash routing can be enabled here.

```typescript
import { configure } from "onedollarstats";

// Configure analytics
configure({
  collectorUrl: "https://collector.onedollarstats.com/events",
  autocollect: true, // automatically tracks pageviews & clicks
  hashRouting: true // track SPA hash route changes
});
```

--------------------------------

### API Reference - view

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Sends a pageview event. Can accept a path string or properties object as the first argument, and properties object as the second if the first is a path string.

```APIDOC
## view(pathOrProps?: string | Record<string, string>, props?: Record<string, string>)

### Description
Sends a pageview event.

### Parameters
#### Path Parameters
- **pathOrProps** (string | object) - Optional - If string, represents the path. If object, represents custom properties.
- **props** (object) - Optional - Properties to associate with the pageview, used when `pathOrProps` is a string.
```

--------------------------------

### Autocapture Configuration

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Configuration for automatic page view and click event tracking using HTML data attributes.

```APIDOC
## Autocapture Configuration

### Page View Attributes
- **data-s-path** (string) - Optional - Specifies the path representing the page (set on <body>).
- **data-s-view-props** (object) - Optional - Defines additional properties to include with the page view event.

### Click Event Attributes
- **data-s-event** (string) - Required - Name of the event.
- **data-s-event-path** (string) - Optional - The path representing the page where the event occurred.
- **data-s-event-props** (object) - Optional - Properties to send with the event.
```

--------------------------------

### Integrate OneDollarStats in JavaScript Frameworks

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Initialize OneDollarStats at the application root for Next.js, Nuxt.js, Angular, Svelte, and Astro.

```typescript
// Next.js (App Router) - Create a client component
// app/Analytics.tsx
"use client";
import { configure } from "onedollarstats";
import { useEffect } from "react";

export default function Analytics() {
  useEffect(() => {
    configure({
      hostname: "yoursite.com",
      devmode: process.env.NODE_ENV === "development"
    });
  }, []);
  return null;
}

// app/layout.tsx
import Analytics from "./Analytics";
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Analytics />
        {children}
      </body>
    </html>
  );
}

// Nuxt.js - Create a client plugin
// plugins/onedollarstats.client.ts
import { configure } from "onedollarstats";

export default defineNuxtPlugin(() => {
  configure({ hostname: "yoursite.com", devmode: true });
});

// Angular - Create an analytics component
// analytics.component.ts
import { Component, OnInit } from "@angular/core";
import { configure } from "onedollarstats";

@Component({
  selector: "app-analytics",
  template: ""
})
export class AnalyticsComponent implements OnInit {
  ngOnInit(): void {
    configure({ hostname: "yoursite.com", devmode: true });
  }
}

// Svelte - Initialize in root layout
// +layout.svelte
<script>
  import { onMount } from "svelte";
  import { configure } from "onedollarstats";

  onMount(() => {
    configure({ hostname: "yoursite.com", devmode: true });
  });
</script>

// Astro - Initialize in Layout component
// layouts/Layout.astro
<script>
  import { configure } from "onedollarstats";
  configure({ hostname: "yoursite.com", devmode: true });
</script>
```

--------------------------------

### view(pathOrProps, props)

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Records a pageview event manually.

```APIDOC
## view(pathOrProps, props)

### Description
Records a pageview event. Useful when autocollect is disabled or for manual tracking.

### Parameters
- **pathOrProps** (string|object) - Optional - The URL path or custom properties object.
- **props** (object) - Optional - Custom properties if path is provided as the first argument.
```

--------------------------------

### Configure Type-Aware ESLint Rules

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/vite-react/README.md

Updates the ESLint configuration to include type-aware rules for TypeScript files. Requires replacing recommended configurations with type-checked variants.

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Astro Project Directory Structure

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/examples/astro/README.md

Visual representation of the standard file and folder layout in an Astro project.

```text
/
├── public/
│   └── favicon.svg
├── src
│	├── assets
│	│   └── astro.svg
│	├── components
│	│   └── Welcome.astro
│	├── layouts
│	│   └── Layout.astro
│	└── pages
│	    └── index.astro
└── package.json
```

--------------------------------

### Configure Page Tracking Filters

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Control tracked pages using glob-style patterns with excludePages and includePages. Manual view() and event() calls bypass these filters.

```typescript
import { configure } from "onedollarstats";

// Exclude specific pages from tracking
configure({
  excludePages: [
    "/admin/*",      // Exclude all admin pages
    "/private",      // Exclude exact path
    "/api/*",        // Exclude API routes
    "/preview/*"     // Exclude preview pages
  ]
});

// Only track specific pages (whitelist approach)
configure({
  includePages: [
    "/blog/*",       // Track all blog pages
    "/products/*",   // Track product pages
    "/",             // Track homepage
    "/pricing"       // Track pricing page
  ]
});

// Combine both for fine-grained control
// Include rules are checked first, then exclude rules
configure({
  includePages: ["/public/*", "/blog/*"],
  excludePages: ["/public/draft/*"]  // Exclude drafts within public
});

// Note: Manual view() and event() calls ignore these rules
// They always track regardless of include/exclude settings
```

--------------------------------

### HTML Data Attributes for Autocapture

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Declarative tracking using HTML attributes. Supports events, paths, and properties.

```html
<!-- Basic click event tracking -->
<button data-s-event="SignUp">
  Sign Up Now
</button>

<!-- Click event with custom path -->
<a href="/pricing" data-s-event="ViewPricing" data-s-event-path="/pricing-page">
  View Pricing
</a>

<!-- Click event with properties (semicolon-separated key=value pairs) -->
<button
  data-s-event="AddToCart"
  data-s-event-props="product=laptop;price=999;category=electronics">
  Add to Cart
</button>

<!-- Override page path for pageview tracking (set on body) -->
<body data-s-path="/custom-page-path">
  <!-- Page content -->
</body>

<!-- Add properties to automatic pageview events -->
<div data-s-view-props="section=hero;variant=A">
  Hero Section
</div>
<div data-s-view-props="section=features">
  Features Section
</div>

<!-- Alternative colon syntax (both work identically) -->
<button data-s:event="Download" data-s:event-props="file=guide.pdf">
  Download Guide
</button>
```

--------------------------------

### event() Method

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Sends a custom event to the OneDollarStats tracking service.

```APIDOC
## event(eventName, pathOrProps, props)

### Description
Sends a custom event to the tracking service.

### Parameters
- **eventName** (string) - Required - Name of the event.
- **pathOrProps** (string | Record<string, string>) - Optional - Represents the path if string, or custom properties if object.
- **props** (Record<string, string>) - Optional - Properties if the second argument is a path string.
```

--------------------------------

### event(eventName, pathOrProps, props)

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Sends a custom event to track user interactions.

```APIDOC
## event(eventName, pathOrProps, props)

### Description
Sends a custom event to track user interactions, conversions, or actions.

### Parameters
- **eventName** (string) - Required - The name of the event.
- **pathOrProps** (string|object) - Optional - The path or custom properties object.
- **props** (object) - Optional - Custom properties if path is provided as the second argument.
```

--------------------------------

### Track Custom Events

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Track custom events using the `event` function. You can include a simple event name, a path, or properties, or a combination of these.

```typescript
import { event } from "onedollarstats";

// Simple event
event("Purchase");

// Event with a path
event("Purchase", "/product");

// Event with properties
event("Purchase", { amount: 1, color: "green" });

// Event with path + properties
event("Purchase", "/product", { amount: 1, color: "green" });
```

--------------------------------

### API Reference - event

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Tracks custom events. Can accept different combinations of event name, path, and properties.

```APIDOC
## event(eventName: string, pathOrProps?: string | Record<string, string>, props?: Record<string, string>)

### Description
Tracks custom events.

### Parameters
#### Path Parameters
- **eventName** (string) - Required - The name of the event to track.
- **pathOrProps** (string | object) - Optional - If string, represents the path associated with the event. If object, represents custom properties.
- **props** (object) - Optional - Properties to associate with the event, used when `pathOrProps` is a string.
```

--------------------------------

### HTML Data Attributes

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Declarative tracking using HTML data attributes for automatic event capture.

```APIDOC
## HTML Data Attributes

### Description
Use HTML attributes to track events without writing JavaScript.

### Attributes
- **data-s-event** (string) - The event name to trigger on click.
- **data-s-event-path** (string) - Custom path for the event.
- **data-s-event-props** (string) - Semicolon-separated key=value pairs for event properties.
- **data-s-path** (string) - Override page path for pageview tracking (set on body).
- **data-s-view-props** (string) - Add properties to automatic pageview events.
```

--------------------------------

### Track Custom Events

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Sends custom events for user interactions. Can be used with paths and properties.

```typescript
import { event } from "onedollarstats";

// Simple event tracking
event("SignUp");

// Event with a specific path
event("Purchase", "/product/shoes");

// Event with custom properties
event("Purchase", { amount: "99.99", currency: "USD", product: "shoes" });

// Event with path and properties
event("AddToCart", "/products/laptop", {
  price: "1299",
  color: "silver",
  quantity: "1"
});

// Track button click
document.querySelector("#subscribe-btn")?.addEventListener("click", () => {
  event("Subscribe", { plan: "premium" });
});

// Track form submission
document.querySelector("#contact-form")?.addEventListener("submit", () => {
  event("ContactFormSubmit", "/contact");
});
```

--------------------------------

### Track Pageviews

Source: https://context7.com/drizzle-team/onedollarstats-package/llms.txt

Records pageview events manually. Useful when autocollect is disabled or for virtual SPA routes.

```typescript
import { view } from "onedollarstats";

// Simple pageview - uses current URL path
view();

// Pageview with explicit path
view("/homepage");

// Pageview with custom properties
view({ plan: "pro", theme: "dark" });

// Pageview with path and properties
view("/checkout", { step: "2", plan: "pro" });

// Track a virtual pageview in SPA
const handleRouteChange = (newPath: string) => {
  view(newPath);
};
```

--------------------------------

### Track Pageviews Manually

Source: https://github.com/drizzle-team/onedollarstats-package/blob/main/README.md

Manually track pageviews using the `view` function. This is useful if `autocollect` is set to false. You can provide a path or custom properties.

```typescript
import { view } from "onedollarstats";

// Simple pageview
view("/homepage");

// Pageview with extra properties
view("/checkout", { step: 2, plan: "pro" });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.