Step by step guide to creating custom events in Smartlook for advanced analytics

If you’re tired of drowning in useless analytics charts and want to actually understand how people use your app or site, you’re in the right place. This guide is for anyone who wants to go beyond the basics with Smartlook and set up custom events that track what matters to you, not just what the tool thinks you care about.

No fluff, no empty promises—just actual steps for defining, creating, and using custom events in Smartlook, plus some honest advice on what’s worth your time (and what isn’t).

Why Custom Events? (And Where Analytics Usually Go Wrong)

Most analytics tools bombard you with dashboards and “insights” that don’t actually tell you what’s going on. Pageviews and bounce rates are fine, but they rarely answer real questions like:

  • Are users actually using the new feature we shipped?
  • Which form field causes the most drop-offs?
  • Do people ever click that “Contact Sales” button, or is it just decoration?

Custom events let you track these things your way. You’re not limited to Smartlook’s default events—you can define exactly what matters for your product or business.

Short version: If you care about real user behavior, you need to set up custom events.

Step 1: Get Clear on What You Want to Track

Before you touch Smartlook, take a few minutes to decide what questions you want to answer. This is the part most people skip, and it’s why their analytics are useless.

Ask yourself: - What are the 1–3 actions that matter most for your users or business? - Are there critical moments (e.g., signing up, clicking “Buy”, finishing onboarding)? - Where do users typically get stuck or drop off?

Pro tip: Don’t try to track everything. You’ll end up with noisy data and no clear insights. Start small, and add more events only if you actually need them.

Example events:
- Clicking the “Sign Up” button
- Completing checkout
- Opening a specific feature or modal
- Submitting a support ticket

Write these down somewhere. You’ll need them in the next step.

Step 2: Choose How You’ll Set Up Events (Codeless vs. JavaScript)

Smartlook gives you two ways to create custom events:

  • Codeless Events: Use Smartlook’s visual interface to define events based on clicks, page views, or CSS selectors. No code needed.
  • JavaScript Events: Fire events manually from your code, which is more flexible but requires developer access.

Which should you use?

  • Codeless events are perfect for marketers, PMs, or anyone who doesn’t want to touch code. They’re great for tracking simple actions like button clicks or URL visits.
  • JavaScript events are better for complex or conditional actions—like tracking form submissions, feature usage, or anything that happens dynamically.

If you have developer resources, JavaScript events are more reliable and less likely to break if your UI changes. Codeless events are faster to set up, but can get flaky if your site structure changes.

Step 3: Setting Up Codeless Custom Events

If you want the fast, no-code approach, here’s what to do:

  1. Log into Smartlook and open your project dashboard.
  2. Go to the “Events” section in the sidebar.
  3. Click “Create Event” and choose “Codeless Event”.
  4. Pick your event type:
  5. Click: Track clicks on specific elements (buttons, links, etc.).
  6. Page View: Track visits to specific pages or URLs.
  7. Text Input: Track when users type something into a field (be careful with privacy here).
  8. Use the visual picker to select the element on your site or app you want to track. Double-check that the selector is specific enough (e.g., avoid targeting .btn if you have a dozen buttons on the page).
  9. Name your event something obvious, like “Clicked Signup Button” or “Visited Checkout Page.”

What works:
- Super quick for basic stuff.
- No developer time needed.

What to watch out for:
- If your site layout or CSS classes change, codeless events can break without warning. - Avoid tracking too many similar elements—stick to the high-impact stuff.

Step 4: Setting Up Custom Events with JavaScript

If you want more control, or need to track stuff that isn’t just a click or page view, use JavaScript events.

  1. In your site or app’s code, make sure the Smartlook snippet is installed and running.
  2. Wherever the action you care about happens (e.g., after a user successfully signs up), add this line:

js smartlook('track', 'SignupCompleted');

Replace 'SignupCompleted' with whatever makes sense for your event—just keep it short and clear.

  1. You can also pass extra details (properties), like so:

js smartlook('track', 'SignupCompleted', { plan: 'Pro', referrer: 'GoogleAds' });

  1. Save and deploy your changes.

What works:
- Bulletproof—won’t break if the UI changes. - Lets you track exactly what matters, including dynamic or conditional actions.

What to watch out for:
- Requires a developer (or at least someone comfortable editing code). - Don’t overdo it—track only what you’ll actually use.

Pro tip:
If you’re not seeing your events show up, double-check your event names and make sure the Smartlook snippet runs before your events fire.

Step 5: Verify That Events Are Firing

It’s easy to think you’re done—but if your events aren’t showing up, your data is just wishful thinking.

  1. Go back to Smartlook and open the Events tab.
  2. Trigger your event (click the button, complete the action, etc.) on your site or app.
  3. Refresh the Smartlook dashboard and check if your event appears in the event list.
  4. For JavaScript events, you can also check your browser’s developer console for errors.

If you don’t see your event: - Double-check your event names for typos. - Make sure you’re on the correct environment (dev vs. production). - For codeless events, try re-selecting the element (maybe the selector changed).

Step 6: Use Events to Build Funnels and Filters

Now that you’re tracking real actions, use them to answer actual questions.

  • Funnels: Chain events together to see how many people complete multi-step flows (e.g., “Clicked Sign Up” → “SignupCompleted”).
  • Filters: Slice your session recordings or heatmaps to only show users who triggered a certain event.

What’s worth your time:
- Build funnels for your most important user journeys—don’t obsess over every possible path. - Use event filters to watch only the sessions that matter (e.g., people who tried to buy but failed).

What to ignore:
- Don’t get lost building massive, complicated funnels. Focus on the big drop-offs or high-value actions.

Step 7: Revisit and Clean Up

Your product will change, and so will what you need to track. Don’t let your event list turn into a junk drawer.

  • Review your events every few months.
  • Delete or rename events that are no longer useful.
  • Keep event names consistent and clear—future you will thank you.

A Few Honest Tips

  • Keep it simple: You don’t need to track every click or scroll. Focus on actions that tie back to real outcomes.
  • Don’t trust “set and forget”: Check your events after major site updates or redesigns.
  • Privacy matters: Be careful with text input events—don’t track sensitive info by accident.
  • Iterate: It’s normal to refine what you track as you learn what matters.

Wrapping Up

Custom events in Smartlook are powerful, but only if you stay focused. Start with what you really need to know, set up your events (codeless or code, whatever fits), and use them to answer real questions—not just fill dashboards.

Don’t chase “perfect” analytics. Pick a couple of key actions, track them well, and adjust as you go. The best insights come from keeping things simple and actually looking at your data—not overcomplicating things from the start.

Now go set up those events—and ignore the vanity metrics.