Tracking Button Clicks and Custom Events

Last updated

Revenue First Analytics records custom events in three ways: add data-rfa-goal="event_name" to any element to send an event when it is clicked, add data-rfa-scroll-goal="Label" to send a scroll_goal event when the element scrolls into view, or call window.rfa('event_name', { key: 'value' }) from JavaScript. Every event is stored with the visitor and session, so you can turn it into a goal or a funnel step.

Track a click with data-rfa-goal

Add the attribute to a button, link, form or any other element. The tracking script listens for clicks on the whole page and walks up from the clicked element to its parents, so a click on an icon inside the button still counts. The event carries the attribute value as its name and no other data.

<a href="/signup/" data-rfa-goal="signup_click">Start free trial</a>

<a href="tel:+15551234567" data-rfa-goal="phone_click">Call us</a>

<form data-rfa-goal="newsletter_subscribe">
  <input type="email">
  <button type="submit">Subscribe</button>
</form>

Each click sends one event. If the same visitor clicks three times, three events are stored, but a goal still counts that visitor once. For a form, the click fires before validation, so it means “tried to submit”, not “submitted”. For real submissions from a supported form plugin, use the automatic form_submit event described in Tracking Form Submissions and Leads.

Adding the attribute in Elementor or the block editor

In Elementor, select the button or link, open the Advanced tab, find Custom Attributes and enter data-rfa-goal|signup_click (the builder uses a pipe between the attribute name and its value). Other page builders with a custom attributes option work the same way. In the block editor, place the markup in a Custom HTML block, or use a block that exposes custom attributes. The in-app guide with these snippets is behind the question mark button (“Goal tracking help”) at the top of the dashboard.

Track an element scrolling into view with data-rfa-scroll-goal

<section data-rfa-scroll-goal="Pricing Table">
  ...
</section>

When at least 10 percent of the element becomes visible, the script sends a scroll_goal event with label set to the attribute value. It fires once per element per page load. The script looks for these elements when the page loads, so elements injected later by JavaScript are not observed. Use a Scroll to element goal with the same label to count it.

Send an event from JavaScript with window.rfa()

// Name only
window.rfa('signup');

// With properties
window.rfa('signup', { plan: 'pro', value: 29.99 });

The first argument is the event name, the optional second argument is an object of properties. The event is sent with the current page path and attached on the server to the visitor’s active session. If your code can run before the tracking script has loaded, define a queue first; queued calls are sent once the script initializes.

<script>
  window.rfa = window.rfa || function () {
    (window.rfa.q = window.rfa.q || []).push(arguments);
  };
  rfa('early_event', { key: 'value' });
</script>

What is accepted and stored

ItemLimit
Event nameRequired, up to 64 characters. The names add_to_cart, begin_checkout, purchase, form_submit and refund are reserved for the server and are ignored when sent from the browser.
PropertiesThe first 10 keys. Keys are lowercased and reduced to letters, numbers, dashes and underscores, up to 40 characters.
ValuesNumbers, booleans and strings (strings cut at 200 characters). Nested objects and arrays are dropped.
Whole request8 KB. Larger payloads are discarded.

Events are also pushed to window.dataLayer as rfa_ plus the event name, with the properties copied in, so Google Tag Manager can react to them. See Google Tag Manager and dataLayer Events for WooCommerce.

Which events does the plugin send automatically?

Event nameWhen it firesStored properties
add_to_cartA product is added to the WooCommerce or EDD cart (server side).product_id, product_name, quantity, price
begin_checkoutThe checkout page is viewed with items in the cart, once per session.cart_total, item_count
purchaseOnce per order, when the order reaches your conversion status or the thank-you or receipt page is shown, whichever comes first.order_id, platform, total, currency, products, item_count
form_submitA supported form plugin reports a successful submission.form_id, form_name, platform, customer_email, customer_name
product_view, category_view, tag_viewA WooCommerce product, category or tag page is viewed (browser side).product_id, category_id or tag_id
scroll_25 to scroll_100The visitor scrolled past 25, 50, 75 or 100 percent of a page.depth
scroll_goalA data-rfa-scroll-goal element came into view.label

The store events need WooCommerce revenue tracking or Easy Digital Downloads revenue tracking enabled in Settings. How purchases are matched to a visit is covered in How Sales Are Attributed to Traffic Sources.

How do I verify that an event is recorded?

  1. In Settings, under Developer Tools, turn on Debug mode and save.
  2. Open your site’s frontend while logged in as an administrator. A floating “Debug Panel” appears in the bottom-right corner; only administrators see it.
  3. Click the element or call window.rfa() in the browser console, then check the Events tab of the panel. Each entry shows the event name and its properties.
  4. Back on the dashboard, open the visitor’s timeline from the User tab of the Conversions card. Events appear as “Triggered event” with their parameters.

Keep in mind that with “Exclude admin users” on (the default), your own events are shown in the panel but not stored. Test from a logged-out browser window or turn the setting off temporarily. Turn Debug mode off again when you are done.

Event naming tips

  • Use lowercase with underscores, for example signup_click or pricing_cta. Goals match the name exactly, including case.
  • Name the action, not the page. The page path is stored with every event already.
  • Keep names stable. Renaming an event splits its history into two names in goals and funnels.
  • Put variants in properties, such as { plan: 'pro' }, rather than creating signup_pro and signup_basic.
  • Avoid the reserved names listed above; they are silently ignored.

Turn the event into a goal

Once the event shows up, open the Goal tab of the Conversions card, click Add goal, choose the type Custom event and pick the name from the Event name suggestions. The goal shows completions and completion rate for any date range, including events recorded before you created it. The full walkthrough is in Creating Goals, and the same event names can be chained as steps in Building Conversion Funnels.

Frequently Asked Questions

Does data-rfa-goal work on a link that leaves the page?
Yes. The event is sent with navigator.sendBeacon, which completes even when the browser is already navigating away, so clicks on outbound links and phone links are recorded.
Can I send my own add_to_cart or purchase events from JavaScript?
No. The names add_to_cart, begin_checkout, purchase, form_submit and refund are reserved for server-side events and are ignored when they arrive from the browser, so nobody can forge sales or leads.
Why do my test clicks not show up on the dashboard?
Logged-in administrators are excluded from tracking by default. With Debug mode on you still see your events in the panel, but they are not stored. Test in a logged-out browser window or turn off Exclude admin users for a moment.
Are custom events recorded in Privacy mode?
Yes. Events are tied to the visitor's daily ID, so goals and same-day funnels work in every tracking mode. Only the persistent visitor ID that links visits across days needs consent.
How many properties can an event carry?
Up to 10 keys per event. Values can be numbers, booleans or strings of up to 200 characters; nested objects are dropped. The whole request must stay under 8 KB.
Browse our plugins

Lightweight WooCommerce plugins built for speed. No bloat, no frameworks -- just clean code that works.

View all plugins
Stay in the loop

Get notified when we launch new plugins. No spam, just product updates.