Trying to use GTM Cookie to save value of utm_source on landing page to hidden field in Feathery

Support
1

Explaining my situation:

I’m attempting to use Google Tag Manager to capture the entry URL’s UTM_Source into a cookie so that I can then use that cookie later as the value for my hidden ‘utm_source’ field on the Feathery form.

It seems I’m running into an issue where I can’t correctly reference my Feathery form’s selector and the ‘id’ of the hidden field ‘utm_source’ and would like help there.

This is for my Aruza Buy Online form if some support admin would like to access my account.

This is what the code currently looks like:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var utmSource = '{{Cookie - utm_source}}';
    var form = document.querySelector('#container > form'); // Replace with your form's ID or class
    if (form && utmSource) {
      var utmField = form.querySelector('input[name="utm_source"]'); // Replace with your hidden field's name
      if (utmField) {
        utmField.value = utmSource;
      }
    }
  });
</script>

Any insights or walkthroughs or guidance would be greatly appreciated for this subject.

WHY I’M DOING THIS:

  • When a user visits a landing page with utm_sources in the URL, if they buy online then and there - I capture the value of the utm_source - however, if they click off of that landing page and lose that source parameter, I then cannot match that conversion to the proper entry source.

Cheers,

Ian

2

Hey Ian, we don’t support grabbing and setting field values in that manner. If you want to capture field values from your url parameters for an embedded form, you can turn that on in your form settings for that to happen automatically. If you want to do it via custom logic, please reference our docs for best practices: onLoad() | Feathery Docs

3

Hey All,

I’m having a similar issue to this so thought it would be best to reply to this post rather than create a new one. Was a solution ever created using the custom logic? Currently I have all of my utm parameters associated with the session in a cookie.

Here is a snippet from my embed code which uses the onLoad function mentioned in the documentation:

const onLoad = (context) => {
        // Map UTM parameters from cookies to form hidden fields
        const utmParams = {
            'utm_source': getCookie('gtm_utm_source'),
            'utm_medium': getCookie('gtm_utm_medium'),
            'utm_campaign': getCookie('gtm_utm_campaign'),
            'utm_term': getCookie('gtm_utm_term'),
            'utm_content': getCookie('gtm_utm_content'),
            'ga_gclid': getCookie('gtm_gclid') 
        };

        // Use setFieldValues to populate the hidden fields
        context.setFieldValues(utmParams);
    };

In the form builder, under data tracking, when clicking on the edit hidden fields button, I see a list of corresponding IDs, which match the keys outlined above. This suggests that these hidden fields are present within the form, however when I inspect the form on my published page, I see no hidden fields in the HTML.

At this point, I’m unsure as to whether the hidden fields are actually in my form, or that its just a case of my onLoad function not being written properly.

Should I be able to inspect the hidden form field on a page? If so, should the above code snippet be able to map the values to the hidden fields?

Thanks,

Ant

4

I don’t believe you can view hidden fields when inspecting the published page.

Your best bet is to test the form by visiting your form url with sample ?utm parameters. Then view your test submission’s hidden fields in the results tab of your feathery form to determine whether your code is functioning.

5

Thanks for this! Enabled me to validate that my method does work.