How to Integrate Click Events between Segment, Google Analytics & WordPress

UI design is a challenge. As developers, we often design our products according to a hypothesis about how our users will use what we make. But too often, we don’t have evidence to support that hypothesis. As a result, we don’t know how our users actually use our products. Without this information, improving our products to achieve our goals is difficult.

We found a solution at Alpin that allows us to learn about how prospective customers use our site. This allows us to use evidence to improve our product, instead of simply guessing what changes should be made based on visitor anecdotes or our own instincts. We do this by integrating Segment into our product.

Introducing Segment

We needed a way to anonymously track user activity on our site, from navigation through the site to clicks on CTAs. Segment is the perfect solution for us.

Segment works by receiving tracking calls made by the product and services you use. It then integrates with your analytics and marketing tools to give you insights into how your product is being used. In our case, we wanted to track user activity on our landing page so we could ultimately learn how to get better click through to our main product.

We began by integrating Segment with Google Analytics (GA). After creating a Segment account, you are prompted to connect your various accounts to Segment, which we did for GA. Segment then uses GA as a “destination” for the information we send to it. When me make a tracking call to Segment from our product, the information we send is formatted to a GA specification, and is forwarded on to GA for us to review and analyze using their interface.

Let’s see how this works.

Integrating WordPress and Segment

Look in the WordPress Plugins library, and you’ll find that Segment does indeed have a plugin…

… that was last updated 2 years ago. In the fast-paced world of web development, this is effectively deprecated.

Luckily, Segment has created a pure-JS library that can be installed on any website to track user activity: analytics.js.

Readers familiar with WordPress know that code that should be executed on every page should be placed in one of a few places that is loaded on every page. We went with the footer.

We entered the Appearance editor in WordPress

and edited the Theme Footer file that is used by our theme

Here, we added a Javascript – well, script – where we load analytics.js

<?php

?>

<script type= “text/javascript”>

</script>

Getting analytics.js installed was as easy as copying the initializer code from the Analytics.js Quickstart Guide.

<script type= “text/javascript”>

(function(){

// Add a version to keep track of what’s in the wild.
analytics.SNIPPET_VERSION = ‘4.0.0’;

// Load Analytics.js with your key, which will automatically
// load the tools you’ve enabled for your account. Boosh!
analytics.load(“YOUR_WRITE_KEY”);

// Make the first page call to load the integrations. If
// you’d like to manually name or tag the page, edit or
// move this call however you’d like.
analytics.page();

})();

</script>

Following the comments provided by Segment, after you copy in the Analytics.js loader code, add your Segment write key in the analytics.load() call. Then, to track page changes as the user navigates through your site, call analytics.page().

Go to the Segment live debugger for the Javascript source, and you’ll see events coming in as you navigate the site.

If you’ve correctly integrated GA as a Segment destination, you’ll also see Segment formatting and forwarding those events in the Real-Time page in the Reports section of the sidenav, under Events. Amazing!

Adding Click Events

Tracking how your users navigate your site is very valuable information. But Segment allows us to go even deeper into learning about user activity by tracking click events.

We wanted to track many different click events on the site and wanted to analyze them through GA. Setting this up was almost as easy as installing Segment in the first place.

For each element we want to track with click events, we add three custom classes. This is done by editing the WordPress element we want to track:

When we scroll down to the Custom CSS class input, we can add our custom classes that will be processed by the tracking code we will add.

We decided on the following format for our custom classes. Since we want to analyze our click events with GA, we need to provide three data: event, category, and label. We make three classes to track click events, prefixed with alpin-segment- so that we don’t have class conflicts with WordPress:

Class Template

Purpose

alpin-segment-event-<Event Name>

Define the event we want to track

alpin-segment-category-<Category Name>

Provide a category for GA to sort our events

alpin-segment-label-<Label Name>

Add a piece of metadata so that we know what kind of event took place.

In our case, we wanted to track clicks on the contact form submit button on our pricing page. We went with an event name of “submit”, a category name of “website-content”, and a label name of “pricing”. Following the scheme we developed, this gave us the following CSS classes to add:

GA Datum

Custom Class

Event

alpin-segment-event-submit

Category

alpin-segment-category-website-content

Label

alpin-segment-label-pricing

We added these classes to the Custom CSS class field in WordPress from above, and saved our changes. Now we can identify the buttons we want to track, and provide the data we need to make our Segment calls.

In order to send the click events to Segment, we added the following code to our Theme Footer file in WordPress, after our analytics.page() call:

<script type= “text/javascript”>

(function(){

analytics.page();

document.addEventListener(“DOMContentLoaded”, function (event) {

var elements = $(“*[class*=’alpin-segment-‘]”).each(function(index) {

var segmentData = {};

$(this).attr(‘class’).split(‘ ‘).filter(function(value) {

var splitClass = value.split(‘-‘);

splitClass.splice(0, 2).join(‘-‘);

if (splitClass[0] === “event”) {

splitClass.splice(0, 1);

segmentData[‘event’] = splitClass.join(‘-‘);

} else if (splitClass[0] === “category”) {

splitClass.splice(0, 1);
segmentData[‘category’] = splitClass.join(‘-‘);

} else if (splitClass[0] === “label”) {

splitClass.splice(0, 1);
segmentData[‘label’] = splitClass.join(‘-‘);

}

});

analytics.trackClick($(this), segmentData.event, {

category: segmentData.category,
label: segmentData.label

});

});

 });

})();

</script>

Let’s look at what’s going on here. We listen for the DOM content to be loaded, and then use JQuery to find all elements on the page that have a class containing alpin-segment-. For each class on the element that has this prefix, we manipulate the class string to identify which type of alpin-segment class we’re working with and use the class to construct our segment call. For instance, we find the alpin-segment-event- class, pull out the event name we want to use, and set the event property on the segmentData object to hold this datum.

Once we have constructed our segmentData object, sending the click event to Segment is as easy as calling analytics.trackClick(), passing in the element the class is on using JQuery, the event name we pulled out of our class names, and an object containing our category name and label name.

When we update our WordPress page and click our button, we can see our trackClick call being sent to Segment in Chrome Developer Tools:

If we look at the request, we can see our event, category, and label names set as we want them to be:

With all of this setup, we can now see our track event appearing, with the event, category, and label names, in the Segment debugger:

Click Events Segment Google Analytics WordPress

Finally, when we go to GA’s Real-Time events page, we can see our click event coming in, ready to be analyzed.

Click Events Segment Google Analytics WordPress

Incredible.

Wrap Up

With Segment, WordPress, and a little ingenuity, we can track user activity on our products so we can improve our UI and ultimately our whole UX. From here, we plan to add more tracking to our site, as we continue to get more and better information about how it is being used.

Thanks for reading, and from all of us at Alpin, happy coding!

Matthew Thompson