Who's reading what? Tracking User Interaction in WordPress's Arconix FAQ Plugin

I added a FAQ to my website and found myself with a new question: what FAQs were people actually reading? I'm using the WordPress Arconix FAQ plugin which let me easily author and display questions and answers, but doesn't appear to track usage.

My solution: push an event to Google Analytics every time a user expands a FAQ. Google Analytics does the heavy lifting, as it will store and report on event activity. All I have to do is to convince WordPress to send the event when the user clicks on a question. Here's how I did that.

Step 1: Add Event Tracking to my Theme

In my theme's functions.php I added the following code:

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script('theme-analytics',
                    get_template_directory_uri() . "/js/analytics.js",
                    ['jquery'],
                    md5_file(__DIR__ . "/js/analytics.js"));
});

This loads js/analytics.js when my theme loads, and forces the browser to pick up changes when I modify analytics.js. I've made analytics.js depend on jquery. This simplifies the code that will be found in analytics.js.

Step 2: Add The Event Tracking Code

Inside of js/analytics.js I added the following code:

jQuery(document).ready(function($) {
  var MEASUREMENT_ID = 'UA-XXXXXXXXXX-1';

  function sendEvent(action, category, label) {
    console.log("GA Event", action, category, label);
    
    gtag('event', action, {
      event_category: category,
      event_label: label,
      value: 1,
      send_to: MEASUREMENT_ID
    });  
  }

  $(document).on('click', '.arconix-faq-title', function() {
    var me = this;
    setTimeout(function() {
      var expanded = $(me).hasClass('faq-open');

      if(expanded) {
        sendEvent('show', 'faq', $(me).text());
      }
    }, 100);
  });

});

You'll want to be sure you update the value of MEASUREMENT_ID so that it contains your analytics property identifier.

I'm monitoring clicks on the CSS class .arconix-faq-title. I added a 100 millisecond delay because I'm not confident of the timing of things. I want to check if the FAQ is expanded, the time delay insures that when I do this check the UI code will have already run.

With these bits of code in place I can now check out FAQ activity in Google Analyics:

If I drill down into Event Category and set the Event Label as the secondary dimension I'm able to see the questions that get the most traction.

But Wait, There's More!

Now that I've gotten the hang of sending events, I couldn't stop at just tracking the FAQ page. I added this code to analytics.js to track Contact Form 7 submissions. In this case, I'm using the subject of the e-mail as the event label:

  $(document).on('wpcf7submit', function() {
    var subject = event.detail.formData.get('your-subject');

    sendEvent('submit', 'contact-us', subject);
  });

My company's home page includes a call to action button and a mini FAQ. I added events to track their interaction as well:

$(document).on('click', '.q-and-a-grid .entry', function() {
    var q = $(this).find('.question').text();
    sendEvent('click', 'home-faq', q);
  });


  $('a[href="#content-start"]').click(function() {
    sendEvent('click', 'home-button', 'learn-more');
    return true;
  });

You've Got To Have Goals

Along with viewing these events within Google Analytics, it's possible to set these up as goals. For example, here's the goal definition for my FAQ page:

One interesting use for goals is to power experiments within Google Optimize. For example, you could run A/B tests on different wording for a question, and have Google pick the one that's read most frequently.

Want a Hand?

Want help setting up custom even tracking for your website? I'll spare you reading the FAQ and tell you that I'm glad to help. Drop me an email via questions@ideas2executables.com or hit me up on my contact-us page.