help center

Search
Close this search box.
On this page

Track the number of button clicks

Last Update: January 21, 2024

The number of times a visitor clicks on a button on your web page helps you understand what people are interested in or doing on your site. Tracking tools like Meta Pixel, Google Analytics, or Google Tag Manager capture these events and allow you to gather valuable data and insights about user behavior, helping you make informed decisions to improve the user experience on your website.

Let’s see how to use the Button widget for tracking events.

  1. On the canvas, click the button edit icon, then in the panel, go to the Advanced tab.
button advanced field Track the number of button clicks 1

2. Scroll down to the Attributes section. Here, you’ll find a field named Custom Attributes.

empty custom attribute fiedl Track the number of button clicks 3

3. Enter your custom attributes in the format of attribute=”value”. For example, for button tracking, you might add attributes like data-track-label=”Download Button”

add custom attributes Track the number of button clicks 5

4. After adding the custom attributes, update your page to save the changes.

5. Add the HTML widget. You can add the widget anywhere on the page.

 

html widget 1 Track the number of button clicks 7

6. Paste the following code into the HTML Code field:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('[data-track-label="Download Button"]').click(function(){
    // tracking code here
    // for example, Google Tag Manager:
    fbq('track', 'Download');
  });
});
</script>
add html code 6 Track the number of button clicks 9

7. Add the provided CSS to your site’s custom CSS area to ensure proper functionality. This might be in your Theme Customizer, Site Settings, Custom Code, or Child Theme. This CSS is explicitly mentioned as a Button Fix for Tag Manager (For Click Id triggering).

/** Button Fix for Tag Manager (For Click Id triggering) **/
.elementor-button-content-wrapper {pointer-events: none;}
.elementor-button span { pointer-events:none}

8. Save the changes to your page.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!