Setting field ID in hidden field for GCLID

[elektramurphy]

Hi Everyone, 

I've setup a field with the name 'gclid_field' as part of the setup for Google's offline conversion import (setup doc here).

The first step says: 

1. You will need to modify each form submission page to add a hidden form field for the GCLID. This is how the GCLID will be passed to your backend system.
   Here's an example form with a hidden field for the GCLID. If you are able to modify your form code directly, you will simply insert the highlighted <input> tag in between your <form> tags. In some cases, your lead management systems administrator may need to generate this form code for you.

   <form action="" name="myForm">
         Name: <input type="text" name="name">
         <input type="hidden" id="gclid_field" name="gclid_field" value="">
         <input type="submit" value="Submit Form" name="btnSubmit">
   </form>

The issue is that Hubspot does not seem to allow me to modify the field ID. Also, on inspect because the field is hidden I can't seem to find what ID Hubspot is automatically assinging it.

I've read through a lot of community posts and talked to support but cannot find a solution. Has anyone come across the best way to modify a field ID or know how to find the individual field ID?

[Danielle1]

I figured out how to store and capture the GCLID using the code below in Tagmanager for contacts in Hubspot. However, I still need code to do the same thing for the MSCLKID (Microsoft Click ID for Microsoft Ads). If you know how to fix this problem, please paste the code for tagmanager in the reply.

If you need help with store the GCLID, paste the code below into tagmanager using all pages as the trigger.

<script>

function getParam(p) {
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function getExpiryRecord(value) {
var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 day expiry in milliseconds

var expiryDate = new Date().getTime() + expiryPeriod;
return {
value: value,
expiryDate: expiryDate
};
}

function addGclid() {
var gclidParam = getParam('gclid');
var gclidFormFields = ['gclid_field', 'foobar']; // all possible gclid form field ids here
var gclidRecord = null;
var currGclidFormField;

var gclsrcParam = getParam('gclsrc');
var isGclsrcValid = !gclsrcParam || gclsrcParam.indexOf('aw') !== -1;

gclidFormFields.forEach(function (field) {
if (document.getElementById(field)) {
currGclidFormField = document.getElementById(field);
}
});

if (gclidParam && isGclsrcValid) {
gclidRecord = getExpiryRecord(gclidParam);
localStorage.setItem('gclid', JSON.stringify(gclidRecord));
}

var gclid = gclidRecord || JSON.parse(localStorage.getItem('gclid'));
var isGclidValid = gclid && new Date().getTime() < gclid.expiryDate;

if (currGclidFormField && isGclidValid) {
currGclidFormField.value = gclid.value;
}
}

window.addEventListener('load', addGclid);

</script>

You will also have to create a property in Hubspot called gclid and change it to hidden on your forms. 

[webdew]

Hi @elektramurphy ,

If you want to get the exact value set in hidden input fields then you have to use jquery code.

here is my example I have one hidden field named "Company " with the default value "webdew".

My Demo form: 

And I have get and print this value in console using following code:

<script>

$(document).ready(function(){

   setTimeout(function(){

     value = $('input[type=hidden]').val();

     console.log(value);

   },1000);

});

</script>

Output:

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[elektramurphy]

Hi @webdew,

Thank you for taking the time to look at my issue. This returns the value, however what i'm looking for is to actually update the field ID. It's currently returning the id 'google_ads_hidden-lable' but I am unsure of whether this is unique or this ID is being applied to several other fields so I am trying to update it.

Hopefully my further explanation helps. If you have any ideas please send them my way, if not thank you for the help! 

[webdew]

Hi @elektramurphy,

Thank you for your explanation. Please try the following code this will update the hidden value. 

$(document).ready(function(){

  setTimeout(function(){

    /* Update the value */

    updatedvalue = "elektramurphy";

    $('input[type=hidden]').val(updatedvalue);

    /* Check that value is updated by printing this on console */

    value = $('input[type=hidden]').val();

    console.log(value);

  },1000);

});

Output:

I am setting up the value on page load you can also set the value on any event trigger.

*Note that I am assuming that there is only one hidden field in the form. If there are multiple then please let me know we will give you the code for that as well.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[elektramurphy]

Hi @webdew, 

Yes, this is for multiple forms not just one! Sorry, such a pain coming back to you with different issues. Does the code above also reflect an update in the ID?

I appreciate you taking the time to help. 

[webdew · Accepted solution]

Hi @elektramurphy 

Yes the above code update the id as well but as you mention that you have name="gclid_field"  in the form field So you can use the following code and this will 100% update your id either you have multiple hidden fields or a single one 🙂

<script>

$(document).ready(function(){

  setTimeout(function(){

    updatedvalue = "your_unique_id";

    $("input[name=gclid_field]").val();

    value = $('input[name=gclid_field]').val();

    console.log(value);

  },1000);

});

</script>

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.