Convert GCLID Parameter To Squarespace Hidden Field
I'm trying to pull a GCLID Parameter (EXAMPLE: https://www.example.com?gclid=CjwKCAjwiMj2BRBFEiwAYfTbCjQ-LBlWhBymAH4piPD3FalPCbl24kE7VQ4JtNJ4Jfj8XPE) from a URL and insert it into a Squarespace hidden field.
Ideally, I'd like to do this through a GTM script, but I can also add it directly into Squarespace via site-wide footer code injection. All Squarespace hidden fields start with the prefix "SQF" (in my case, the hidden field is: SQF_GCLID
I've been playing with something like this:
`<script> window.Squarespace.onInitialize(Y, function() { /** * Get the URL parameters * source: https://css-tricks.com/snippets/javascript/get-url-variables/ * @param {String} url The URL * @return {Object} The URL parameters */ var getParams = function (url) { var params = {}; var parser = document.createElement('a'); parser.href = url; var query = parser.search.substring(1); var vars = query.split('&'); for (var i=0; i<vars.length; i++) { var pair = vars[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); } return params; }; /** * Get UTM parameters from the current URL, insert them into correspondingly-named Squarespace form hidden fields. */ var params = getParams(window.location.href); var param; var paramMatch; var paramBase; var formFields; var i; for (param in params) { paramMatch = param.match(/^gclid(.*)/i); if (!paramMatch) { continue; } paramBase = paramMatch[1]; formFields = document.getElementsByName("SQF_GCLID"); i = formFields.length; while (i--) { if (formFields[i]) { formFields[i].value = params[param]; } } } }); </script>` which is based on the code found here.
There are no other parameters to pass (just gclid).
I'm not exactly sure why I wrote that code (which you referenced) the way I did, but this simpler version should do what you need, and is more flexible for parameters other than utm, as in your case:
<script> window.Squarespace.onInitialize(Y, function() { /** * Get the URL parameters * source: https://css-tricks.com/snippets/javascript/get-url-variables/ * @param {String} url The URL * @return {Object} The URL parameters */ var getParams = function (url) { var params = {}; var parser = document.createElement('a'); parser.href = url; var query = parser.search.substring(1); var vars = query.split('&'); for (var i=0; i<vars.length; i++) { var pair = vars[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); } return params; }; /** * Get UTM parameters from the current URL, insert them into correspondingly-named Squarespace form hidden fields. */ var params = getParams(window.location.href); var param; var paramField; for (param in params) { paramField = document.getElementsByName("SQF_" + param.toUpperCase())[0]; if (paramField) { paramField.value = params[param]; } } }); </script>So, after trying the above, it looks like this still isn't being captured. I've also tried using GTM (set URL query variable as "GCLID", which works perfectly well), but then I can't seem to get GTM to properly pass the variable into the hidden form field. I've tried to use
document.getElementsbyName("SQF_GCLID").value = {{GCLID}}However, if I do change the URL parameters to "SQF_GCLID" manually, this works just fine....but doing that in GA will prevent another integration from working, so this is just substituting one problem for another.
And....just like that with a hard reset and another cache clearing, it worked perfectly. Thanks, Brandon.
Nice - glad you got it sorted and glad it worked out @SamR . Also, don't forget to accept/up-vote applicable answers here on StackOverflow.