How to add onclick event in Elementor

Updated September 2026.

Elementor is one of the most used page builders in WordPress, with more than 10 million active installations according to the WordPress.org plugin directory. A common question is how to attach an onclick event to an Elementor element, usually to track conversions.

What is the onclick event?

The onclick event is used so that, when the user or visitor clicks on a certain link or button, a Javascript function is triggered.

Ad and analytics platforms such as Google Ads, Google Analytics and Meta (Facebook/Instagram) rely on click events like this to measure conversions more accurately.

How to use the onclick event in Elementor in a Button (for Meta Pixel, Google Ads or Google Tag Manager)

1. Go to Button > Advanced > set “CSS ID”

When you click on the button you want to add the onclick event, click on it and go to the “Advanced” tab and fill in the “CSS ID” field for a unique value. Example: “My_Button”

2. Add an HTML widget

If possible, place it right after the Button widget.

3. Paste the code below into the HTML widget

The script waits for the page to load, finds the link inside the element with the ID you set in step 1 and runs your tracking code on every click. It uses plain JavaScript, so it does not depend on jQuery being loaded on the page.

<script>
document.addEventListener('DOMContentLoaded', function () {
  var button = document.querySelector('#My_Button a');
  if (!button) return;
  button.addEventListener('click', function () {
    // tracking code here
    // for example, Meta Pixel:
    if (typeof fbq === 'function') {
      fbq('track', 'AddToCart');
    }
  });
});
</script>

If you run into errors in Elementor, check out our Elementor error troubleshooting guide (in Portuguese).

Source: https://elementor.com/help/button-widget/

Tracking clicks without code: Google Tag Manager

If your site already uses Google Tag Manager (GTM), you usually do not need any code inside Elementor. Keep the unique CSS ID from step 1 and create the event in GTM:

1. In GTM, enable the built-in Click variables (Click ID, Click Classes, Click Element).
2. Create a Click – Just Links trigger (or Click – All Elements) that fires on Some clicks when Click Element matches CSS selector #My_Button a, #My_Button a *.
3. Attach that trigger to your Google Ads conversion tag, GA4 event tag or Meta Pixel tag, then test it in Preview mode before publishing the container.

If you use Elementor Pro, the Advanced > Attributes field lets you add custom attributes (for example data-track|add-to-cart) to a widget. That is handy when you want GTM triggers to target a descriptive attribute instead of an ID.

What about plugins?

We used to suggest the free Events Tracker for Elementor plugin for this. At the time of this update, its WordPress.org page warns that it has not been tested with the last three major WordPress releases, so we no longer recommend it for new projects. The CSS ID plus a small script, or Google Tag Manager, is a lighter and more future-proof option.

Need help setting up conversion tracking or fixing an Elementor site? Request a free assessment from the Amicatek team.