Tracking events

To set up 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.

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.

Usually you want to call the second example whenever an event of this type occurs.

For example, to increment the count for this event whenever someone clicks a certain button on your site, first register an event handler on the “click” event for the button element and then execute the sample code snippet from the screenshot above.

document.querySelector('#my-button').addEventListener('click', function() {
    koko_analytics.trackEvent('Button clicked', 'From page: ' + window.location.pathname);
});

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 3 times. Twice from the homepage and once from the contact page.

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);
     });
});

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
});

Sample event tracking snippets

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