This is more of a "how to" document that might help others meet the following need:

Situation

Site has webforms being displayed as ctools based modal dialog (popups) using the modal_forms module. These needed to be tracked by Google Analytics.

Solution

Add the attached googleanalytics_modal_forms.js file to your site via your theme (or custom module if so inclined). For the theme based solution:

  • Put the file in your theme directory (under the js subdirectory if it exists)
  • In your theme's info file (e.g. theme.info) add the line: scripts[] = js/googleanalytics_modal_forms.js
  • Clear the site's cache

Notes:

May also work with other forms that modal_forms module supports but has not been tested with them.

Could also be used as a basis for tracking any ctools generated modal dialog with the right jQuery selectors and ajax url matching.

What should happen

Will add "pages" with the following format to the google analytics data:

Page URL format Meaning
/modal_forms/ajax/webform/[form_number] Form modal dialog opened
/modal_forms/ajax/webform/[form_number]/error Failed form validation
/modal_forms/ajax/webform/[form_number]/success The Success page was displayed.

Where: [form_number] is the webform node id.

Tested with:

googleanalytics-7.x-1.x branch
modal_forms-7.x-1.2
ctools-7.x-1.3

CommentFileSizeAuthor
#3 googleanalytics_modal_forms_js_ms.zip1.08 KBmsizec
#2 googleanalytics_modal_forms_js_ms.zip1.07 KBmsizec
googleanalytics_modal_forms.js_.zip1.1 KBcgmonroe
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

hass’s picture

hass CreditAttribution: hass commented
Project: Google Analytics » Modal forms (with ctools)
Component: Documentation » Code
Status: Needs review » Needs work

I'm moving the feature request to modal forms.

It would be extremly useful if we get a event trigger like colobox provides to us. Than we can add an ON trigger for modal_forms and we are done. Maybe a lot better to add this to ctools?

This is the implementation example in GA for Colorbox. We could add the same for other modules if they provide a trigger.

  // Colorbox: This event triggers when the transition has completed and the
  // newly loaded content has been revealed.
  $(document).on("cbox_complete", function () {
    var href = $.colorbox.element().attr("href");
    if (href) {
      ga("send", "pageview", { page: Drupal.google_analytics.getPageUrl(href) });
    }
  });
msizec’s picture

msizec CreditAttribution: msizec commented
FileSize
googleanalytics_modal_forms_js_ms.zip1.07 KB

Thanks for your javascript, it helped me a lot.

Im using it with

  • googleanalytics-7.x-1.4
  • modal_forms-7.x-1.2
  • ctools-7.x-1.4
  • webform-7.x-4.x

Im sharing some modifications here ...

  • Added a "/close" pageView when closing the modal form, instead of tracking another time the initial page url
  • Error pageview wasnt firing correctly due to different classname
msizec’s picture

msizec CreditAttribution: msizec commented
FileSize
googleanalytics_modal_forms_js_ms.zip1.08 KB

Added one correction to the script, my bad