, -

Analytics Setup with Claude Code: A Step-by-Step Tutorial Using Litlyx

What Are We Building and Why Does the Setup Matter?

We are wiring a Next.js marketing site to Litlyx, a Privacy-first analytics platform, using Claude Code as the AI agent that writes, edits, and verifies every line of instrumentation code. The goal is a clean, GDPR-compliant setup that captures real business signals, not a swamp of raw pageview noise.

Honestly, most analytics setups fail before they even start. Teams paste a generic snippet, watch the pageview counter climb, and then realize they cannot answer a single meaningful question about their funnel. The problem is not the tool; it is the absence of a deliberate event plan. Collecting everything is the same as collecting nothing useful.

Claude Code changes that equation. It reads your codebase, edits files directly, and runs commands in your terminal. That means it can scan for every button and form that deserves an event call, then write those calls automatically. You describe the outcome you want; Claude Code handles the implementation work.

The Privacy-first analytics goal here is non-negotiable. Litlyx requires no personal data and no friction banners of any kind, so your visitors never hit a wall before they even read your headline. That matters for conversion rates and for GDPR compliance from day one.

Finish this tutorial and you will have a real-time dashboard covering the full funnel, from the first page view all the way through to a completed signup, with zero PII stored at any point.

What Tools and Prerequisites Do You Need Before Starting?

Four things need to be in place before you write a single line of analytics code: Node.js 18 or higher, a Next.js 14 project, the Claude Code CLI, and a Litlyx account. Getting these ready takes less than an hour, and the privacy posture is solid from the first minute. No browser identifiers, no personal data, no friction anywhere in the stack.

Installing Claude Code CLI

Claude Code is available across your terminal, IDE, desktop app, and browser, so you can install it wherever your development workflow lives. On macOS, Linux, and Windows, a native installer handles the setup. One requirement worth knowing: Claude Code requires a Claude Pro, Max, Team, or Enterprise subscription, or an Anthropic Console account. If you are already on Claude Pro, you are ready to go. The Console account option works well for teams who prefer API-key billing.

Once installed, run claude in your project root to confirm the CLI responds. That single check saves debugging time later.

Creating a Litlyx Project

Sign up at litlyx.com and create a new project from the dashboard. Litlyx generates a project ID and an API key immediately. Copy both into a .env.local file at your project root:

Litlyx is a privacy-first, EU-hosted, GDPR-compliant platform that collects no personal information, which means data-residency options and PII scrubbing are simply not things you need to touch. The GDPR-compliant defaults are already active. No identifiers are stored in the browser, so you can skip the banner configuration entirely and get straight to the meaningful work.

How Do You Define the Events That Actually Matter?

Before writing a single line of code, decide on three to five business-critical events. That single constraint separates analytics setups that generate real insight from ones that just accumulate noise.

The temptation is to track everything. Page loads, scroll depth, mouse movements, time on page. Event taxonomy design prevents the "firehose of pageviews" problem that plagues most marketing sites, where dashboards fill up with data but still cannot answer a basic question about the funnel. The discipline here is to map each event directly to a decision someone on your team will actually make.

For a Next.js marketing site, four events cover the full funnel cleanly:

• page_view - baseline traffic and entry-point visibility
• cta_click - which offers and copy generate intent
• signup_complete - the primary conversion signal
• demo_request - high-intent lead capture for sales

Each event name should answer a specific question. signup_complete tells you whether the onboarding flow is converting. cta_click tells you which hero variant is pulling clicks. When the marketing team opens the Litlyx dashboard, every metric visible should connect to a decision they can act on. That is the foundation of data-driven decisions.

Prompting Claude Code for an Event Schema

Once you have your event list, hand the planning work to Claude Code. Claude Code reads your codebase, edits files, and runs commands, inspecting your existing components before generating a schema that fits your actual project structure rather than a generic template.

A prompt that works well:

Claude Code will scan the repo, find your button components and form handlers, and produce a typed schema file. The output gives you a single source of truth for event names and payload shapes. Enforce consistent naming at this stage and your Litlyx dashboard stays readable weeks later; any marketer pulling a report will find events that map directly to the funnel stages they care about.

How Do You Install and Configure the Litlyx SDK with Claude Code?

A single well-crafted prompt to Claude Code is all it takes to install the Litlyx SDK, since Claude Code handles the package install, config file creation, and provider mounting in one pass. The result is a GDPR-compliant analytics platform wired into your Next.js app without touching a single browser identifier or fingerprinting API. Here is exactly how that plays out.

Start by opening your terminal in the project root with Claude Code active, then send this prompt:

Claude Code reads your directory structure, runs npm install @litlyx/litlyx, and writes both files. The whole sequence completes in under a minute.

The Generated litlyx.ts Config

Claude Code produces a config file similar to this:

The project ID comes from your .env.local file, never baked into source. Litlyx requires no personal data and no friction banners, so there is nothing sensitive to protect at the SDK level itself. Cookieless tracking works by reading anonymised request signals at the network layer: requests carry no client fingerprints, no persistent identifiers, and no user-linked metadata. That is why GDPR compliance holds by default rather than by configuration.

Add this line to .env.local:

Your project ID is available inside the Litlyx dashboard immediately after creating a project.

Mounting the Provider in layout.tsx

Claude Code opens app/layout.tsx and wraps your root layout with the provider:

Two files updated. No manual editing required. The provider initialises the SDK once at the application boundary, so every page and component downstream can call Lit.event() without any additional setup. No friction gate appears because no personal information is stored at any point in the pipeline. That is the Privacy-first analytics outcome we are building toward, and it is already in place before a single custom event fires.

How Do You Instrument Custom Events Across the Codebase?

Instrumenting custom events by hand is slow and error-prone. You will miss buttons buried in nested components and forms spread across feature folders. Claude Code solves this by scanning the entire codebase for event sites automatically, then writing the event calls in place. The result is consistent coverage without a manual audit.

Prompting Claude Code to Find and Tag CTAs

The prompt you give Claude Code matters here. Something like this works well:

Claude Code performs a grep-style search across every .tsx and .ts file, groups the matches by event type, and drafts the edits. Because it reads your file tree before writing a single character, it avoids the classic problem of patching one CTA and forgetting the modal version three folders away. Claude Code reads your codebase, edits files, and runs commands as a single agentic loop, which is precisely what thorough instrumentation demands.

Once you approve the diff, Claude Code writes all changes at once. Full coverage in minutes rather than hours.

The Lit.event() Call Pattern

Litlyx tracks custom events using the Lit.event() API, which takes an event name as its first argument and an optional metadata object as its second. Here is what a signup form component looks like before and after instrumentation:

Before:

After:

The metadata object is optional but valuable. Passing plan and source alongside the event name means your real-time dashboard can segment signups by acquisition channel from day one, turning raw counts into User-friendly insights your marketing team can act on.

Keep event names lowercase and underscore-separated across the whole project. Claude Code can enforce this convention if you include it in the prompt, and consistent naming is what separates a clean funnel report from an unmaintainable mess of near-duplicate events. Data-driven decisions start here, at the naming stage, not at the reporting stage.

How Do You Verify That Events Are Firing Correctly?

The fastest way to confirm your instrumentation is working is to run a smoke-test script and watch the real-time analytics dashboard light up within seconds. Claude Code writes that script for you, then fixes any failures it finds automatically.

Running the Smoke-Test Script

Once the SDK is mounted and your events are instrumented, give Claude Code this prompt:

"Write a Node.js smoke-test script that fires each of our five custom events against the Litlyx endpoint using our LITLYXPROJECTID environment variable. Log the HTTP response code for each call and exit with a non-zero code if any response is 4xx or 5xx."

Claude Code reads your event schema, generates the script, and runs it. The most common failure at this stage is a missing or misnamed environment variable. If LITLYX_PROJECT_ID is undefined, the SDK sends a malformed request that returns a 400 or 401 silently in the browser but loudly in a test script. That silence is the trap most teams fall into when they skip this step.

When Claude Code sees a 4xx response, it enters a self-correction loop. It checks your .env.local file, compares the variable name against the initialisation config, and proposes a fix before you have to ask. This is exactly the kind of routine debugging that Claude Code handles as an agentic coding tool, reading files and running commands without you switching context.

Reading the Litlyx Real-Time Dashboard

Open your Litlyx project and go to the live event stream view. Each event your smoke-test fires should appear within a few seconds, showing the event name and the metadata payload you attached. Check three things:

• The event name matches your taxonomy exactly (case-sensitive).
• The metadata object contains the fields you expect, such as plan_tier or cta_label.
• No duplicate events appear, which would indicate the provider mounted twice in layout.tsx.

Because Litlyx collects no personal data and requires no friction banners, every event you see in the stream represents a clean signal with no noise from drop-off or browser filtering. If all five events appear with the correct payload shape, your analytics setup is verified and ready for production.

What Does the Finished Analytics Setup Look Like?

Look, when Claude Code finishes its work, you have a clean, fully instrumented Next.js site with all five events firing reliably and a real-time Litlyx dashboard reflecting every user action within seconds. The funnel is visible from the first page_view through cta_click, demo_request, and signup_complete, giving your marketing team a complete picture of where users drop off and where they convert.

The Dashboard at a Glance

Open the Litlyx real-time dashboard and you will see a live event stream on the left, a funnel chart in the center, and per-event counts updating as traffic flows in. Key metrics visible at a glance include total sessions, unique visitor counts by country, top pages by engagement, and conversion rates between each named event. There are no sampling delays, no 24-hour data lag, and no opaque attribution models to second-guess. The signal is clean because the event taxonomy we designed upfront kept noise out of the data. Simple as that.

Privacy-First Analytics by Default

This is where the setup genuinely stands apart. Litlyx requires no personal data and no friction banners, so the friction that typically kills conversion rates on first-page load simply does not exist here. Every metric you see is collected within a fully GDPR-compliant, EU-hosted platform, with zero PII stored at any point. Compare that to a GA4 implementation: you would need a consent management platform, a banner, and a legal review of your data processing agreements before a single meaningful event could fire for opted-in users only.

Your marketing team can start making data-driven decisions from day one. The funnel data is accurate from the first session, not filtered through acceptance rates that can suppress 30 to 50 percent of real traffic in European markets. That is the practical payoff of a Privacy-first analytics approach built correctly from the start.

Where Can You Take This Setup Next?

The Next.js and Litlyx foundation you have built is a starting point, not a ceiling. The same Claude Code workflow that wired your client-side events can push instrumentation deeper into your stack and smarter into your reporting.

The most immediate next step is adding server-side event calls to your checkout flows and internal API routes. Because Litlyx works with all modern JavaScript and TypeScript frameworks, the Node SDK drops into any Express route or Next.js API handler with the same Lit.event() pattern you already know. Server-side calls are especially useful for high-value actions where you want a guaranteed signal, independent of what any browser script does.

From there, consider building a small Claude Code skill that queries the Litlyx REST API and returns natural-language traffic summaries. You prompt it with something like "how did our signup_complete rate change this week?" and it fetches, interprets, and replies. That kind of workflow turns raw event data into User-friendly insights your whole marketing team can actually use.

Webhook-based alerts are another practical extension. Wire a Litlyx webhook to a Slack channel and set a threshold on your conversion rate. When the number drops, your team knows within minutes rather than during the next weekly review.

Finally, the same pattern transfers to Vue, SvelteKit, or plain HTML sites. Claude Code reads your codebase, edits files, and runs commands regardless of the framework, so the prompts you refined here carry over almost verbatim. The data-driven decisions you make from day one will only get sharper as the event stream grows., -