Elementor Integration
HandL UTM Grabber / Tracker Elementor Integration step by step
- Native Elementor Form Support
- Elementor Integration
- Add cookie support to Elementor Pro
- ActiveCampaign hidden fields to appear in Elementor Form
- Appending UTM variables using Text Editor in Elementor
- Appending UTMs to the selective Buttons in Elementor
- Elementor Integration with Mailchimp
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'
2. Click 'Edit with Elementor' Button
3. Search 'Form'
4. Click 'Add Item' Button
5. Select the Type as 'Hidden' and Give a name for Label
6. Click 'Advance', Give a name to Custom ID and then Click 'PUBLISH' button
🥳Now You are ready!
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
-
change all the custom parameters from ActiveCampaign to text from hidden. They will immediately will be mappable.
-
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
Elementor Integration with Mailchimp
First, implement as shown here in the Native Elementor Form Support.
After doing so, enable MailChimp and proceed with the mapping as shown below: