This post will spell out in detail, the process of storing the UTM parameters in the browser and then passing it via GTM(Google Tag Manager) into hidden fields in a form on a website. When the form is submitted, these values will be stored in the CRM. We will use “utm_source”, “utm_medium”, and “utm_campaign” as examples in this guide. You can add others as you need them.
This post is written in response to all the times I have seen the UTM parameters being assigned mid-session just because some infernal lead form needed them. I got tired explaining why this is not needed hence the post.
This will also work for those times when a customer wants to send UTM information for a session at some later step to some marketing channel.
Step 1 – Store the UTM parameters in a first-party cookie.
UTM parameters exist only on the landing page of the website and they are lost to us in subsequent pages. If we want to fetch them into the CRM, we will need to store them in a cookie.
For this, we will use a custom Tag template called Persist Campaign Data and store the values of the UTM parameters in a cookie as shown below
Step 2 – Creating a Cookie Variable in Google Tag Manager
We will now create a first-party cookie variable in GTM to store the cookie information as shown below
Step 3 – Get the value of the three parameters and store them as variables
Now that the cookie is saved in GTM as a variable, we can parse it for specific parameters. Let me show you the script to use for utm_source
This function parses the “utm_cookie” looking for the values that exist within the utm_source parameter and then returns those values into a variable called “cjs – utm_source”.
We should create variables for “utm_medium” and “utm_campaign” in exactly the same way as shown above.
Step 4 – Create hidden fields in the lead submission form
Now that we have values for all the parameters as variables, we should create an appropriate number of hidden fields in the form that is sending data into the CRM. In our case, it will be three fields, one each for “utm_source”, “utm_medium”, and “utm_campaign”. The lead form could be a simple WordPress form or more complicated implementations but all of them have the ability to have a hidden field. We just need to ensure that the hidden fields have a default value of either “null” or 0. There should be some default value otherwise our next step will not work.
Step 5 – Write the values of the parameters into the hidden fields
Once the hidden fields are generated, we can set the values in them by using the stored variables for each hidden field that we have created in Step 3. This is how it will look like for “utm_source”
This script will automatically populate a form field (specifically an input field with the name “Source”) with the value of a variable (cjs – utm_source). The construction will vary based on the hidden field name and the code for the CSS selector.
Only step 4 is where the developers have to do some work. The rest of the steps are going to be done in GTM.
Please do let me know if this doesn’t make sense. There is another post very similar to this by the incredible Measureschool and by AnalyticsMania. You can follow them too. They surely make better videos than I do!