Tracking Submissions with Google Analytics

Support for GA isn't likely to be provided in the Webform issue queue, but I think you just need to get familiar with how GA works (though I'm certainly no pro either). You probably want to look into the event tracking guide: https://developers.google.com/analytics/devguides/collection/gajs/eventT...

In your site JS code, doing something like this would track the submission of a form:

  // Track submission events.
  $('#webform-client-form-123').submit(function() {
    _gaq.push(['_trackEvent', 'Webform', 'Form submitted']);
  });

At least I think it would, like I said I'm not a GA expert.

I used the code provided as example in #1, but in my Google Analytics, I couldn't see the category, the action or even the label.
Analytics tells me that an event has occured but with no information.

Here is the code i used in a javascript file:

Drupal.behaviors.basicWorks = function(context) {
  // Track submission events.
  $('#webform-client-form-39', context).submit(function() {
    _gaq.push(['_trackEvent', 'Webform', 'Form submitted', 'New submission']);
  });  
};

PS: I'm sure that the submit js event is correctly executed, I checked it with js alert popup.

Thanks for the event tracking examples! The same idea works for anything.

jQuery(document).ready(function($) {
// Track submission events.
  $('#my-form').submit(function() {
	_gaq.push(['_trackEvent', 'My Form', 'Form submission', 'New submission']);
  });
});

@mrP : i'm looking for something like that to track my forms submissions, where do i put your js code into my drupal website (D6) ?

thanks

Your theme provides support for loading additional javascript -- https://drupal.org/node/171205#scripts

so i just need to copy this code into a js file load by my theme and it will track all my webforms submissions ?

jQuery(document).ready(function($) {
// Track submission events.
  $('#my-form').submit(function() {
_gaq.push(['_trackEvent', 'My Form', 'Form submission', 'New submission']);
  });
});

do i need to create the #my-form variable or do i add all webforms separatly in the js code ?
do i need to use this one instead ?

>Drupal.behaviors.basicWorks = function(context) {
  // Track submission events.
  $('#my-form', context).submit(function() {
    _gaq.push(['_trackEvent', 'Webform', 'Form submitted', 'New submission']);
  }); 
};

thanks

each webform form has a class and an id automatically associated with it. the id is unique to a single form, while the class is generic to all. if you are wanting to target all webforms generically, then you would use the class.

it sounds like this is what you're looking for:

jQuery(document).ready(function($) {
// Track submission events for all forms with class="webform-client-form".
  $('.webform-client-form').submit(function() {
_gaq.push(['_trackEvent', 'Webform', 'Form submission']);
  });
});

thanks, so if i want to track submissions for each webform separatly i do duplicate the code and change the ID ?
i need some explanation about the code too:
_gaq.push(['_trackEvent', 'Webform', 'Form submission']);
what "Webform" is used to ? what "Form submission" is used to ?

actually i added code into my custom js file like you tell me.Waiting to see results in GA.Do i need to set something in it ?

You can also add one goals tu you google analytics account

1 Goal description
Edit
Name: WhatYouWant
Goal type: Destination
2
Goal details
Destination
Regular expression "done\?sid"

hi, just to check:
I have a webform in AJAX mode
mine function bound to form submit seems not to be triggered:
var contest_ga_submit = function() {if (console) { console.log('cotest_ga_submit'); } };
$('#webform-client-form-112').submit(contest_ga_submit);

is this supposed to work also for forms in ajax mode?
thanks

@jan -- you'll probably have to trigger the event using something other than .submit() Have you tried .on() or .bind() (see Using Google Analytics to track AJAX requests and Track AJAX Page Views in Google Analytics with Help From jQuery for some examples)

I think this needs a bit of future proofing. The _gaq method works for classic analytics but what happens when GA makes the final push to Universal Analytics?

The UA format is:

ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'button', // Required.
'eventAction': 'click', // Required.
'eventLabel': 'nav buttons',
'eventValue': 4
});

Also, I think the code can be made a bit more flexible so that it only needs to be added once.

So if it were:

Drupal.behaviors.basicWorks = function(context) {
  // Track submission events.
  $('form.webform-client-form', context).submit(function() {
    if (!!_gaq) {
      _gaq.push(['_trackEvent', 'Webform', 'Form submitted', 'New Submission for ' + $(this).attr("id")]);
    }
    else if (typeof ga === 'function') {
      ga('send', {hitType: 'event', eventCategory: 'Webform', eventAction: 'Form Submitted', eventLabel: 'New Submission for ' + $(this).attr("id")});
    }
  });
};

I think that would be a more rounded, more future-proof solution. I haven't tested yet, but I'm currently in process of installing the implementation. Please let me know if anyone runs into any issues with this.

I have written another module to do something similar to what you have requested. It's called GA Capture.
https://drupal.org/project/ga_capture

I am seeking sponsorship (or votes) to develop the webform submodule, take a look:
https://drupal.org/node/2165325

Peace,
Brian

Thanks @Brian294! You might consider adding your module to the list of Webform compatible modules: https://drupal.org/node/1526208

This much simpler, future proof approach worked for us:

The G.A. module by default excludes traffic to 'node/*/*' pages. Well that happens to match the structure of a webform confirmation page (node/[id]/done). So edit the settings at admin/config/system/googleanalytics and remove 'node/*/*' from the excluded pages section.

When setting up goals in G.A., set the goal destination to 'node/[id]/done' replacing '[id]' with the node id of the webform.

One caveat is that the G.A. module excludes these pages to avoid tracking the same content with two different urls, the alias and the node/[id] one and to also avoid tracking the node edit forms. To continue to avoid tracking these pages after you've removed the exclusion rule, exclude those admin roles that have access to editing content (which should be a recommended practice anyway probably) and also use a module like Global Redirect to avoid sending traffic to node/id pages instead of the aliased urls. This is also a recommended practice anyway for better SEO.

hello, ogomez78, in your solution, how do you exclude false goal completions caused by users calling that page directly ?

Attaching a link to a very good example if somebody will also look for a solution.
https://www.drupal.org/docs/8/modules/webform/webform-cookbook/how-to-pa...