How To Inherit UTM Tags From Form Submission to Thank You Page

[hollydechelle]

Hi, I need help to persist UTM parameters to the next page when we click a CTA on the home page or submit a form on any landing page. 

For example, if someone fills out a form at we.curate.co/florists?utm_campaign=mayesh&utm_channel=eblast&utm_medium=paid they go to the thank you page (https://we.curate.co/event-professional-thank-you) without the UTM.

Because we pull last touch attribution from the utm and would like to automate some of it based on the last page seen property, we need the thank you page to have the same UTM tag that was on the first page they came to on that particular session.

EDIT: For more context, we employed this practice in our GTM to force it, but every CTA and submission button seem to wipe it clean.
https://www.analyticsmania.com/post/transfer-utm-parameters-google-tag-manager/

[derekcavaliero]

Hey @hollydechelle 

If you're using the default UTM parameters suggested by Google, they should be applied to the entire Session automatically without any extra work necessary. Thats inside Google Analytics, but perhaps you are using those UTMs in another system for reporting purposes?

In order to get them to persist in the thank you page redirect, you're likely going to need to manually embed the form so you can utilize the Forms JS API. Specifically the onFormSubmit callback. Inside that you should be able to attach the existing query string to the redirect URL, see below for an example:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "XXXXXXX",
    formId: "YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY",
    inlineMessage: "Thank You! You'll be redirected momentarily.",
    onFormSubmit: function($form) {
      var redirectUrl = "https://we.curate.co/event-professional-thank-you";
      window.location.href = redirectUrl + window.location.search;
    }
});
</script>

As I mentioned previously, you can't do this with the native HubSpot form module (it doesn't allow you to modify the embed code or add JS into the callback methods.

But this should at least get you started. Hopefully it helps!

[derekcavaliero]

@hollydechelle also - forgot to touch on your CTA issue.

The CTA issue is one that is much harder to solve. Unfortunately HubSpot doesn't offer an API to extend/work with the embedded CTAs. This is a problem because HubSpot masks the redirect location via an encoded/encrypted query parameter as shown below:

https://info.webmechanix.com/cs/c/?cta_guid=74cecb9d-0b14-495a-ae7c-98edee83e967&placement_guid=1dcb...APefjpEGMP2HEPhQa2cL1X0aSs6vYZ-UOVwp8EvSsSGpIveIKwPUGec8YO1xIn8i4SbwqG0XbWqlJhGhXQWrfWHFQbaN5k14paw1UEGlHjr4arXO5JmWUjuuoikDm2ma-iSDLa4vJxMmp7cuM9zhOZcI99yfWEBMGH1jGNnJsYnSks5ktqT_arh5k0HFFnwdHwqx0cNSfHOAPkpj4wr4Ecolr65Um-9Q0K4fdsxiUqi-PhsFJ8nxdwBg6CrG1FPH-IBV9J1wR5ERBf0NqLz4cGBYodou0c2FlTTWwMkAD9j0OAo2txyEywE&click=28f0a11b-d7b9-4724-aa7e-3e1ef8e64fd6&hsutk=66a68d90f9c4a2a5f18bffc186d4655e

It doesn't seem like its using a basic encoding method such as Base64 - which makes this nearly impossible to decode and replace with a new encoded value dynamically.

Until HubSpot either provides documentation on what kind of encoding/encryption they use for those URLs (unlikely) - OR - HubSpot provides a JavaScript API to modify how CTAs function outside of manually configuring them in the product dashboard - you're kind of stuck between a rock and a hard place. 

Your best bet would be to refrain from using HubSpot CTAs in favor of standard links that you can target with JavaScript to update the href value to append the query string as you want to do.