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

    window.dataLayer = window.dataLayer || []
        'event': 'successformSubmission',
        'formId': '',   // dynamically populate
        'formName': 'Contact Us Form', // dynamically populate
        // more fields from the WFFM form

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


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.

  • 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.