Sitecore XP Forms: Tracking with user-friendly names in Google Analytics 4 using Google Tag Manager

Context

Sitecore Forms is a powerful tool to create and manage dynamic forms. While Google Tag Manager and Google Analytics are the standard tracking tools for any website. So, how to combine them together? 

Any Sitecore Form is rendered as a normal HTML form, and submitting works as on any other form as well. So tracking Sitecore Form submissions is the same as tracking any other form submitted on the website.

How to track Form submit in Google Analytics?

There are lots of articles about configuring form tracking form submission events on your website with Google Tag Manager.

• A detailed article that describes lots of ways to track form submission
• Documentation about 'Form submission trigger'

Default configuration

The default configuration is pretty simple: we just need to add Tag, which will trigger an event in Google Analytics:

This tag will trigger form_send event in Google Analytics with some parameters:

• Form Name: ID of the form
• Form location: URL of the page where form was submitted
• Form target: target attribute on the form

The trigger for Tag should be simple built-in 'FormSubmit':

Reports

So, everything is configured; you checked it in Preview and debug mode, published the container, and you are ready to analyze the data.

So you can see a report for the form_send event:

We get the statistics, but the form name is non-readable because the ID of the form is rendered in internal Sitecore format (combination of rendering ID and form item ID):

<form action="/formbuilder/Index?sc_site=[SITE_NAME]&amp;fxb.FormItemId=1065576b-4484-498a-bbfd-b46c3a143995&amp;fxb.HtmlPrefix=fxb.a46156d2-29e6-4908-9aad-d772aec6f96c" ... id="fxb_a46156d2-29e6-4908-9aad-d772aec6f96c_1065576b-4484-498a-bbfd-b46c3a143995" ...>
...
</form>

This can be fine for developers, but not very useful for non-technical people. The best way would be to keep two dimensions together (the form name in a readable format together with the form ID). To get readable form names in GA, we need to make a few changes.

Idea

We create a custom GTM variable to get the name from the form HTML element. At the moment, there is no readable form name somewhere in the HTML markup. So need to add it as well.

We will use data-analytics-id attribute for it:

<form action="..." id="fxb_..." data-analytics-id="[Form Item Name]">
    ...
</form>

And then need to configure a custom GTM variable Form Analytics ID:

Note. As a fallback value, built-in {{Form ID}} variable is used (if for any form data-analytics-id attribute will be empty).

Then don't forget to change the corresponding Tag (need to use the new {{Form Analytics ID}} variable instead of the built-in {{Form Id}}):

Populate data-analytics-id attribute

To populate attributes, we need to add a custom pipeline processor:

public class InitializeFormAttributes: MvcPipelineProcessor<RenderFormEventArgs>
{
    public override void Process(RenderFormEventArgs args)
    {
        args.Attributes["data-analytics-id"] = args.ViewModel.Name;
    }
}

And add the patch configuration:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <forms.renderForm>
        <processor
                type="[PROJECT_NAME].Foundation.Forms.Pipelines.InitializeFormAttributes, [PROJECT_NAME].Foundation.Forms"
                patch:after="*[@type='Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions, Sitecore.ExperienceForms.Mvc']"
                resolve="true" />
      </forms.renderForm>
    </pipelines>
  </sitecore>
</configuration>

As a result, our form should look like this (it's just an example; the new attribute value should be taken from Sitecore Form Item Name):

<form action="..." id="fxb_..."  data-analytics-id="Login Form _ Reload Page" >
    ...
</form>

Result

We can see the updated report:

Now the results are much more readable in comparison to the previous report, where only IDs were available.