Tracking spoiler opening in Google Analytics

This article presents the example of JavaScript-code. The code should be placed in the main file of your current active theme scripts. If you don’t know where to paste JavaScript-code you can use a special plugin.

Don’t forget to connect Google Analytics to your website.

It is recommended to add unique CSS-class to the shortcode you are going to track. You can make it in the following way:

[su_spoiler class="my-custom-spoiler"] Content [/su_spoiler]

Now you can use the following JavaScript code:

jQuery(document).ready(function($) {
  // Handle spoiler title click
  $('.my-custom-spoiler').on('click', '.su-spoiler-title', function() {
    var $spoiler = $(this).parent('.su-spoiler');
    setTimeout(function() {
      // Check that spoiler is open
      if (!$spoiler.hasClass('su-spoiler-closed')) {
        // Track event in GA
        ga('send', {
          hitType: 'event',
          eventCategory: 'Spoilers',
          eventAction: 'open',
          eventLabel: 'Campaign Name'
        });
      }
    }, 100);
  });
});