In this post, I’m going to be covering the best practices I follow when tracking form conversions. At Vital, our reporting has evolved over time depending on the needs of our project management team and our clients. The reporting is obviously going to be different for each client based on the technologies they are using to convert people, the strategies we’re using, etc. Specifically, we’ll be looking at three main points:
- Bucketing Conversions for Easier Reporting
- Variable Setup in Tag Manager for Clean Data
- Google Analytics Goal Setup
Bucketing Conversions for Easier Reporting
If you’re familiar with HubSpot’s inbound philosophy, then you understand the conversion funnel. Essentially, our goal as marketers is to help generate leads for our clients, then connect with them at each stage of their journey through the sales funnel using strategies designed to ultimately convert them into customers.
Once you have identified which form is targeted at which particular part of the funnel, you can now designate your forms for the appropriate “bucket.” As a developer, it’s easy to add code to a form to make sure that it’s scalable. This will set you up for success without much effort. For the purposes of this post I’ll be looking at two separate segments:
- Early-Stage Leads
- Sales-Ready Leads
Add Classes to Your Forms
Unless you’re literally building every form from scratch (form plugin, system, host, etc.) it’s simple to add a custom class to your form. We usually use WordPress with Gravity Forms and HubSpot Forms, so I’ll go over an example for each of those here.
You’ll see I added these two classes:
- Sales-Ready
- Early-Stage
Here’s an example of a HubSpot embed code, slightly modified with my class:
<script>
hbspt.forms.create({
portalId: "XXXXXX",
formId: "XXXXXXXX",
cssClass: "early-stage",
});
</script>
Once you’ve decided on your buckets and added your classes to forms, you’re ready to move on to the next step — Tag Manager setup.
Variable Setup in Tag Manager for Clean Data
First of all, let’s define “clean data.” As a data enthusiast, I want my data to be uniform, correct and predictable. In other words, the way we’re setting up analytics and Tag Manager right now is going to give you full control over how your data appears. See below:
This data can’t be used for anything, so let’s clean it up.
Tag Manager Setup
There are three components you’ll need to update in tag manager:
- Variables
- Triggers
- Tags
Variables
Go to variables and click on the red button that says “Configure.” Scroll down until you see the form variable options and make sure these two are checked off:
- Form ID
- Form Classes
Since I use Gravity Forms the most, I use the method below. If you don’t use Gravity Forms, skip to the next section, “Table Setup.”
You’ll need to scroll down and create a variable under the section “User-Defined Variables.”
Click “New” and give it a name of “Gravity Form Title.” The type will be “Data Layer Variable,” which you have to select from a list of predefined variable types. Then, select the following:
- The “Data Layer Variable Name” is gtm.element.dataset.formtitle
- “Data Layer Version” is 2.
- Go ahead and click “Save” in the upper right.
Once these are checked, you can “X” out and click on triggers.
Finally, add a snippet to your functions.php file:
function gravity_form_tag($form_tag, $form) {
$form_title = $form['title'];
$form_tag = str_replace('<form', "<form data-formtitle='{$form_title}'",$form_tag);
return $form_tag;
}
add_filter('gform_form_tag', 'gravity_form_tag', 10, 2);
Table Setup
If you’re using any other type of form, you’ll need to add a user-defined variable called a “Regex Table.” The input variable should be “Form ID.” Then all you do is add the form ID as the pattern, and the output as the name of the form.
For HubSpot forms the IDs are usually dynamic, so you can add the actual form ID from HubSpot surrounded by (.*)XXXXX-XXXXX-XXX-XXX-XXXX(.*). It’s also a good idea to add a “catchall” expression with the ID = (.*) and the output = unknown. This way, you don’t miss anything.
Trigger Setup
You will need two triggers, one for each type of lead. If you have more, set those up as well. To begin, click “new.” The name for each predetermined tag should be as follows:
- Sales-Ready Form Submission
- Early-Stage Form Submission
Once you’ve named your trigger, choose your trigger type, “Form Submission.” Choose “Some Forms” which will allow you to specify your criteria. Use the following targeting (capitalization matters):
- Form Classes -> equals -> sales-ready (notice that this is the class you specified in gravity forms)
Save your trigger and move on to the tag setup below.
Tag Setup
Your tag will be named with the same convention as your trigger. This makes it easy for someone to look at either and know they are connected. Name your tags the following:
- Early-Stage Gravity Form Submission Event
- Sales-Ready Gravity Form Submission Event
Next, you need to choose “Universal Analytics” from the “Tag Type” list. Then choose “Event” as the track type. Fill in the rest like so:
Category: Form
Action: Early Stage
Label: {{Form Title}}
Google Analytics Goals Setup
To establish the goal buckets in Analytics, you’ll need to set up event goals with the following:
*Note: The “Action” here has to match the action in the tag you created.
Tying It All Together
Hey, you’re done! Your forms will all be triggering events that will be rolled up nicely into the “Form” category. From there, you will further be bucketed by form type, and then by form name. If you have a form that shows up on multiple pages, have no fear, just add a secondary dimension.
Your goals are also set up so that you can tie them into AdWords or use the previous step reporting. I have found this method to be the most flexible, but I’ve also found it cleans up my data significantly. I’d love to hear about how you track goals, so leave us a comment or tweet me @vital_dave.
