Getting Started

Track Custom Events

One line of JavaScript turns any action on your site into a metric you can watch.

Page views tell you people came; custom events tell you they did the thing you built the site for — signed up, booked a table, requested a quote, started a checkout. Once you track the actions that actually pay your bills, every marketing question gets easier: not “which page got traffic?” but “which page produced customers?”.

Setting one up is a single JavaScript call. You (or your developer) add one line where the action happens — a form’s success handler, a button’s click — and from that moment the event appears in the Events card on your Analytics page, alongside your page views and the events Crafty Meerkat already tracks automatically.

A useful head start: four kinds of events need no setup at all. Outbound link clicks, file downloads, 404 hits, and internal site searches are captured automatically by the snippet. Save custom events for the actions unique to your business.

How it works

The tracking snippet exposes a small function, window.craftymeerkat.event(). You call it with an event name (like “signup”) and, optionally, extra details (like which plan was chosen). Each call records one event tied to the visitor’s session, so events connect to the pages, referrer, and campaign that led to them. Event names are yours to invent — pick short, consistent ones like “signup” or “quote-request”.

The custom events API

// Simple event
window.craftymeerkat.event('newsletter-signup')

// Event with extra details
window.craftymeerkat.event('signup', { plan: 'growth' })

Step by step

1
Decide which actions matter
Start with the one action that most directly means money or a lead: a completed contact form for a law office, an online order for a bakery, a booking for a salon. One or two well-chosen events beat a dozen noisy ones.
2
Add the event call where the action happens
Place the call in the code that runs when the action succeeds — a form’s submit handler, a “thank you” confirmation, a button’s click handler. If someone else maintains your site, this step plus the snippet below is all they need.
```
// Track a conversion when a form is submitted
window.craftymeerkat.event('signup', { plan: 'growth' })

// Track an outbound click or download
window.craftymeerkat.event('download', { file: 'pricing.pdf' })
```
3
Test it yourself
Perform the action on your own site — submit the form, click the button — then check the Events card on your Analytics page. The event should appear within seconds, just like a page view does.
4
Turn the event into a goal
In your dashboard, create a custom-event goal that matches your event name (you can define up to 10 goals per site). Now the dashboard shows a conversion rate for it, the weekly AI report compares it week-over-week, and Stats Chat can answer questions like “how many signups came from the newsletter?”.

Tips from the den

◆Name events in plain lowercase words with hyphens — “quote-request”, not “QuoteRequestFinalV2”. You will read these names in charts for years.
◆Fire the event on success, not on attempt: track the form submission that went through, not every click of the submit button.
◆Check for outbound clicks, downloads, 404s, and site searches in your Events card before writing any code — those four are already tracked for you.

See it live — no signup

The demo dashboard runs on a real site with real traffic.

Open the live demo →

Common questions

Do I need custom events, or are page-visit goals enough?

If a success has its own page — like a /thank-you page after a form — a page-visit goal tracks it with zero code. Custom events shine when there is no page change: a button click, a popup form, a single-page checkout. Many sites use both.

What extra details can I attach to an event?

Anything useful as a short label — a plan name, a file name, a product category. Keep it non-personal: never include names, email addresses, or anything that identifies an individual. The event name plus one or two labels is usually plenty.

What happens if I call the event function before the snippet has loaded?

Because the snippet loads asynchronously, a call fired in the first instant of a page load could land before window.craftymeerkat exists. In practice this rarely matters — events fire on user actions, well after load. If you trigger events immediately on page load, have your developer add a simple existence check first.