Search
Close this search box.

How to Track Lead Sources in ConvertKit with UTM Codes

Last Modified on July 2, 2024

Are you looking into how to track lead sources in ConvertKit?

Let’s say a user enters your website and fills out your newsletter form. You send them many emails, and later, they take you up on your offers and buy from you.

GA4 For Beginners

Subscribe & Get our FREE GA4 Course for Beginners

While it is possible to see sales information inside Google Analytics 4, it is limited.

It will depend on how long the cookie was available and if the user is still being identified by GA4. It is unlikely to backtrack and know precisely where the user or purchase came from.

A far better way of doing things is to attach UTM information directly to the user’s CRM profile. This way, if the user converts later, you can go back into the user profile and see where the user came from when they signed up for your form.

We’ll show how to set up form fields to capture UTM data, then use Google Tag Manager to store UTM data in a cookie and automatically fill in the form fields with this data.

Here is an overview of what we’ll cover:

Let’s dive into lead source tracking in ConvertKit with UTMs!

Import UTM Parameters into ConvertKit

We first need to demonstrate the end behavior we want to set up on our website. For this, we’ll enter the GTM Preview Mode.

Enter the URL of our website and attach a few UTM parameters. Next, click Connect.

Opening the GTM preview mode with UTM parameters in the URL

💡 Top Tip: Check out our guide on How to Track UTM Codes in Google Analytics 4 to see a list of the different available UTM parameters, learn why they are essential to track, and best practices for tracking.

Once we connect to our website, we can see the UTM information in the URL. This information gets stored in a cookie.

UTM parameters in the URL

Next, go to the page with our ConvertKit form and fill out the information. In this case, fill in an email address, then click Subscribe.

Filling out the ConvertKit form

We should then see this user in the subscriber list in ConvertKit.

Test email address at the subscriber list in ConvertKit

Looking at the subscriber details, we should be able to see the UTM information that was on the landing page.

UTM information on the subscriber details page

We’ll use Google Tag Manager to implement this setup. We will use hidden forms and first-party cookies, as well. It is a great technique to spice up the data inside our CRM.

Let’s get started on setting this up.

To set this up, first, we need access to the website with our ConvertKit form.

ConvertKit form in the demo website

Next, we also need a GTM account set up on that website.

Google Tag Manager account

💡 Top Tip: Check out our ultimate guide on Installing Google Tag Manager if you haven’t set it up on your website yet.

Lastly, we need the ConvertKit account open to implement our changes here.

ConverKit account

Now, the steps for how to import UTM parameters into ConvertKit are as follows:

  1. Prepare the ConvertKit form to include hidden form fields. We also need to add custom fields so that the data can flow into the ConvertKit account.
  1. Prepare Google Tag Manager to capture UTM information. We must prepare GTM to pick up the UTM information from the landing page and store it in a cookie.
  1. Fill UTM information into the form. Once the user goes to the form page, we want to take that information from the cookie and fill it into the different form fields.

Finally, we must test the implementation to ensure everything works as intended.

Preparing ConvertKit Form with Hidden Form Fields

The first step to import UTM parameters into ConvertKit is to prepare our ConvertKit account and change our forms.

What we’ll do is go into our database of subscribers. Go to GrowSubscribers.

Opening the subscriber database in ConvertKit

Next, open up any random subscriber from the list.

Opening the details of a subscriber in ConvertKit

Then, we will implement custom form fields to store the data in ConvertKit.

Click Add New Field.

Adding new custom fields in ConvertKit

We’ll add the most common UTM parameters that we want to store. In our case, they would be utm_medium, utm_source, utm_campaign, utm_content, and utm_term.

New UTM fields in ConvertKit

There are more UTM parameters you can use, and you can even create custom UTM parameters. We included the most common ones for simplicity, but feel free to add as many as you want.

You can change them around and name them as you wish. You don’t need to follow this same naming convention.

Finally, click Update Subscriber.

Updating subscriber fields

We now see these UTM fields for subscribers.

New UTM fields in subscriber details

Now, let’s change our form around to implement these fields in the form.

Go to the Landing Pages & Forms page.

Opening the landing pages & forms page in ConvertKit

Next, click Create New.

Creating a new landing page or form in ConvertKit

Next, select Form.

Creating a new form in ConvertKit

You can select any form display format. For this example, we’ll pick Inline. It is an HTML form, and you need to be able to change HTML to make our technique work.

Creating an inline form in ConvertKit

Next, select from one of the templates. Let’s go with the Pine template. Click Choose.

Selecting the pine template

We’ll reach the form builder.

Form builder in ConvertKit

Here, click the + button. For each additional field, select our custom UTM fields from the dropdown list.

Adding the UTM fields in the ConvertKit form

Repeat this step until you have included all your UTM parameters. It won’t look nice, but we’ll show you how to hide them later.

For now, click Publish.

Attaching UTM fields to and publishing the ConvertKit form

Finally, go to the HTML tab and click Copy.

Copying the HTML code for embedding the ConvertKit form

Let’s enter this code into our website.

Hiding the Form Fields

Go to your website and edit the old form. If you use WordPress, click Edit Page at the top of the screen.

Editing the page with the old ConvertKit form

Replace the old code with our new form. Next, update these changes to your page.

Updating the ConvertKit form on the demo website

Go back to your page and confirm that the form has been updated.

Updated ConvertKit form in the demo website

Now, let’s see how to hide the UTM fields in our form.

Press Ctrl (or Cmd) + F on your keyboard and search type. Notice the word “type” gets highlighted in our code. Each one corresponds to the type of each form field.

Searching for the form field type

The email address field has an email type. For our custom UTM fields, the type is text.

To hide these fields, change the type to hidden.

Changing UTM form fields type to hidden

That’s it! Update the page again. With this, we should see that our different form fields are hidden.

ConvertKit form with hidden UTM form fields

We still have the UTM fields available in the background. To check, we can go to your browser’s Developer Tools.

Right-click on the form and click Inspect.

Inspecting the ConvertKit form

We see six div tags with the formkit-field class. Expanding one of these tags, we can see the UTM field is still present, and their details are still on the page.

Div tags for the hidden UTM fields

Preparing GTM to Capture UTM Information

In this section, we’ll put in the logic for grabbing the information on the landing page and putting that into a cookie. Next, we’ll fill in this information into our hidden form fields once the user reaches the page with our ConvertKit form.

We’ll do all this in Google Tag Manager