How Do I Use Google Analytics to Track Data from Virtuous Giving Forms?

Users who know JavaScript can expose a couple of different events from Virtuous Form submissions to Google Analytics:

• onSuccess() events
• onLoad() events

onSuccess() Events

The success event can be used to track an event with platforms like Google Analytics or to display a custom message. In other words, a Form submission can be tracked through Google Analytics, or a custom message can be displayed after a Form has been submitted. 

The full Form code options (as well as endpoint details) can be accessed here. 

First, be sure to load your form embed in the HTML where you would like it displayed. 

This is the base set of code used to expose an onSuccess event - this can be loaded in the header or footer:

VirtuousForms.settings = {
     onSuccess: function(response) {
          //track event here....
     }
};

You can also prompt the onSuccess event in the same block you're using to modify Virtuous Forms:

VirtuousForms.settings = {
     firstName: 'DEFAULT_VALUE',
     lastName: 'DEFAULT_VALUE',
     email: 'DEFAULT_VALUE',
     onSuccess: function(response) {
          //track event here....
     }
};

What you add for the event you want to track will depend on where you want to track it. Here are ways to send data to Google Analytics specifically.

What will return: Say, for example, Ron Swanson (rswanson@pawneeparksandrec.org) makes a $50 donation from your online giving form. When the submission is made, this would be posted to Google Analytics:

var response = {
                isDonation: true,
                amount: 50.00,
                formId: "0000-0000-0000-0000-0000",
                segment: 'OG2022',
                firstName: 'Ron',
                lastName: 'Swanson',
                email: 'rswanson@pawneeparksandrec.org'
            };

onLoad() Events

Using onLoad() events makes it possible to see when someone has viewed a form. This provides an excellent way to be able to track and report on traffic and conversion for any or all of your forms. 

Setting up your onLoad() event(s) will follow the same pattern as setting up your onSuccess() event(s). Be sure to load your form embed in the HTML where you would like it displayed. 

This is the base set of code used to expose an onLoad() event - this can be loaded in the header or footer:

VirtuousForms.settings = {
     onLoad: function(response) {
          //track event here....
     }
};