Tracking custom events

To set up custom event tracking with Koko Analytics, first ensure you have purchased Koko Analytics Pro and that you have the Koko Analytics Pro plugin installed and activated.

Creating your custom event type

In order for Koko Analytics to track custom events, you will first need to tell it what type of event you would like to track. To do this, head over to Dashboard > Analytics in your WordPress admin area and click the Settings link in the top right corner of your screen.

Locate the Events section about halfway down the page.

You can register new events using the input field. Enter a name for your event (like “Button clicked”) and click the Add event button.

Once the event is added, you’ll be taken to a page containing some sample code snippets for how to increment the count for this event.

Tracking a custom event

To track a custom event of the type Button clicked, we will need to call window.koko_analytics.trackEvent(‘Button clicked’) whenever this event occurs on your site.

For example, we can attach an event listener in JavaScript to all clicks on the HTML element with the .wp-element-button class attribute to increment the count for our event.

document.addEventListener('click', function(el) {
  if (el.target && el.target.matches('.wp-element-button')) {
    koko_analytics.trackEvent('Button clicked', 'From page: ' + window.location.pathname);
  }
}); Code language: JavaScript (javascript)

This example increments the count for the Button clicked event with the current path on your website as its parameter. In your analytics dashboard, this will look like this:

You can see that the Button clicked event was recorded for a grand total of 11 times from various pages.

Attaching values to an event

The trackEvent function accepts an optional third parameter that takes a numerical value. You can use this parameter to attach a numerical value to an event occurence.

Let’s say you have a custom event called Order Purchase and you want to track an event for a purchased item with a monetary value of 50:

window.koko_analytics.trackEvent('Order Purchase', 'Grey T-shirt', 50);Code language: JavaScript (javascript)

Where do I add the JavaScript snippet?

The best place would be in your child theme or a plugin of its own that then hooks into the wp_footer action hook, but we realise that may be too much for a simple one-off snippet.

Luckily, there are various plugins that allow you to add snippets of code to your site’s header or footer.

We recommend adding your snippet for tracking your custom event in the footer of your site. A best practice is to wrap it in an event listener so it doesn’t run before your entire page has finished loading, as shown below.

window.addEventListener('load', function() {
    // Your custom event tracking logic goes here:
    document.querySelector('#my-button').addEventListener('click', function() {
        koko_analytics.trackEvent('Button clicked', 'From page: ' + window.location.pathname);
     });
});
Code language: JavaScript (javascript)

To add this snippet via a PHP filter hook, use the following:

add_action('wp_footer', function() {
    ?>
    <script>
    window.addEventListener('load', function() {
        // Your custom event tracking logic goes here:
        document.querySelector('#my-button').addEventListener('click', function() {
            koko_analytics.trackEvent('Button clicked', 'From page: ' + window.location.pathname);
         });
    });
    </script>
<?php
});

Code language: PHP (php)

Sample event tracking snippets

Our code snippets directory on GitHub contains a collection of a few commonly used event tracking snippets.