CODEWITHSUNDEEP
javascriptformsgoogle-analytics
BaronGrivet
BaronGrivet

Reputation: 4424

Can Google Analytics be used to measure usage of a dynamic form?

We have developed a web based app where users enter scientific data into a dynamic form and the results are dynamically generated as form inputs are changed.

Because the form is dynamic it's possible for a user to spend many many minutes on it without reloading the page.

Our client would like to know how many adjustments are made to a form by each user to gauge usage and engagement.

We already have a Javascript counter that records the number of changes made to the form.

They've also asked if we could measure how many fields have been changed (which we could do via Javascript).

Is it possible to record the usage of the dynamic form in Google Analytics? What would be the best method/ approach?

Upvotes: 1

Views: 166

Answers (2)

pdro
pdro

Reputation: 317

You can use the onclick or onchange trigger events in order to send context change events to GA. I find it useful to use a helper function to achieve this.

This function, which should be placed in the <head>, should populated with the relevant form name and context (this).

<script>
// helper function to trigger a Data Layer Form Event
analyticsForm = function(f, el) {
  var formName = f;
  var elName = el.name || el.id || el.type;
  var category = 'interaction';
  var action = 'form: ' + formName;
  var label = elName + ':' + el.type;

  // GA method of sending the event
  ga('send', 'event', category, action, label);

  // GTM method of sending the event
  window.dataLayer.push({
    'event': 'event',
    'category': category,
    'action': action,
    'label': label
  });
}
</script>

Within the on-page code, the analyticsForm function can be called onchange of each field in a traditional form (including radio buttons or checkboxes) as shown below:

<form>
  <input type="text" name="field1Name" onchange="analyticsForm('formName', this)">
  <input type="text" name="field2Name" onchange="analyticsForm('formName', this)">
  <select name="field3Name" onchange="analyticsForm('formName', this)">
    <option value=""> </option>
    <option value="A">A </option>
    <option value="B">B </option>
    <option value="C">C </option>
  </select>
  <input type="checkbox" name="agree" value="false" class="checkbox" onclick="analyticsForm('formName', this)">
</form>

In the above example, each time a text field or select field is changed or a checkbox or radio button is clicked, an event with the following structure will be called:

  • Category: form
  • Action: {{form name}}
  • Label: {{element name/id}}:{{element type}}

Upvotes: 0

Doug Fir
Doug Fir

Reputation: 21212

Yes if you can add a little Javascript on each change?

If you happen to use Google Tag Manager you can push an event object to the dataLayer and listen for these objects, then fire your GA event tag.

If you don't have GTM then you would just hard code the GA event whenever a change happens.

Unless you are not able to have any say on what Javascript gets sent on each event?

Example of Google-Tag-Manager (GTM) event:

dataLayer.push({
    'event': 'form_change',
    'eventCategory': 'forms',
    'eventAction': [e.g. form name e.g. newsletter sign up],
    'eventLabel': [type of change e.g. field value after change]
})

You would then tell GTM to listen for custom events of value 'form_change'.

Is it possible to visit the site in question to take a look? Got a link?

Upvotes: 1

Related Questions