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

2

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.