Pixelflow
How to Trigger Events

How to Track & Trigger Events

There are 5 different ways you can track and trigger events from your website or app:

  1. Visual Tagger: Best for buttons, forms, popups, and other on-page interactions. This is the recommended option for most users.

  2. Integrations: If you use Stripe or Calendly, just use our simple integrations to autosync and trigger events from 3rd party platforms

  3. URL Triggers: Best for thank-you pages, booking confirmations, and other page-load milestones

  4. Manual tagging with CSS classes: Best when you need more control, richer data capture, or a fallback for setups where Visual Tagger is not the right fit.

  5. Programmatic API: If you are a developer wanting granular control of triggering events via your website or app.

Recommendation: Use Visual Tagger for the simplest setup.

Comparison of Different Ways to Trigger Events on your Website

Tracking Type

Pros

Cons

Visual Tagger

  • Simple to use (point & click)

  • Auto detects sections to track

  • Can be used for any types of events

  • Could break tracking if you change site layout

  • Requires element to be visible on the page to tag it

Integrations

  • Automatic event syncing (no code)

  • Triggers events directly from the source and can't be blocked

  • Most accurate method for purchase and lead events

  • Only available for supported platforms (currently Stripe and Calendly)

URL Triggers

  • Works without touching your site's code or design

  • Great for thank-you pages after a purchase or form submission

  • Can auto extract info from URLs to enrich your events

  • Only works when the tracked action redirects to a new URL, Less flexible for tracking mid-page interactions

  • Can fire again if a user returns to the same URL (e.g. bookmarks your thank-you page) though you can use blocking rules to prevent these

Manual Tagging (CSS Classes)

  • Works on any element (buttons, forms, links)

  • Simple to use and setup

  • Supports custom event data via attributes (value, currency, product ID)

  • Requires access to edit your site's HTML

  • A little more complex to setup

  • Some platforms don't support custom classes (eg. Squarespace)

Programmatic API

  • Full control over when and how events fire

  • Supports conditional logic (e.g. only track if user is logged in)

  • Best for custom workflows or multi-step forms

  • Requires JavaScript knowledge, More setup time than other methods, Not recommended for non-technical users

The Visual Tagger - Use for Most Event Tracking

The Visual Tagger is the simplest way to set up event tracking on most no-code sites.

PixelFlow Visual Tagger widget overlay on a website showing point-and-click interface for selecting elements to track

It works well for:

  • button clicks

  • form submissions

  • newsletter signups

  • lead forms

  • booking buttons and popups

Use it when you want to set up tracking quickly without editing classes on each element.

There may be some edge cases where it will not work, in which case you can use the below options.

URL Trigger - Use for Success Pages / ViewContent Pages

PixelFlow dashboard showing URL trigger configuration with field to enter URL path patterns like /thank-you or /booking-confirmed

URL Triggers:

  • Good fit for /thank-you and /booking-confirmed pages

  • Perfect for triggering viewcontent events (eg. trigger on /shop to trigger on all product page URLs that start with /shop) Tip: Use Visual Tagger to setup in these situations so you can also track product information on pages too

  • Simple to set up

  • Less accurate for on-page forms, modals, or buttons that do not load a new URL

If users can reload or revisit the page, use Event Blocking Rules to reduce duplicates.

URL Triggers work best when a conversion ends on a unique page, such as a thank-you page after a purchase or a confirmation page after a booking. If a user has completed a form before getting to your success page, you will get better tracking results by tracking the form rather than the success page.

Manual Tagging with CSS Classes - Use For More Control

HTML code snippet showing CSS class attribute added to a button element with PixelFlow tracking class name

Adding "CSS classes" to elements is the fallback method when using Visual Tagger doesn't work. You can:

  • capture form fields like name, email, phone, or value

  • tag custom components that need precise control

  • track eCommerce elements with product details

Its ideal if you consistently make layout changes to your website as classes will be more likely to remain on buttons/forms.

Manual tagging is more hands-on, but it gives you stronger control over how events fire and what data PixelFlow captures. Its the best method to use if the Visual Tagger cannot capture the data.

Manual tagging takes more setup than Visual Tagger

Integrations - Use for Stripe Purchases & Call Bookings

PixelFlow integrations page showing connected Stripe and Calendly accounts for automatic event syncing from third-party platforms

Our integrations offer a direct connection from 3rd party platforms like Stripe or Calendly so you can trigger events only when an action has occured somewhere else. For example:

  • A customer has made a purchase in Stripe

  • A customer has booked a call with you

They are the perfect source of truth and with Stripe in particular, you can get even more data sent along with your event as Stripe sends everything they received from the customer like zip code, phone number etc.

Was this helpful?