DropFix
Setup guide V1 - 5 of 12

Run the CLI to name your events

Let DropFix scan your source code and turn technical click names into plain English events.

Step 3

Run this one command

DropFix is capturing clicks and page views, but some may have technical names like dashboard_submit. The CLI reads your source code and gives every action a plain English name.

First scan
# Open your terminal inside your project folder and run:
npx dropfix scan --key YOUR_PUBLIC_KEY

# Replace YOUR_PUBLIC_KEY with your key from Settings -> Security

What the CLI does automatically

  1. 1Detects your framework: Next.js, React, Vue, Angular, Svelte, or plain HTML.
  2. 2Scans source files for every button, link, and form.
  3. 3Skips anything that already has a data-df-track name.
  4. 4Generates a plain English name for each unnamed element using AI.
  5. 5Injects names into your source code as data-df-track attributes.
  6. 6Sends the complete list of event names to DropFix.
  7. 7Adds a postbuild script so future deploys are named automatically.

Privacy

The CLI never sends API keys, database passwords, or sensitive data. It only sends button text, component names, function names, and CSS class names.

Expected output

Terminal output
Detected stack: Next.js
Scanning 23 source files...

Found: 47 interactive elements
Skipped: 3 (already have data-df-track - your manual names kept)
Sent to Claude for naming: 44 elements

Named with high confidence: 38 events
Needs your review: 6 events

Injected data-df-track into source files
Manifest sent to DropFix

Open https://app.dropfix.in/app-model to review

Review event names

After the CLI finishes, open DropFix App Model. Most names will be approved automatically. A few icon-only or generic elements may need review.

What you see

Green - 95% confidence

What it means

Claude is very confident in the name

What to do

Click Approve all.

What you see

Orange - 60% confidence

What it means

Claude made a reasonable guess

What to do

Check the name, edit if needed, approve.

What you see

Red - Needs review

What it means

Could not determine the name confidently

What to do

Type the name yourself or add data-df-track.

Open app model

Manual names and optional flags

If you already added data-df-track manually, the CLI skips those and keeps your names exactly as written.

Optional flags
# Preview what would be changed without changing files:
npx dropfix scan --key YOUR_PUBLIC_KEY --dry-run

# Scan only a specific folder:
npx dropfix scan --key YOUR_PUBLIC_KEY --dir ./src/app

Future deploys are automatic

After the first scan, the CLI adds a postbuild script. Every time you build, DropFix scans any new elements and names them.

Automatic postbuild
// This is added to your package.json automatically:
{
  "scripts": {
    "build": "next build && npx dropfix scan --key YOUR_KEY --silent"
  }
}