CMS Development

bpotter
Colaborador(a)

Javascript Cookie Values passed into Hubspot Form

resolver

Hello!

 

I have read this article, but it's a bit over my head implementing the solution.

 

I'm using some JavaScript code in Google Tag Manager that reads a stored cookie, then puts that cookie's value in the field in my HubSpot form using the form name I tell it to. I have attached the javascript file to this post.

 

This is the page I'm using to test it: https://amsunsolar.com/test-hubspot-form/?gclid=123456 I've confirmed the cookie is being stored in the browser and the Google tag is firing. I think it has something to do with the form being in an iframe and I don't know how to target the field in the iframe.

 

This is the Javascript snippet. I modified it (line 33) to target the specific field name because it's tied do a Salesforce custom field. Hence the "__c":

 

// Pass Tracking Parameters to a Form on Another Page Using GTM
// http://zackphilipps.com/store-gclid-cookie-send-to-hubspot/

function getCookie(name) {
  var value = '; ' + document.cookie;
  var parts = value.split('; ' + name + '=');
  if (parts.length == 2)
    return parts.pop().split(';').shift();
}

function setCookie(name, value, days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = '; expires=' + date.toGMTString();
  document.cookie = name + '=' + value + expires + ';path=/';
}

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

function assignTrackingParameterToCookie(fieldParam, formType) {
  var field = getParam(fieldParam),
    inputs;
  if(field) {
    setCookie(fieldParam, field, 365);
  }
  if(formType == 'gform') {
    inputs = document.querySelectorAll('.' + fieldParam + ' input[type="text"]');
    assignCookieValueToFormInput(fieldParam, inputs);
  } else if(formType == 'hubspot') {
    inputs = document.querySelectorAll('.hs-input[name="gclid__c"]');
    assignCookieValueToFormInput(fieldParam, inputs);
  }
}

function assignCookieValueToFormInput(fieldParam, inputs) {
  var field = getCookie(fieldParam),
    length = inputs.length;
  if(field && length) {
    for(var i = 0; i < length; i++) {
      inputs[i].value = field;
    }
  }
}

assignTrackingParameterToCookie('gclid', 'hubspot');

 

Any help would be appreciated!

0 Avaliação positiva
1 Solução aceita
bpotter
Solução
Colaborador(a)

Javascript Cookie Values passed into Hubspot Form

resolver

Here is the "solution" I discovered:

 

You cannot target elements within an iFrame. You must embed the form without formatting so it is directly on the page. Once you do that, you can manipulate the DOM elements. In other words, you can't mess with the form with JavaScript/jQuery when you embed it in a Wordpress site using a shortcode or other embed method.

Exibir solução no post original

3 Respostas 3
bpotter
Solução
Colaborador(a)

Javascript Cookie Values passed into Hubspot Form

resolver

Here is the "solution" I discovered:

 

You cannot target elements within an iFrame. You must embed the form without formatting so it is directly on the page. Once you do that, you can manipulate the DOM elements. In other words, you can't mess with the form with JavaScript/jQuery when you embed it in a Wordpress site using a shortcode or other embed method.

mier
Membro

Javascript Cookie Values passed into Hubspot Form

resolver

Could you please elaborate more on the steps you have followed?

 

0 Avaliação positiva
jennysowyrda
Gerente da Comunidade
Gerente da Comunidade

Javascript Cookie Values passed into Hubspot Form

resolver

 

@Jsum and @tjoyce is this something you have any experience with? 

 

Thanks,
Jenny

 

0 Avaliação positiva