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/cli 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.

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)
Named: 44 events

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

Review at: https://www.dropfix.in/app-model

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

AI is very confident in the name

What to do

Click Approve all.

What you see

Orange - 60% confidence

What it means

AI 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/cli scan --key YOUR_PUBLIC_KEY --dry-run

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

Optional — automate future scans

As your app grows, you'll add new buttons and forms. They'll show up in DropFix as un-named events until the CLI scans them again. You can re-run npx @dropfix/cli scan manually any time, OR add the snippet below to your package.json so every build re-scans automatically. Adding the postbuild script is optional— we don't modify your package.json for you because every build pipeline is different and we don't want to surprise you.

Optional postbuild snippet (paste into package.json yourself)
// Optional — paste this into your package.json yourself.
// We don't auto-modify your package.json because every build pipeline
// is different and we don't want to surprise you.
{
  "scripts": {
    "build": "next build && npx @dropfix/cli scan --key YOUR_KEY --silent"
  }
}