How to Track All Button Clicks Using the Snowplow JavaScript Tracker
Tracking button clicks on your website is essential for understanding user interactions, measuring engagement, and optimizing your site’s UX. While the Snowplow JavaScript Tracker offers built-in link click tracking, capturing all button clicks requires a slightly different approach.
This guide walks you through setting up comprehensive button click tracking using Snowplow’s flexible data capture capabilities.
Q: Can Snowplow automatically track button clicks like it tracks link clicks?
By default, the Snowplow JavaScript Tracker supports link click tracking via the enableLinkClickTracking() method. However, button clicks aren’t automatically tracked since they don’t inherently trigger navigation events.
Fortunately, capturing all button clicks is possible with a few lines of JavaScript — no need to hack the tracker!
Q: How do I track button clicks with Snowplow?
Here’s a simple way to set up button click tracking:
Step 1: Initialize the Snowplow Tracker
Make sure you have the JavaScript Tracker set up on your site.
Step 2: Add a Global Button Click Event Listener
Place this script in your website’s global JS file or a script tag:
document.addEventListener("click", function(event) {
const element = event.target;
if (element.tagName === "BUTTON" || element.type === "button") {
window.snowplow("trackSelfDescribingEvent", {
schema: "iglu:com.example/button_click/jsonschema/1-0-0",
data: {
buttonId: element.id || null,
buttonText: element.innerText || null,
buttonClass: element.className || null,
pageUrl: window.location.href,
timestamp: new Date().toISOString()
}
});
}
});
Step 3: Set Up the Self-Describing Event
In the example above, we use a self-describing event to capture button click details. You’ll need to define a custom schema for this event:
Example Schema:
{
"$schema": "http://iglucentral.com/schemas/com.snowplowanalytics.self-desc/jsonschema/1-0-0",
"self": {
"vendor": "com.example",
"name": "button_click",
"format": "jsonschema",
"version": "1-0-0"
},
"type": "object",
"properties": {
"buttonId": {"type": ["string", "null"]},
"buttonText": {"type": ["string", "null"]},
"buttonClass": {"type": ["string", "null"]},
"pageUrl": {"type": "string"},
"timestamp": {"type": "string", "format": "date-time"}
},
"required": ["pageUrl", "timestamp"]
}
Register the Schema:
Make sure to upload the schema to your Iglu schema registry.
Q: How do I see button click data in my warehouse?
Snowplow events typically land in your warehouse (e.g., Redshift, BigQuery, Databricks) via the Enrichment Pipeline. You can query button click events as follows:
Example Query (Redshift):
SELECT
event_id,
derived_tstamp,
buttonId,
buttonText,
buttonClass,
pageUrl
FROM atomic.com_example_button_click_1
ORDER BY derived_tstamp DESC;
Q: Can I track more than just the button ID and text?
Yes! You can enhance the event payload to capture any attribute, such as:
- Data attributes (e.g., data-tracking-id)
- Click coordinates
- Browser metadata
Simply expand the data object in the script:
data: {
buttonId: element.id || null,
buttonText: element.innerText || null,
buttonClass: element.className || null,
buttonDataAttr: element.getAttribute("data-tracking-id") || null,
clickX: event.clientX,
clickY: event.clientY,
pageUrl: window.location.href,
timestamp: new Date().toISOString()
}
Q: Are there best practices for tracking all button clicks?
Yes, here are some tips to ensure accurate and useful data:
- Avoid duplicate events: Prevent multiple clicks from firing multiple events by adding a debounce function.
- Filter out non-essential buttons: You may want to exclude buttons that don’t represent meaningful user interactions (e.g., UI toggles).
- Track context: Include page or session context to better understand when and why users click specific buttons.
Final Thoughts
With Snowplow’s flexible tracking model, capturing button clicks becomes straightforward and highly customizable. This approach gives you full control over which clicks are tracked and what contextual data you capture — far beyond what’s possible with out-of-the-box analytics solutions.
Snowplow’s event-based approach enables a privacy-first, customized tracking solution that scales with your business needs.