HubSpot Form v2: Setup UTM parameter tracking

You can use our AFL UTM Tracker plugin to capture dynamic UTM parameters for your legacy HubSpot Forms embedded into your WordPress site.

You will be utilizing our Javascript Merge Tag feature to populate the UTM parameters into your HubSpot form hidden fields which will be then be saved into the HubSpot Contact property.

Minimum Requirements

• AFL UTM Tracker v2.23.0
• Hubspot Form v2 (legacy)
• WordPress v5.0.0

Steps

1. AFL UTM Tracker Settings

1. Login to your WordPress Admin dashboard.
2. Go to AFL UTM Tracker > Settings page.
3. Under Attribution section, enable the Javascript Merge Tag feature.
4. Save settings.
5. Clear all page cache from your caching plugin.

2. HubSpot Setup

You will need to login to your Hubspot account.

Create Contact Properties

Here you will be creating contact properties so that UTM parameters can be saved into a Contact.

1. Go to your Hubspot > Settings page.
2. Data Management > Objects > Contacts.
3. Setup > Properties > Manage Contact properties.
4. Group tab > Create Group.
   • Name: AFL UTM Tracker
5. Properties tab > Create property.
   • Property label: UTM Source
   • Internal name: utm_source
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
6. Properties tab > Create property.
   • Property label: UTM Medium
   • Internal name: utm_medium
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
7. Properties tab > Create property.
   • Property label: UTM Campaign
   • Internal name: utm_campaign
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.

Want to populate more attribution data?

Refer to our Javascript Merge Tag list to populate First Touch UTM parameters, Last Touch UTM parameters, click identifiers (gclid, fbclid, msclkid) and other attribution data.

Edit Hubspot Form

Here you will be adding the Contact Properties which you have just created into your form.

1. Go to Hubspot > Marketing > Forms.
2. Select your form.
3. Sidebar > Contact Properties > AFL UTM Tracker.
4. Drag and drop the 3 properties to your form.
5. Edit the UTM Source field.
   • Enable the “Make this field hidden”.
   • Default value: afl_utm_js:utm_source
6. Edit the UTM Medium field.
   • Enable the “Make this field hidden”.
   • Default value: afl_utm_js:utm_medium
7. Edit the UTM Campaign field.
   • Enable the “Make this field hidden”.
   • Default value: afl_utm_js:utm_campaign
8. Update.

Create Contact Card

Here is how you can display the UTM parameters in an individual Contact view.

1. Go to your Hubspot > Settings page.
2. Data Management > Objects > Contacts.
3. Record Customization tab > Default view.
4. Add cards > Create card > Data highlight.
   • Cart title: AFL UTM Tracker
   • Properties > Add properties.
   • Select the UTM Source, UTM Medium and UTM Campaign properties.
   • Save.
5. Save and exit.

3. Get your HubSpot Embed Code

1. Login to your HubSpot account.
2. Go to your Hubspot > Marketing > Forms.
3. Select the form > Edit Form.
4. Click on the Embed button on the top.
5. Select the Embed code tab.
6. Copy your portalId and formId value (we will be using these values in the next section).

4. Setup your WordPress Page

1. Login to your WordPress admin dashboard.
2. Add a “Custom HTML” block into your WordPress page.
3. Paste our Javascript code from the next section into the Custom HTML block.
4. Save page and clear page cache.
5. Test your HubSpot form.

Javascript Code

You will need to change the values in the Javascript code.

1. On Line 4, replace MY_DOMAIN_NAME with your website URL.
2. On Line 9, replace the portalId property value with your value.
3. On Line 10, replace the formId property value with your value.