Simple HubSpot gclid tracking code integration

hubspot-adwords-gclid-tracking.js

// The script below will ensure that gclid parameters are associated with
// contacts in HubSpot.
//
// A few things are required before this script will work:
// 
// * You will need to have the HubSpot tracking code installed on the page. A
//   few modifications will be required if you don't have the tracking code
//   installed. Additionally, you will lose out on the built-in cross-domain
//   features that the hubspot tracking code uses to store cookies.
// * You will need to have this script installed on every page.
// * Your HubSpot form(s) must have a hidden gclid field added to them. This is
//   required so that the gclid parameter can be associated to the contact.
// 
// How it works:
// 
// 1. We check if the gclid parameter is present in the URL. If the gclid
//    parameter is present and a HubSpot form is embedded on the page, then the
//    HubSpot form embed code will automatically populate any form fields named
//    "gclid" with the value. In case the user doesn't convert right away, or
//    needs to visit another page to convert, then we cookie the gclid value to
//    save it for later.
// 2. We then need to make sure that the hidden "gclid" field on your HubSpot
//    form is set to the gclid parameter value. This way when the user submits
//    is associated with the contact. HubSpot will automagically do this if the
//    current page's URL has a gclid parameter visible. For other pages, we'll
//    need to reference the cookie.
// 3. Upon form submit, we remove the cookie. This is just to keep things tidy.
//    If the user revisits the site from a paid ad, the gclid parameter will be
//    updated again.
//
// Some things to keep in mind:
// 
// * If the user clicks on an ad, doesn't convert, and then clicks on another
//   ad, the gclid value in the cookie will be overwritten. This shouldn't be a
//   problem since the second ad in this case should be getting the credit for
//   the conversion anyway.
// * This script should be executed on the page *after* the HubSpot tracking
//   code has been initialized.

_hsq.push(function(hstc) {
  var cookieName = "gclid";
  var gclid;
  var gclid_matches;

  // 1
  if (/gclid=/.test(window.location.search)) {
    gclid_matches = window.location.search.match(/gclid=(\w+)/);
    if (gclid_matches.length) {
      hstc.cookie.set(cookieName, gclid_matches[1], {
        daysToExpire: 365
      });
    }
  } else {
    // 2 - this only needs to be ran if the current page does not have a gclid parameter
    gclid = hstc.cookie.get(cookieName);
    if (gclid) {
      $("[name='gclid']").val(gclid).change();
    }
  }

  // 3
  window.addEventListener("hsvalidatedsubmit", function(e) {
    hstc.cookie.remove(cookieName);
  });
});

I think line 49 should be hstc.cookie.set(cookieName, gclid_matches[1], {

Hi Jake, I've implemented this code on our website and have found that the first part of it works as described (adding the GCLID to the hidden field on a form) as long as the user stays on the landing page. However, the second part of it where it's supposed to cookie the GCLID until a form is later filled out does not work when the user visits another page and then fills out the form. I've tested it multiple times and the same result. I tried passing this to another developer to try to solve the issue but he came back stumped. Are you available to help with this? I'd be happy to send more details over along with links to our site. Thank you in advance!

@rs1787 thank you, that fixes the script. I'm not sure why I had it configured to check the 2 index. 🙈

@bvkelley80 try the updated script. This properly sets the cookie value if the gclid parameter is in the URL.