Configuration

Custom Events

Track any action on your website using custom JavaScript events. Perfect for AJAX forms, single-page apps, and complex conversion flows.

When to Use Custom Events

Use custom events when:

The conversion doesn't redirect to a new page (AJAX forms)
You're using a single-page application (React, Vue, etc.)
You want to track intermediate actions (add to cart, start checkout)
The thank-you page URL is dynamic and can't be matched

Basic Usage

Sending an Event

Call the Clickyard function with your website ID and event name:

// Basic syntax
window.Clickyard('YOUR-WEBSITE-ID', 'event_name');

// Example: Track a purchase
window.Clickyard('abc123-def456-...', 'purchase');

Important: Replace YOUR-WEBSITE-ID with your actual website ID from the Clickyard dashboard.

Creating an Event Goal

After sending the event, create a corresponding goal in Clickyard:

Go to your dashboard
Click "Goals" on your website
Add a new goal with type "Event"
Enter the exact event name (e.g., purchase)
Save

Common Examples

E-commerce Purchase

// After successful payment
fetch('/api/checkout', { method: 'POST', body: formData })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // Track the purchase
      window.Clickyard('YOUR-WEBSITE-ID', 'purchase');
    }
  });

AJAX Form Submission

// jQuery AJAX form
$('#contact-form').on('submit', function(e) {
  e.preventDefault();

  $.ajax({
    url: '/submit',
    method: 'POST',
    data: $(this).serialize(),
    success: function() {
      // Track the lead
      window.Clickyard('YOUR-WEBSITE-ID', 'lead');
      // Show success message
      $('#success-message').show();
    }
  });
});

Add to Cart

// React example
function AddToCartButton({ productId }) {
  const handleClick = async () => {
    await addToCart(productId);

    // Track add to cart
    window.Clickyard('YOUR-WEBSITE-ID', 'add_to_cart');
  };

  return <button onClick={handleClick}>Add to Cart</button>;
}

User Registration

// Vue 3 example
async function registerUser() {
  try {
    await api.register(formData);

    // Track signup
    window.Clickyard('YOUR-WEBSITE-ID', 'signup');

    router.push('/dashboard');
  } catch (error) {
    // Handle error
  }
}

Platform Integrations

Shopify

Add this to Settings → Checkout → Additional Scripts:

<script>
  if (typeof Clickyard !== 'undefined') {
    Clickyard('YOUR-WEBSITE-ID', 'purchase');
  }
</script>

WooCommerce

Add this to your theme's functions.php:

add_action('woocommerce_thankyou', 'clickyard_track_purchase');
function clickyard_track_purchase($order_id) {
    ?>
    <script>
        if (typeof Clickyard !== 'undefined') {
            Clickyard('YOUR-WEBSITE-ID', 'purchase');
        }
    </script>
    <?php
}

Tilda Forms

Add this to a T123 HTML block on your form page:

<script>
  // Listen for Tilda form success
  window.addEventListener('tildaform:aftersuccess', function() {
    if (typeof Clickyard !== 'undefined') {
      Clickyard('YOUR-WEBSITE-ID', 'lead');
    }
  });
</script>

Event Naming Guidelines

Good event names:

purchasesignupleadadd_to_cartstart_checkoutdownload

Avoid:

• Spaces in event names (use underscores instead)
• Special characters other than underscores
• Very long event names
• Generic names like "click" or "submit"

Checking if Clickyard is Loaded

Always check if the Clickyard script is loaded before sending events:

// Safe way to send events
if (typeof window.Clickyard !== 'undefined') {
  window.Clickyard('YOUR-WEBSITE-ID', 'purchase');
}

// Or with optional chaining (modern browsers)
window.Clickyard?.('YOUR-WEBSITE-ID', 'purchase');

This prevents errors if the script is blocked by ad blockers or hasn't loaded yet.

Debugging Events

To verify your events are being sent:

Open browser Developer Tools (F12)
Go to the Network tab
Filter by clickyard
Trigger your event
Look for a request to the analytics endpoint with your event in the payload

You can also check the Clickyard dashboard — conversions should appear within a few minutes.