How to Enable and Create Custom Events WooCommerce for Google Analytics?
Enhanced Ecommerce Google Analytics for WooCommerce lets you create custom events for Google Analytics 4 beyond standard ecommerce tracking. Add an event, define what triggers it, and track it in GA4. This is useful for gathering specific data on how visitors interact with your site, so you can analyze and improve those interactions.
The plugin supports four event types: Click on Selector, Scroll Depth, Time on Page, and Custom JavaScript Event, each with its own configuration options.
In The Article
Benefits
Creating custom events can help:
- Track specific clicks, scroll milestones, time spent, or custom scripts as separate GA4 events
- Group related events together using categories and labels for cleaner reports
- Add a numeric value to an event so it can be measured or compared later
Event Types
| Event Type | What it tracks | Key setting |
|---|---|---|
| Click on Selector | A click on a specific element (button, form, link, etc.) | Selector + Selector Type (Class, ID, or CSS Selector) |
| Scroll Depth | When a visitor scrolls to a chosen percentage of the page | Scroll Depth Thresholds (25%, 50%, 75%, 90%, 100%) |
| Time on Page | When a visitor stays on a page for a set duration | Seconds on Page |
| Custom JavaScript Event | Any custom logic you define in JavaScript | Custom JavaScript code |
How to Create a Custom Event
Step 1: Enable Custom Event and save
In your plugin settings, turn on the Custom Event option and save. This adds a new Custom Event tab to the plugin menu.
Step 2: Open the Custom Event tab
Go to the Custom Event tab. You'll see a Google Analytics Custom Event table listing any events you've already created, along with their Event Type, Event Label, and Selector.

Step 3: Add a new event
Click Add New Event to open the Custom Event Configuration screen.
Step 4: Configure the event type
Choose an Event Type from the dropdown, then fill in the fields for that type:
Click on Selector
- Selector — the class, ID, or CSS selector of the element to track (e.g.
.myform) - Selector Type — tell the plugin whether the value above is a Class, ID, or CSS Selector
- Event Category — group similar events together (e.g.
forms) - Event Action — describe what happened when the event was triggered (e.g.
clicked) - Event Label — the event name that appears in GA4 (e.g.
Form click) - Event Value — an optional number to measure or compare in reports

Scroll Depth
- Selector and Selector Type — optionally scope tracking to a specific element, or leave as the page default
- Scroll Depth Thresholds — check the percentages you want to track (25%, 50%, 75%, 90%, 100%)
GA4's built-in Enhanced Measurement already sends its own scroll event at 90% depth by default. If you also select 90% here, you may see duplicate scroll signals. To avoid that, either turn off "Scrolls" under GA4 Admin → Data Streams → Enhanced Measurement, or skip 90% here and rely on GA4's native event for that checkpoint.

Time on Page
- Seconds on Page — how long a visitor must stay on the page before the event fires (e.g.
60)

Custom JavaScript Event
- Custom JavaScript — write the JavaScript that should run and trigger the event (e.g.
console.log('hello world');)

Step 5: Save the event
Click Save Event. Your new event now appears in the Custom Event list, and you can edit or delete it anytime using the icons in the Actions column.
Viewing Your Custom Events in GA4
Once an event has fired at least once on your site, go to Reports → Engagement → Events in your GA4 property. Each custom event you created shows up in the event list under its Event Label (e.g. "Form click," "Page Scroll," "Engagement Time"), alongside its event count and count per active user.
Click an event name to open its detail view. There you'll see Event Category and Event Action listed as parameters, and Event Value (if you set one) reflected in that event's value column.

Example Use Cases
Tracking form engagement: If you want to know how often visitors click a specific form, set up a Click on Selector event targeting that form's class.
Measuring content depth: If you want to see how far visitors read down a long article, add Scroll Depth thresholds at 25%, 50%, and 75%.
Flagging engaged sessions: If you want to identify visitors who spend meaningful time on a page, set a Time on Page event at 60 seconds or more.
Running custom logic: If you have a specific interaction not covered by the other types, use a Custom JavaScript Event to define exactly when and how it fires.
Conclusion
Custom events let you go beyond default ecommerce tracking and capture the exact interactions that matter to your store, clicks, scroll depth, time spent, or custom logic, each reported as its own event in GA4.
FAQs
1. Where do I create custom events?
Enable Custom Event in settings and save, then go to the new Custom Event tab and click Add New Event.
2. What's the difference between Selector and Selector Type?
Selector is the actual class, ID, or CSS selector value (e.g. .myform ). Selector Type tells the plugin how to interpret that value, as a Class, ID, or CSS Selector.
3. Will Scroll Depth tracking duplicate GA4's built-in scroll event?
Only if you select the 90% threshold, since GA4's Enhanced Measurement already tracks scroll at 90% by default. Turn off "Scrolls" in GA4's Enhanced Measurement settings, or skip 90% here, to avoid duplicate signals.
4. Can I edit or remove a custom event later?
Yes. Use the edit and delete icons next to each event in the Custom Event list.