1

I want to track form submissions by creating a dataLayer event (a JS array with form values) when a form is submitted successfully (onSubmit).

This is my sample DataLayer Push code

<script>   
    window.dataLayer = window.dataLayer || []
    window.dataLayer.push({
        'event': 'successformSubmission',
        'formId': '',   // dynamically populate
        'formName': 'Contact Us Form', // dynamically populate
        // more fields from the WFFM form
  })
</script>

I want to call the Datalayer push script once the WFFM form is submitted successfully and Datalayer push script will have values coming from the WFFM submitted the form.

Is there a way we can implement this or has anyone done anything similar to this.

Any help or suggestion would be appreciated.

Thanks in advance

1 Answer 1

3

The success behavior for a WFFM form offers two options: rendering a success message on the same form page (replacing the form) or redirecting the user to a success page. It would be very hard to implement a client side dynamic solution that works well with both these behaviors.

Instead of using the dataLayer to push an event to Google Analytics from the client side, you can implement a WFFM custom Save Action that posts a Google Analytics event using the Google Analytics Measurement Protocol API. This custom save action should be the last one to be executed.

This is an example of a method that I implemented a couple of years ago to track an event in Google Analytics using the Measurement Protocol:

public class MeasurementProtocol
{
    private readonly string googleAnalyticsTrackingUrl = "https://www.google-analytics.com/collect";
    private readonly string googleAnalyticsAccountId = "UA-XXXXXXXX-1";

    public void TrackEvent(string eventCategory, string eventAction, string eventLabel, string documentLocationUrl, string documentReferrer, string campaignSource)
    {
        string postData = string.Format("v=1&tid={0}&cid={1}&t=event&ec={2}&ea={3}&el={4}&dl={5}&dr={6}&cs={7}",
            googleAnalyticsAccountId, new Guid(), eventCategory, eventAction, eventLabel, documentLocationUrl, documentReferrer, campaignSource);

        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(googleAnalyticsTrackingUrl);

        request.Method = "POST";
        request.ContentLength = postData.Length;

        byte[] byteArray = Encoding.UTF8.GetBytes(postData);

        using (var requestStream = request.GetRequestStream())
        {
            requestStream.Write(byteArray, 0, postData.Length);
        }

        using (var response = request.GetResponse() as HttpWebResponse)
        {
            // Do something with the response, if needed
        }
    }
}

You can add custom metrics or custom dimensions to your Measurement Protocol request to pass form field data (see also the parameter reference for more details).

A very useful tool to validate your Measurement Protocol requests is the Hit Builder, that allows you to quickly test your requests with a Google Analytics account.

2
  • would your approach be valid for the new (Sitecore 9/10) forms? In our case we would like to push selected form field values to the dataLayer/ analytics. Commented Jul 13, 2023 at 20:16
  • 1
    The approach should be valid with Sitecore Forms as well, implementing a custom Submit Action. The Measurement Protocol API got updated for GA4, so you want to look at their new documentation: developers.google.com/analytics/devguides/collection/protocol/… Commented Jul 13, 2023 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.