Track Button Clicks

Learn how to track button clicks and link interactions to measure user engagement and conversion actions.

Quick Start

Add the data-narrowbeam-action-name attribute to any button or link:

<button data-narrowbeam-action-name="signup-click">
  Sign Up
</button>

That's it! Narrowbeam automatically tracks clicks on elements with this attribute.

Common Use Cases

Call-to-Action Buttons

<button
  data-narrowbeam-action-name="cta-signup"
  className="btn btn-primary"
>
  Get Started Free
</button>

Navigation Links

<a
  href="/pricing"
  data-narrowbeam-action-name="nav-pricing"
>
  View Pricing
</a>

Download Buttons

<a
  href="/whitepaper.pdf"
  download
  data-narrowbeam-action-name="whitepaper-download"
>
  Download Whitepaper
</a>

Social Share Buttons

<button
  data-narrowbeam-action-name="share-twitter"
  onClick={shareOnTwitter}
>
  Share on Twitter
</button>

Feature Usage

<button
  data-narrowbeam-action-name="feature-export"
  onClick={handleExport}
>
  Export Data
</button>

Using the JavaScript API

For dynamic tracking or programmatic clicks, use the JavaScript API:

// Track a click action
window.narrowbeam.trackAction('signup-click');

// With optional value
window.narrowbeam.trackAction('purchase-complete', '99.99');

Example: Conditional Tracking

function handleButtonClick() {
  // Your business logic
  if (isUserEligible()) {
    // Track the click
    window.narrowbeam.trackAction('eligible-user-click');
    showPremiumFeature();
  } else {
    window.narrowbeam.trackAction('ineligible-user-click');
    showUpgradePrompt();
  }
}

Naming Best Practices

Action Naming Guidelines

Use lowercase with hyphens: signup-click not SignUpClick
Be descriptive: cta-hero-signup better than button1
Include context: pricing-page-trial-start tells you where and what
Group related actions: nav-*, cta-*, feature-*
Be consistent: Pick a naming scheme and stick to it

Good Examples

cta-header-signup
nav-footer-contact
feature-export-csv
download-whitepaper-2024
share-social-twitter

Bad Examples

btn1
Click_Here
signup
DOWNLOAD
abc123

Tracking Multiple CTAs

When you have the same CTA in different locations, use unique names to differentiate:

<!-- Hero section -->
<button data-narrowbeam-action-name="cta-hero-signup">
  Sign Up
</button>

<!-- Pricing section -->
<button data-narrowbeam-action-name="cta-pricing-signup">
  Sign Up
</button>

<!-- Footer -->
<button data-narrowbeam-action-name="cta-footer-signup">
  Sign Up
</button>

Now you can compare which placement drives the most signups!

Viewing Click Data

Once you're tracking clicks, view the data in your Narrowbeam dashboard:

Create a widget with the Actions metric
Group by action_name dimension
View top clicked elements
Filter by specific actions for detailed analysis

Advanced: A/B Testing

Track different variations of the same button:

// Variation A (existing)
<button data-narrowbeam-action-name="signup-variant-a">
  Get Started Free
</button>

// Variation B (new)
<button data-narrowbeam-action-name="signup-variant-b">
  Start Your Free Trial
</button>

Compare click rates to determine which variation performs better!

Troubleshooting

Clicks Not Appearing

If your clicks aren't showing up:

Verify the Narrowbeam script is installed
Check for typos in the attribute name: data-narrowbeam-action-name
Ensure the element is actually being clicked (not disabled or hidden)
Check browser console for JavaScript errors
Wait a few seconds for data to appear in the dashboard

Duplicate Events

If you see duplicate events:

Check that you haven't added both the attribute AND JavaScript tracking
Ensure you're not loading the Narrowbeam script multiple times
Verify event handlers aren't being registered multiple times (in React/Vue apps)