I’ve been using ActiveCampaign’s site tracking with Gravity Forms for years now to enable site tracking as well as save UTM parameters when someone submits a form on my website.
I wrote a post about it a few years back and that post has decided to disappear from existence for no reason whatsoever. So, here’s a new version for your enjoyment! I hope it helps!
Step 1: Get and Install JS Cookie
In order to get, set, and save our email input (and our UTM parameters) as a cookie, we need a handy little package called JS Cookie.
- Download it here
- Copy it to your theme’s folder (I put it in my js folder)
- Enqueue it in your functions.php file (example gist below).
Step 2: Save Email Field as a Cookie
Next, add the below gist into your functions.php file. This will find any field with the label “Your Email” and save its input value (i.e. the email address someone enters) as a cookie named “email”.
NOTE: You MUST make sure your email field’s label matches line 10 from the above gist. It can be whatever you want, but they must match.
Step 3: Add Email Cookie to ActiveCampaign’s Tracking Code
Add the ActiveCampaign tracking code to your theme’s head, grabbing our new email cookie and inserting it into the tracking code.
NOTE: Make sure you replace ‘YOURACIDHERE’ with your ActiveCampaign ID.
That’s it! Your theme should now be saving any field labeled “Your Email” as a cookie named “email” and then inserting the value of that cookie into ActiveCampaign’s tracking code.
If you also want to know how to save UTM parameters on form submissions, keep going!
Step 4: Create gforms_utm.php File
Next, we’re going to add a new php file to our theme’s folder (I put mine in the ‘lib’ folder) and add the below gist to it. This gives us a shiny new hidden field in Gravity Forms where we can save those UTM parameters on form submission.
Special thanks to Gravity Forms for creating this awesome UTM Parameters complex input field for me (and now, for you).
Then, include this file in your theme’s functions.php file. We only want to call this file if Gravity Forms is installed, so we’ll check to see that the Gravity Forms class exists (see gist below).
Step 5: Add UTM Parameters Field to a Form
Now, when you go into Gravity Forms, you’ll see a new field under “Advanced”.
Drag that into your form, click on the Advanced tab, check the box “Allow field to be populated dynamically,” and copy the field names into the parameter names inputs, like so:
This is important because we’re going to add some code next that will replace these dummy values with the actual UTM parameter values when the form is submitted. It also grabs the initial landing page, referrer, and last referrer, too! Fun!
Step 6: Create and Enqueue a Theme JS File
Next, if you don’t already have a js file for your theme, make sure you create it and then enqueue it in your functions.php file, just like we did in step one. (Here’s an updated gist with step one and step six together!)
NOTE: Make sure you add jquery and the js-cookie script as dependencies.
Now, in our theme.js file, we’re going to add the following gist. This is going to replace the dummy values we populated in our UTM Parameters fields with the actual values, if present.
Shoutout to Jenna Molby for helping with this little bit of awesomeness!
OK that’s it! Now, whenever someone visits your website with UTM parameters in their URL and they fill out a form, you can now capture those UTM parameters and save them with your form submissions! And if you use the ActiveCampaign add-on for Gravity Forms, you can send the parameters to ActiveCampaign and save them in custom fields!