AFL UTM Tracker Documentation

  2. Home
  4. Docs
  6. AFL UTM Tracker Documentation
  8. Other Form Integrations
  10. HubSpot WordPress Plugin: Setup UTM parameter tracking

HubSpot WordPress Plugin: Setup UTM parameter tracking

You can use our AFL UTM Tracker plugin to populate dynamic UTM parameters into your HubSpot Forms.

This documentation is only for WordPress sites who have installed the HubSpot WordPress plugin and they are using the HubSpot Form block or shortcode to insert the form into the page.

If you are manually inserting the HubSpot form via manual HTML, then follow the documentation here:

Minimum Requirements

  • AFL UTM Tracker v2.23.0
  • HubSpot WordPress plugin v11.3.16
  • WordPress v5.0.0

Steps

Let’s summarize the steps to populate the UTM parameters into your HubSpot Form v4.

  1. Enable the “Javascript Merge Tag” feature under the AFL UTM Tracker plugin settings.
  2. In your HubSpot settings, create Contact Properties for the UTM parameters.
  3. In your HubSpot settings, display the UTM parameters as Contact Card.
  4. In your HubSpot Form, add the UTM parameter properties as Hidden Fields.
  5. Add the HubSpot block into your WordPress page.
  6. Add our Appfromlab Javascript Code.
  7. Test your HubSpot form.

1. Enable the Javascript Merge Tag feature

  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: Create Contact Properties for UTM parameters

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

  1. Login to your HubSpot account > Settings page.
  2. Data Management > Objects > Contacts.
  3. Setup > Properties > Manage Contact properties.
  4. Group tab > Create Group.
    • Name: AFL UTM Tracker
NOTE: For the Internal Name below, we will use our prefix "afl_" so that it does not conflict with HubSpot properties and HubSpot own UTM tracking script.

Create Properties for Last Touch UTM Parameters

  1. Properties tab > Create property.
    • Property label: AFL UTM Source
    • Internal name: afl_utm_source
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
  2. Properties tab > Create property.
    • Property label: AFL UTM Medium
    • Internal name: afl_utm_medium
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
  3. Properties tab > Create property.
    • Property label: AFL UTM Campaign
    • Internal name: afl_utm_campaign
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
HubSpot Contact Properties
HubSpot Contact Properties

Create Properties for First Touch UTM Parameters

  1. Properties tab > Create property.
    • Property label: AFL UTM Source (First)
    • Internal name: afl_utm_source_first
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
  2. Properties tab > Create property.
    • Property label: AFL UTM Medium (First)
    • Internal name: afl_utm_medium_first
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
  3. Properties tab > Create property.
    • Property label: AFL UTM Campaign (First)
    • Internal name: afl_utm_campaign_first
    • Object type: Contact
    • Group: AFL UTM Tracker
    • Field type: Single-line text
    • Save.
Contact Property for First Touch UTM parameters
Contact Property for First Touch UTM parameters

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.

3. HubSpot: Create Contact Card to display UTM parameters

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.

Create Card for Last Touch UTM parameters

  1. Add cards > Create card > Data highlight.
    • Cart title: AFL UTM Tracker (Last Touch)
    • Properties > Add properties.
    • Select the AFL UTM Source property.
    • Select the AFL UTM Medium property.
    • Select the AFL UTM Campaign property.
    • Save.

Create Card for First Touch UTM parameters

  1. Add cards > Create card > Data highlight.
    • Cart title: AFL UTM Tracker (First Touch)
    • Properties > Add properties.
    • Select the AFL UTM Source (First) property.
    • Select the AFL UTM Medium (First) property.
    • Select the AFL UTM Campaign (First) property.
    • Save.
  2. Save and exit.
HubSpot Card for Last Touch UTM parameters
HubSpot Card for Last Touch UTM parameters

4. HubSpot: Add Hidden Fields to your 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.

Hidden Fields for Last Touch UTM parameters

  1. Add to Form > Properties.
    • Search Property > AFL UTM Source.
    • Default value: afl_utm_js:utm_source|default:none
    • Hidden field: Enable
  2. Add to Form > Properties.
    • Search Property > AFL UTM Medium
    • Default value: afl_utm_js:utm_medium|default:none
    • Hidden field: Enable
  3. Add to Form > Properties.
    • Search Property > AFL UTM Campaign
    • Default value: afl_utm_js:utm_campaign|default:none
    • Hidden field: Enable

Hidden Fields for First Touch UTM parameters

  1. Add to Form > Properties.
    • Search Property > AFL UTM Source (First).
    • Default value: afl_utm_js:utm_source_1st|default:none
    • Hidden field: Enable
  2. Add to Form > Properties.
    • Search Property > AFL UTM Medium (First)
    • Default value: afl_utm_js:utm_medium_1st|default:none
    • Hidden field: Enable
  3. Add to Form > Properties.
    • Search Property > AFL UTM Campaign (First)
    • Default value: afl_utm_js:utm_campaign_1st|default:none
    • Hidden field: Enable

Review and update form and published changes.

HubSpot Form Contact Property
HubSpot Form Contact Property
HubSpot Form Field Default Value
HubSpot Form Field Default Value

5. Add the HubSpot Form into your WordPress page

Please note that HubSpot has two versions of their form (the new v4 and legacy v2) and hence will require using two different solutions.

Adding HubSpot Form via Block method

  1. Login to your WordPress admin dashboard.
  2. Edit your Contact page.
  3. Add the “HubSpot Form” block.
  4. Choose a form.

Adding HubSpot Form via Shortcode method

  1. Login to your WordPress admin dashboard.
  2. Edit your Contact page.
  3. Go to the HubSpot > Forms page.
  4. Hover your mouse over a form > Click on the “Embed” button.
  5. Click on the “WordPress short code” tab.
  6. It will look something like below. Do take note of the version.

V4 Shortcode

[hubspot type="form" portal="00000" id="xxxxxxxx" version="v4"]

V2 Shortcode

[hubspot type="form" portal="00000" id="xxxxxxxx"]

6. Get our Appfromlab Javascript Code

For HubSpot Form v4

  1. Add a new “Custom HTML” block below the HubSpot Form.
  2. On Line 3, replace MY_DOMAIN_NAME with your website URL.
  3. Paste the code below in the block.
  4. Save page.
  5. Test form.

For HubSpot Form v2

  1. Add a new “Custom HTML” block below the HubSpot Form.
  2. On Line 3, replace MY_DOMAIN_NAME with your website URL.
  3. Paste the code below in the block.
  4. Save page.
  1. Go to your functions.php and add the PHP snippet below.
  2. This will modify the HubSpot Javascript payload to call our Javascript API.
  3. Test your form.