Event Classes on Wordpress

For information on how to track events by assign a specific event to a particular URL, follow this guide.

To tag specific elements on your website that you'd like to track, follow the guide below.

Adding class in different WordPress plugins and elements

Please remember that you can find all the class names you may need to add here on the How to Track Website Elements via Classes page

In general you should add the class name to the element itself (i.e. button, input) or to the it’s closest parent

Gutenberg

Gutenberg is currently a default editor for WordPress

To add a class name to the button, click Block -> Settings -> Advanced -> Additional CSS Classes

Elementor

Elementor is currently one of the most popular visual editors for WordPress

To add a class name to the Elementor Buttons, click the Element -> Advanced -> put the class name into the CSS Classes field

To add classes to the Elementor Form:

Original Elementor forms doesn’t allow to add the class names to the specific fields which are required to track the form Events

However it could be easily adjusted using the code snippet

First, set the proper ID to your fields

In my case I set them name, lastname, phone, email

Next, in the code snippet below update the IDs as per you named them using the rule:

add ‘form-field-’ before the ID you set

So if you set name -> the id will be #form-field-name

<script>

jQuery(function($) {

  $('#form-field-name').addClass('info-cust-fn-pf');

  $('#form-field-lastname').addClass('info-cust-ln-pf');

  $('#form-field-phone').addClass('info-cust-ph-pf');

  $('#form-field-email').addClass('info-cust-em-pf');

  $('.e-form__buttons .elementor-button').addClass('action-btn-cntct-003-pf');

});

</script>

Add this snippet below in the HTML element below the form.

It should add the class names automatically

WPForms

WPForms is quite a popular plugin for the WordPress forms

To add a class names there click the field, go to Advanced -> CSS Classes

To track the first and last name you can use this trick:

add wpforms-first-last-name class name to the field

place this jQuery code somewhere on the page:

<script>

jQuery(function($) {

  const $group = $('.wpforms-first-last-name');

  if ($group.length > 0) {

    $group.find('.wpforms-field-name-first').addClass('info-cust-fn-pf');

    $group.find('.wpforms-field-name-last').addClass('info-cust-ln-pf');

  }

});

</script>

Any other element

If you can’t add the class name to some specific element, you can always use jQuery to add that classes to the element. This requires some basic understanding of HTML classes and some AI tool you prefer

1 Click the right mouse button on the element

The browser console should open where you should see the html of the element

Select the html (using CTRL + A on windows or CMD + A on Mac)

Paste it in your favorite AI (like ChatGPT) with the next prompt:

Give me jQuery code to add the class name ‘%REPLACE_IT_WITH_YOUR_CLASSNAME%’ to this element: %PUT_COPIED_HTML_HERE% wrapped in <script> tags

The result could be like:
Give me jQuery code to add the class name ‘info-cust-em-pf’ to this element: <input type="email" id="wpforms-7-field_1" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][1]" spellcheck="false" aria-errormessage="wpforms-7-field_1-error" required="">  wrapped in <script> tags

Copy the code and save it in the page (using HTML widget if your page editor provides any) or put it globally using some plugins like CodeSnippets