Hubspot: Setup UTM parameter tracking

You can use our AFL UTM Tracker plugin to capture dynamic UTM parameters for your 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.18.0
• Hubspot Forms
  • Embed by Javascript
• WordPress

Steps

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.

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.

WordPress Page Setup

1. Login to your WordPress Admin dashboard.
2. Go to the page where you want to embed the Hubspot form (e.g Contact page)
3. Copy your Hubspot Form javascript code.
   • Go to your Hubspot > Marketing > Forms.
   • Select the form > Edit Form.
   • Click on the Embed button on the top.
   • Select the Embed code tab.
   • Copy the code to a text editor.
   • Take note of your portalId and formId value.

4. Copy our Javsascript code below which we have added our tracking code.
   • Replace the portalId value and formId value in our code with your values in the previous step.
5. Add a Custom HTML block into your WordPress page.
6. Paste the code into the Custom HTML block.
7. Save and test your form.

Javascript Code