Elementor Integration

HandL UTM Grabber / Tracker Elementor Integration step by step

Native Elementor Form Support

This is our preferred way of collecting UTMs into your Elementor Form.

First add your field just like any other field to your form

Go to Advanced and select "parameters" under HandL UTM Grabber menu

Click parameter and enter the parameter name you want to track into the form field

That's it!

Elementor Integration

This documentation has been obsoluted, please use Native Elementor Form Support

1. Click 'Post' and 'Add New'

1-Click post and add new.png

2. Click 'Edit with Elementor' Button

2- Click edit with elementor.png

3. Search 'Form'

3- Search Form.png

4. Click 'Add Item' Button

4-Click Add item.png

5. Select the Type as 'Hidden' and Give a name for Label

5- Select the type as  Hidden and give a label name.png

6. Click 'Advance', Give a name to Custom ID and then Click 'PUBLISH' button

🥳Now You are ready!

6- Give a name to custom ID place and then click publish.png

Add cookie support to Elementor Pro

This method has been officially deprecated and archive only. Please use Native Elementor Form Support

In case Elementor Pro doesn't capture UTMs as it is supposed to. You can try this reliable method that allows Elementor Pro to grab the UTMs from COOKIES.

Install the cookies module

First of all, download the cookies.php file from the attachment (left sidebar) and upload it to wp-content/plugins/elementor-pro/modules/dynamic-tags/tags

Acitvate cookies module

Go and edit the wp-content/plugins/elementor-pro/modules/dynamic-tags/module.php:52 and add Cookies in the get_tag_classes_names function's array

Set your field to read the value from Cookies.

Go to your form you'd like to edit, select Default Value as "Cookies" under "Advanced". And then enter the the parameter name in the text field as shown below.

You can use any parameter name listed here Native WP Shortcodes

ActiveCampaign hidden fields to appear in Elementor Form

By default Elementor doesn't list to map hdden fields in Elementor Form

You can't map your form field to a hidden field in Elementor...

You can resolve this in two ways

  1. change all the custom parameters from ActiveCampaign to text from hidden. They will immediately will be mappable.

  2. edit elementor code (single line edit) wp-content/plugins/elementor-pro/modules/forms/classes/activecampaign-handler.php:131. Add hidden => 'text' as shown in the image.

After you are done either of those, you will be able to map the fields just fine (see the image)...

Appending UTM variables using Text Editor in Elementor

Simply add a class attribute utm-out to the your text editor...

And the class variables utm-out will append UTMs to every single hyperlink within that text editor.

Appending UTMs to the selective Buttons in Elementor

Simply add the magical utm-out class attribute to the button as custom attributes as class|utm-out