UTM parameters are important for understanding how well your marketing campaigns work. By capturing these parameters, you can learn a lot about what your audience does and improve your marketing efforts. For a marketer, implementing this functionality makes it possible to do Offline Conversion Tracking in Google Ads for your Lead Generation campaigns. This is also the case for other marketing platforms.
In this blog post, I will show you how to move UTM parameters from a cookie to a form field in Elementor. This method involves creating a cookie that holds UTM parameters and tracking it with Google Tag Manager. This ensures that you keep track of your marketing results even if someone leaves your ad.
A quick recap: What are UTM’s and GCLID’s?
UTM parameters are text strings that you can attach to URLs to track the effectiveness of online marketing campaigns across traffic sources and publishing media. UTM stands for Urchin Tracking Module, a format Google adopted from Urchin Software Corporation’s web analytics tool before Google Analytics was created.
These parameters offer detailed information about where visitors are coming from, how they are getting to your website, and what campaigns are effective. The standard UTM parameters include:
utm_source: Identifies which site sent the traffic (e.g., Google, newsletter).
utm_medium: Defines the type of link used, such as email or cost-per-click (e.g., cpc, email).
utm_campaign: Used to specify a specific product promotion or strategic campaign (e.g., spring_sale).
utm_term: Notes the keywords for this ad (used mainly in paid search campaigns).
utm_content: Used to differentiate similar content, or links within the same ad. This allows for more detailed analysis of which version performs best.
By analyzing the data from these parameters, marketers can understand which elements of their campaigns are working and which are not, enabling them to optimize their efforts for better results.
GCLID (Google Click Identifier):
GCLID is a unique tracking parameter that Google uses to pass information back and forth between Google Ads and Google Analytics. When you enable URL auto-tagging in Google Ads, Google appends a GCLID to the URL whenever someone clicks on your ad. This identifier contains information about the click that brought a visitor to your site, such as the campaign, ad group, and the specific ad that was clicked.
The GCLID enables seamless integration between Google Ads and Google Analytics, allowing you to see detailed information about user behavior after they click on your ads without needing to manually tag each URL with UTM parameters. It helps in attributing conversions to specific ads and keywords, giving a clear picture of your advertising ROI.
Both UTM parameters and GCLID provide powerful ways to track and analyze your digital marketing efforts, each offering specific benefits depending on your tracking needs and setup.
OK, time to get things going.
Step 1: Implementing a Cookie via Google Tag Manager (GTM)
We have to start with an implementation via GTM. Make sure you have a GTM code embedded somewhere on your WordPress Elementor website. In GTM, create a new Tag. We’re going to call this UTM Config. Select “Persist Campaign Data” out of the Template Database from GTM.
Use the settings listed in the screenshot. “Store campaign data in a browser cookie”. Also make sure the parameters are prefilled.
Next up, the Trigger. I called it UTM_capture. And it triggers on a Page View, when a page contains “utm_” or “gclid=”.
This will make sure each time a Page URL contains UTM parameters, or a GCLID parameter, it will store this in a cookie.
Step 2: Making the cookie get rid of weird signs
In several cases, your browser adds a % sign to your URL. To make sure this won’t cause any errors we need to implement this step. For you geeks out there, this is called URI decoding. Go to Variables in GTM, and make a new Variable with “Direct Cookie” Type.
Select “Decode URI value” (in my screenshots it’s in Dutch, sorry for that).
In the screenshot you can see “References to this variable”. Don’t panic, this is something we haven’t done yet and we are going to do it now.
Step 3: Sending UTM’s and GCLID’s to your Elementor Forms
Next up, another script in GTM. This script automates the process of taking UTM parameters from a URL and placing them into specific form fields on a webpage. Create a new Tag. Select “Custom HTML” as Type.
Inject the code. (Copy + Paste here).
The script basically sends 5 fields to your Elementor Forms: gclid, utm_source/medium/term/campaign.
Select “DOM Ready” as a trigger. This makes sure the script loads each time a website becomes interactive.
Step 4: Collecting in your Elementor Forms
We have all steps ready to make your website able to send UTM’s and GCLID to your Forms (and also to store them during a complete session). The last step is, selecting where you want to collect them (which field in your form).
Log in to your Elementor website and browse to your Form(s). Add 5 new fields, depending on which data you would like to send.
Name the fields as following:
Utm_source, utm_medium, utm_term, utm_campaign, gclid
Give them the field type “Hidden”.
Then click on Advanced. In here, use “Request Parameter” as Default Value. ID should be the same as the name of the field.
Advanced options when clicking on the Request Parameter field, should be: Type = get. Parameter name = field name.
Make sure you do this for every field.
Done? Then you’re good to go. Fill in your form and see the magic happening.
Oh yeah BTW. It’s also possible to have a ‘fallback’ option when a GCLID or UTM is not available. Simply click Advanced in the “Request Parameter” option.
Now you can send this info via a WebHook to Zapier and then to Pipedrive. Or Hubspot. Or Notion. Whatever you want.
Happy collecting!