Components and hooks
The latest package includes TrackKitSection, TrackKitLink, TrackKitButton, and useTrackKitCta so reusable components can inherit tracking context from parent sections.
Demo
Test TrackKit events across all tracking methods.
Use this page with the Google Chrome extension DataLayer Checker to inspect React API, data-attribute, auto-discovery, manual helper, and custom event payloads as they are pushed to `window.dataLayer`.
Tip: Install the Chrome extension DataLayer Checker, open DevTools, and click the controls below to inspect event names, content data, CTA data, custom parameters, and response values.
What this page covers
Three tracking methods, plus advanced event helpers.
Markup-first tracking
Existing data-track attributes still work for viewport, click, control, download, and inherited context examples.
Zero-markup clicks
Enable autoDiscovery in the provider to detect plain links and buttons automatically. Scroll to the auto-discovery section below.
Helpers and custom events
Manual helpers cover video, progress, completion, custom parameters, and fully custom event names.
Auto discovery
Click elements detected automatically — no data-track-click required.
These controls are plain HTML. With autoDiscovery.enabled in the provider, TrackKit maps each element to content_cta_click or content_control_interaction.
Internal link
a[href] navigation inside the app fires content_cta_click.
External link
External destinations are inferred from the href.
View on GitHubDownload link
Download links set File media and Download target automatically.
Download checklistSubmit button
button[type="submit"] and submit inputs map to CTA clicks.
Submit input
input[type="submit"] is detected the same way as a submit button.
Button
button[type="button"] fires content_control_interaction.
Button input
input[type="button"] is treated as a control interaction.
role="button"
Custom elements with button semantics are included in auto discovery.
Tab
role="tab" maps to control interactions for tabs and segmented UI.
Toggle
Elements with aria-pressed are classified as controls.
Accordion
aria-expanded helps classify expand/collapse controls.
Data-attribute examples
Automatic tracking from markup.
content_in_viewport
This card fires automatically when it enters the viewport through data-track-view attributes and inherited section context.
content_cta_click
Click this link to trigger a data-attribute CTA click event with visible link text and destination details.
Open data-attribute CTAcontent_cta_click
In production, the same CTA payload can come from TrackKitLink or useTrackKitCta when you prefer reusable React components over data attributes.
Manual helper examples
Events that depend on component or workflow state.
content_control_interaction
Fire a tab or control interaction with action text and input metadata.
video_engagement
Simulate a video play event with title, id, length, category, and page location.
video_progress
Simulate a 50% video progress milestone for media analytics.
Completion, download, and custom events
Special cases with clear payload rules.
action_completion
Simulate a successful form or workflow completion with response status and custom metadata.
Download CTA
Download CTAs force content media to File and target to Download so reporting can separate file downloads from normal navigation.
Download checklisttrackCustomEvent
Send a fully custom event name and arbitrary parameters for flows outside the predefined event schema.
Last dataLayer entries
Click any demo control, then refresh this log or inspect the same payloads in DataLayer Checker.
No events yet.
Suggested inspection flow
- Install DataLayer Checker in Google Chrome.
- Open this Demo page and clear previous dataLayer entries.
- Test one data-attribute event and one manual helper event.
- Review the Setup page for React API component examples.
- Confirm event names and nested parameters match your tracking variables.