TKTrackkit
Modern event tracking for web applications

Ship consistent dataLayer events without rebuilding every component.

nextjs-trackkit gives teams a lightweight provider, React components and hooks, data attributes, typed helpers, and custom event support for generic analytics tracking.

Read setup guideExplore demos
Package highlights

One provider, three easy tracking methods.

Use React components, data attributes, or auto discovery for common clicks. All methods push the same consistent dataLayer event schema.

1.3.1Latest version
6Predefined events
3Tracking methods
What's new

Automatic event discovery in v1.3.1

New in 1.3.1

Track common clicks without adding data-track-click everywhere

Enable autoDiscovery in the provider and TrackKit automatically detects links, buttons, submit controls, and role="button" elements. It sends the same standardized content_cta_click and content_control_interaction events to window.dataLayer. Manual data-track-* tracking still takes priority when present.

  • Links and submit actions map to CTA click events.
  • Buttons, tabs, and toggles map to control interaction events.
  • Section headings can be inferred for missing content names.
Setup guideLive examples
What you get

Built for generic event collection.

React API

Track with components and hooks

Define tracking context once at a section level, then let reusable links, buttons, cards, and design-system components inherit those values automatically.

Data Attributes

Track directly in markup

Add view and click attributes to existing components when you want tracking without importing a React tracking component into every file.

Auto Discovery

Detect clicks automatically

Turn on autoDiscovery in the provider to track plain links and buttons without adding data attributes to every element.

Advanced

Use helpers and custom events

Fire video events, completion events, custom event names, and custom parameters when your analytics model needs more control.

Recommended

Choose the method that fits each component.

  • Use the React API for reusable sections, CTAs, and design systems.
  • Use data attributes for existing markup and simple page content.
  • Use manual helpers for videos, completions, and custom event flows.
  • Use custom parameters for campaigns, experiments, and business metadata.
Next steps

Use this website to learn and test TrackKit.

  • Open the Setup page to compare the React API and data-attribute API.
  • Open the Demo page to fire predefined and custom event examples.
  • Open the SPA page to test viewport tracking across route changes.
  • Use the Playground and DataLayer Checker in Chrome to inspect payloads.
Go to SetupGo to DemoGo to SPAGo to Playground