Clicky Event Tracking Setup

Event Tracking Setup

Clicky's event tracking captures user interactions beyond page views. This guide covers setting up goals in the Clicky dashboard and implementing tracking code on your site.

Dashboard Configuration

Creating Goals

1. Log into your Clicky dashboard
2. Navigate to Preferences → Goals
3. Click Add a Goal
4. Configure the goal:
   • Goal Name: Unique identifier (used in tracking code)
   • Goal Title: Display name in reports
   • Revenue: Default value (optional)

Goal Types

URL-Based Goals: Track when visitors reach specific pages:

• Thank you pages
• Order confirmation pages
• Download complete pages

Event-Based Goals: Track custom interactions via JavaScript:

• Button clicks
• Form submissions
• Video plays

Funnel Setup

For multi-step processes:

1. Go to Preferences → Funnels
2. Click Add a Funnel
3. Define sequential steps:
   • Step 1: Cart page
   • Step 2: Checkout
   • Step 3: Payment
   • Step 4: Confirmation
4. Save the funnel

JavaScript Implementation

Basic Goal Tracking

// Simple goal
clicky.goal('newsletter_signup');

// Goal with title
clicky.goal('purchase', 0, 'Product Purchase');

// Goal with revenue
clicky.goal('purchase', 99.99, 'Premium Plan');

Click Tracking

// Track button click
document.getElementById('signup-btn').addEventListener('click', function() {
  clicky.goal('signup_click');
});

// Track multiple buttons
document.querySelectorAll('.cta-button').forEach(function(btn) {
  btn.addEventListener('click', function() {
    clicky.goal('cta_click', 0, this.dataset.ctaName);
  });
});

Form Submission Tracking

document.getElementById('contact-form').addEventListener('submit', function(e) {
  clicky.goal('form_submit', 0, 'Contact Form');
});

Implementation Patterns

Wrapper Function

Create a reusable tracking function:

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

// Usage
trackGoal('signup', 0, 'User Signup');
trackGoal('purchase', 49.99, 'Monthly Plan');

Data Attributes

Use data attributes for flexible tracking:

<button data-goal="download" data-goal-title="PDF Download">Download PDF</button>

document.querySelectorAll('[data-goal]').forEach(function(el) {
  el.addEventListener('click', function() {
    clicky.goal(
      this.dataset.goal,
      this.dataset.goalRevenue || 0,
      this.dataset.goalTitle || this.dataset.goal
    );
  });
});

Deferred Tracking

Wait for Clicky to load:

function waitForClicky(callback, maxWait) {
  var waited = 0;
  var interval = setInterval(function() {
    if (typeof clicky !== 'undefined') {
      clearInterval(interval);
      callback();
    } else if (waited >= (maxWait || 5000)) {
      clearInterval(interval);
      console.warn('Clicky not available');
    }
    waited += 100;
  }, 100);
}

// Usage
waitForClicky(function() {
  clicky.goal('page_loaded');
});

Verification

Real-Time Testing

1. Open your Clicky dashboard
2. Go to Visitors → Real-time
3. Trigger the goal on your website
4. Watch for the event in the activity feed

Debug Logging

function trackGoalDebug(name, revenue, title) {
  console.log('Tracking goal:', { name, revenue, title });
  if (typeof clicky !== 'undefined') {
    clicky.goal(name, revenue || 0, title || '');
    console.log('Goal tracked successfully');
  } else {
    console.error('Clicky not loaded');
  }
}

Goal Reports

After collecting data:

1. Go to Visitors → Goals
2. Review goal completions
3. Analyze conversion rates by traffic source