ajax-event-tracking-jquery.html

<script>
  /* 
   * Ajax Event Tracking with jQuery, in Google Tag Manager, for all ajax events and especially
   * for ajax forms, modal windows, popups and confirmation dialogs,
   * that don't propagate form success event or new page loads.
   * It will only be compatible with AJAX calls made via jQuery ($.ajax, .load() and similar).
   * AJAX requests made via pure Javascript or using other methods will not be detected.
   * For non jQuery events use the ajax-event-tracking-vanillajs example instead.
   *
   * Idea by http://aukera.co.uk/blog/tracking-ajax-events-gtm/#gtm-ajax-6-tracking-js
   * Modified by https:://github.com/underlines
   * Version 2017-07-20 UTC 10:17
  */
  
 /* STEP 1
  * Create new variable:
  * Name:                       eventCategory
  * Type:                       Data Layer Variable
  * Data Layer Variable Name:   eventCategory
 */
 /* STEP 2
  * Create new variable:
  * Name:                       eventAction
  * Type:                       Data Layer Variable
  * Data Layer Variable Name:   eventAction
 */
 /* STEP 3
  * Create new variable:
  * Name:                       eventLabel
  * Type:                       Data Layer Variable
  * Data Layer Variable Name:   eventLabel
 */
 /* STEP 4
  * Create new trigger
  * Name:              gtm.dom
  * Choose Event:      Page View
  * Configure Trigger: DOM Ready
  * Fire On:           All Page Views
 */
 /* STEP 5
  * Create new tag
  * Type:   Custom HTML
  * HTML:   Use variant with or without get/post parameters below
  * Trigger: gtm.dom
  * Don't forget <script> tags
 */
  
  // Without get/post parameters
  (function($) {
    $(document).ajaxSuccess(function( event, xhr, settings ) {
      dataLayer.push({
        'event': 'ajaxSuccess',
        'eventCategory': 'AJAX',
        'eventAction': settings.url,
        'eventLabel': xhr.responseText
      });
    });
  })(jQuery);
  
  // With get/post parameters
  (function($) {
    $(document).ajaxSuccess(function( event, xhr, settings ) {
      dataLayer.push({
        'event': 'ajaxSuccess',
        'eventCategory': 'AJAX ' + settings.type,
        'eventAction': settings.url + (settings.type == 'POST' && settings.data ? ';' + settings.data : ''),
        'eventLabel': xhr.responseText
      });
    });
  })(jQuery);
  
 /* STEP 6
  * Create new event
  * Name:                 ajaxEvents
  * Type:                 Custom Event
  * Fire on:  Event name: ajaxSucces
 */
 /* STEP 7
  * Create new tag
  * Type:       Universal Analytics
  * Track Type: Event
  * Category:   {{eventCategory}}
  * Action:     {{eventAction}}
  * Label:      {{eventLabel}}
  * Fire On:    ajaxEvents
  *
  * Note: This is an example. You should not fire on all ajaxEvents,
  * so after recognizing the particular event you want to measure,
  * adapt the rule to your trigger on step 6 and don't fire on all events.
  * Also note that in most cases you don't want to send the whole ajax
  * request as a eventLabel, so either process it with another javascript
  * variable, don't send it at all, or know exactly what you're doing.
 */
</script>