Clicky Event Tracking | Blue Frog Docs

Clicky Event Tracking

Learn how to implement custom event tracking in Clicky to measure user interactions, conversions, and engagement metrics.

Event Tracking Overview

Clicky's event tracking lets you capture user interactions beyond basic page views. Track button clicks, form submissions, video plays, downloads, and any custom action that matters to your business.

Events in Clicky consist of a goal name and optional metadata including revenue values, titles, and custom properties. The tracking API is straightforward, and events appear in your dashboard immediately thanks to Clicky's real-time processing.

 

 

Basic Event Tracking

Using the JavaScript API

The simplest way to track an event is using the clicky.goal() function:

// Basic event tracking
clicky.goal('button_click');

// Event with a descriptive title
clicky.goal('signup', 0, 'Newsletter Signup');

The function accepts three parameters: goal name (required), revenue value (optional), and title (optional).

Tracking Revenue Events

For e-commerce conversions and monetized actions, include the revenue value:

// Track a purchase with revenue
clicky.goal('purchase', 49.99, 'Premium Plan Purchase');

// Track subscription signup with monthly value
clicky.goal('subscription', 29.00, 'Monthly Subscription');

Revenue values aggregate in your goals report, giving you insight into the monetary impact of different traffic sources and campaigns.

Click Event Tracking

Track clicks on specific elements by adding event listeners:

// Track CTA button clicks
document.getElementById('cta-button').addEventListener('click', function() {
  clicky.goal('cta_click', 0, 'Hero CTA Button');
});

// Track navigation clicks
document.querySelectorAll('.nav-link').forEach(function(link) {
  link.addEventListener('click', function() {
    clicky.goal('nav_click', 0, this.textContent);
  });
});

 

 

Advanced Event Tracking

Tracking Form Submissions

Capture form submission events with relevant metadata:

document.getElementById('contact-form').addEventListener('submit', function(e) {
  var formType = this.getAttribute('data-form-type') || 'contact';
  clicky.goal('form_submit', 0, formType + ' Form Submission');
});

For multi-step forms, track progress through each step:

function trackFormStep(stepNumber, stepName) {
  clicky.goal('form_step', 0, 'Step ' + stepNumber + ': ' + stepName);
}

// Usage
trackFormStep(1, 'Personal Information');
trackFormStep(2, 'Address Details');
trackFormStep(3, 'Payment Information');

Tracking Downloads

Monitor file downloads by intercepting download link clicks:

document.querySelectorAll('a[href$=".pdf"], a[href$=".zip"], a[href$=".doc"]').forEach(function(link) {
  link.addEventListener('click', function() {
    var filename = this.href.split('/').pop();
    clicky.goal('download', 0, filename);
  });
});

Video Engagement Tracking

Track video player interactions for embedded content:

var video = document.getElementById('promo-video');

video.addEventListener('play', function() {
  clicky.goal('video_play', 0, 'Promo Video Started');
});

video.addEventListener('ended', function() {
  clicky.goal('video_complete', 0, 'Promo Video Completed');
});

// Track video progress milestones
var milestones = [25, 50, 75];
var trackedMilestones = [];

video.addEventListener('timeupdate', function() {
  var percent = Math.floor((this.currentTime / this.duration) * 100);
  milestones.forEach(function(milestone) {
    if (percent >= milestone && trackedMilestones.indexOf(milestone) === -1) {
      trackedMilestones.push(milestone);
      clicky.goal('video_progress', 0, 'Video ' + milestone + '% Watched');
    }
  });
});

Scroll Depth Tracking

Measure how far users scroll down your pages:

var scrollMilestones = [25, 50, 75, 100];
var trackedScrolls = [];

window.addEventListener('scroll', function() {
  var scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);

  scrollMilestones.forEach(function(milestone) {
    if (scrollPercent >= milestone && trackedScrolls.indexOf(milestone) === -1) {
      trackedScrolls.push(milestone);
      clicky.goal('scroll_depth', 0, milestone + '% Scroll Depth');
    }
  });
});

 

 

E-commerce Event Tracking

Product Interactions

Track how users interact with products before purchasing:

// Product view
function trackProductView(productName, productId, price) {
  clicky.goal('product_view', 0, productName);
}

// Add to cart
function trackAddToCart(productName, productId, price, quantity) {
  clicky.goal('add_to_cart', price * quantity, productName + ' (Qty: ' + quantity + ')');
}

// Remove from cart
function trackRemoveFromCart(productName) {
  clicky.goal('remove_from_cart', 0, productName);
}

Checkout Funnel

Track progression through your checkout process:

// Checkout initiated
clicky.goal('checkout_start', 0, 'Checkout Started');

// Shipping info completed
clicky.goal('checkout_shipping', 0, 'Shipping Information Entered');

// Payment info entered
clicky.goal('checkout_payment', 0, 'Payment Information Entered');

// Order completed
function trackPurchase(orderId, orderTotal, itemCount) {
  clicky.goal('purchase_complete', orderTotal, 'Order #' + orderId + ' - ' + itemCount + ' items');
}

Wishlist and Comparison

Track shopping research behavior:

// Add to wishlist
function trackWishlistAdd(productName) {
  clicky.goal('wishlist_add', 0, productName);
}

// Product comparison
function trackCompareProducts(productNames) {
  clicky.goal('compare_products', 0, productNames.join(' vs '));
}

 

 

SaaS Event Tracking

User Onboarding

Track new user progress through onboarding:

// Account created
clicky.goal('signup_complete', 0, 'Account Created');

// Onboarding steps
function trackOnboardingStep(step, stepName) {
  clicky.goal('onboarding_step', 0, 'Step ' + step + ': ' + stepName);
}

// Onboarding completed
clicky.goal('onboarding_complete', 0, 'Onboarding Completed');

Feature Usage

Monitor which features users engage with:

function trackFeatureUse(featureName, context) {
  var title = featureName;
  if (context) {
    title += ' - ' + context;
  }
  clicky.goal('feature_use', 0, title);
}

// Examples
trackFeatureUse('Dashboard Export', 'PDF');
trackFeatureUse('Report Builder', 'Custom Report');
trackFeatureUse('Team Invite', 'Email Invite');

Subscription Events

Track subscription lifecycle events:

// Trial started
clicky.goal('trial_start', 0, 'Free Trial Started');

// Plan selection
function trackPlanSelect(planName, planPrice) {
  clicky.goal('plan_select', planPrice, planName + ' Plan Selected');
}

// Subscription activated
function trackSubscription(planName, monthlyValue) {
  clicky.goal('subscription_start', monthlyValue, planName + ' Subscription');
}

// Upgrade
function trackUpgrade(oldPlan, newPlan, additionalRevenue) {
  clicky.goal('plan_upgrade', additionalRevenue, oldPlan + ' to ' + newPlan);
}

 

 

Goal Configuration

Creating Goals in Clicky

While you can track events dynamically without pre-configuration, setting up goals in Clicky provides additional benefits:

  1. Goal Reports: Pre-configured goals appear in dedicated reports with conversion rate calculations
  2. Funnel Visualization: Define multi-step funnels to visualize drop-off points
  3. Revenue Tracking: Assign default revenue values for goals without explicit values

Setting Up Goals

In your Clicky dashboard:

  1. Navigate to Preferences → Goals
  2. Click Add New Goal
  3. Configure the goal:
    • Name: Match the goal name used in your clicky.goal() calls
    • Revenue: Default revenue value (if applicable)
    • Type: Page view, custom event, or download

Funnel Configuration

For multi-step processes:

  1. Go to Preferences → Funnels
  2. Create a new funnel with sequential steps
  3. Define each step using goal names or URL patterns
  4. Save and monitor conversion rates between steps

 

 

Event Tracking Best Practices

Naming Conventions

Use consistent, descriptive goal names:

// Good: descriptive and consistent
clicky.goal('form_submit_contact', 0, 'Contact Form');
clicky.goal('form_submit_newsletter', 0, 'Newsletter Signup');
clicky.goal('cta_click_hero', 0, 'Hero Section CTA');

// Avoid: vague or inconsistent
clicky.goal('submit');
clicky.goal('click');
clicky.goal('Button1');

Validation Before Tracking

Ensure events are meaningful:

function trackEvent(goalName, revenue, title) {
  // Validate inputs
  if (!goalName || typeof goalName !== 'string') {
    console.warn('Invalid goal name');
    return;
  }

  // Ensure Clicky is loaded
  if (typeof clicky !== 'undefined' && typeof clicky.goal === 'function') {
    clicky.goal(goalName, revenue || 0, title || '');
  }
}

Avoiding Duplicate Events

Prevent multiple event fires for the same action:

var trackedEvents = {};

function trackOnce(goalName, revenue, title) {
  if (trackedEvents[goalName]) {
    return;
  }
  trackedEvents[goalName] = true;
  clicky.goal(goalName, revenue || 0, title || '');
}

// Use for one-time events
trackOnce('first_purchase', 99.99, 'First Order');

 

 

Debugging Event Tracking

Console Logging

Add logging during development:

function trackEventDebug(goalName, revenue, title) {
  console.log('Clicky Event:', { goal: goalName, revenue: revenue, title: title });

  if (typeof clicky !== 'undefined') {
    clicky.goal(goalName, revenue || 0, title || '');
  } else {
    console.warn('Clicky not loaded');
  }
}

Real-Time Verification

Use Clicky's real-time dashboard to verify events are tracking:

  1. Open your Clicky dashboard
  2. Navigate to Visitors → Real-time
  3. Perform the tracked action on your site
  4. Watch for the event to appear in the activity feed

Common Issues

Events not appearing:

  • Verify the Clicky tracking code is installed correctly
  • Check for JavaScript errors in the browser console
  • Ensure clicky.goal() is called after the tracking script loads

Revenue values incorrect:

  • Pass revenue as a number, not a string
  • Don't include currency symbols in the revenue parameter

Duplicate events:

  • Check for multiple event listeners on the same element
  • Use the trackOnce pattern for single-fire events
↑ Back to top
// SYS.FOOTER