How to capture GCLID in a hidden form field

So, you want to get a GCLID parameter and save it alongside other lead data coming from a form on your website or landing page. Here’s how it can be done in short, step-by-step:

1. Ensure that auto-tagging is enabled in your Google Ads account.
2. Create a hidden form field.
3. Retrieve GCLID from either cookies or URL.
4. Write the GCLID value to the corresponding form field.

Now let’s cover each step in detail. By the way, this article implies you are using Google Tag Manager and you have a Conversion Linker tag.

Check auto-tagging in Google Ads

By default, this is turned on. Go to the account settings and ensure it is:

If not, enable it.

Create a hidden form field

Depending on the form plugin this will be different. Overall, this step can be split in two actions:

1. Create a field with a unique ID, cf-gclid, for example. We will use this ID in our JavaScript code to find this field and put the GCLID value. The field ID must be unique.
2. Add a CSS rule to make this input hidden.

If you have multiple forms with the same ID on the same page it won’t work. Not to say it is not a valid usage of ID parameter. Long story short, use CSS classes in that case.

Here’s an example of how the input field should look like in HTML:

<input type="text" name="cf-gclid" id="cf-gclid">

And here’s is a CSS code to make it hidden:

#cf-gclid {
  display: none;
}

You can put this CSS code to your main CSS file, or just add it inline. If you are inlining this code, make sure to put it in the <style> tag:

<style>
  #cf-gclid {
    display: none;
  }
<style>

Retrieve the GCLID value

Now, let’s tackle the most complicated part. If you google for something like “how to capture GCLID”, it’s likely you will find advice to retrieve it from the URL parameter, using Google Tag Manager. While it will work, this approach has a major problem. If a visitor navigates to another page, the GCLID URL parameter will not be transferred, so you’ll end up with an empty parameter value.

What most of the articles on the internet will not tell you is that the GCLID value is actually stored in cookies by default. You can see it yourself if you go to your website and append the following string to the URL: ?gclid=fake_value.

When the page is loaded, open the Web Inspector, go to the Application tab, select Cookies, select your domain and search for gcl_aw. Here’s what you will see:

It will work the same way with the actual live GCLID that is appended by Google Ads. Okay, that should be clear, so now let’s figure out how we can retrieve it. Here’s a piece of JS code that you can use in Google Tag Manager:

function() {
  var gclid = document.cookie
    .split('; ')
    .find(function(row) {
      return row.startsWith('_gcl_aw=');
    })
    .split('=')[1]
    .split('.')[2];
    
  return gclid;
}

In Google Tag Manager navigate to Variables → Create new user-defined variable → Custom JavaScript. Then just paste the code and save the variable:

Now, if we go to the Tag Assistant debug mode and append any GCLID parameter to our preview URL, you should see that our GTM variable picks that parameter and it’s available for our later purposes:

Set the GCLID value to the form field

So the last thing to do is to put the retrieved from the cookies GCLID value to the corresponding form field.

Here’s a piece of code that will write the GCLID to the form field with the ID of “cf-gclid”:

<script>
  document.getElementById("cf-gclid_js").value = {{cJS - gclid (cookie)}};
</script>

Remember: your form field should have a unique ID and there should be only a single instance of this ID on a page. If there are multiple form instances, only the first field will be populated with the GCLID value.

Simple create a Custom HTML tag in GTM, and put it there. As a trigger you can use either All Pages (if the form is on every page), or create a trigger to target the specific page where the form is located.

Test and debug

Once all of that is done, launch the preview mode in Tag Assistant and make sure to test the URL with a dummy GCLID parameter. Once the page with the form is loaded, tweak the CSS to unhide the GCLID field and make sure it’s populated with the right value:

That’s it. Now publish and use it.