Creating Custom Google Analytics Events In Drupal

intelligence tutorial custom events featured 2

Creating Custom Google Analytics Events In Drupal

One of the more powerful but rarely used features in Google Analytics is event tracking. A standard Google Analytics install just tracks page views. Event tracking allow us to record many additional items such as when someone shares a page on a social network, comments on a blog, submits a form, or clicks on calls to actions.

The challenge with event tracking is it is not automatic like page views. Your site has to tell Google Analytics when an event has occurred. The Intelligence module solves this issue by providing a flexible framework for managing and triggering events in Google Analytics.

Preset and Custom Events

The Intelligence module comes with several preset events that automatically track items site managers commonly want to know about. You can view the events in your site by going to Admin > Config > Services > LevelTen Intelligence > Events. The items in this list will vary based on which modules you have installed that implement preset events.

Intelligence events list

The events in the list after a fresh install are all preset events that are coded in modules to track automatically.  If you completed the previous tutorial on managing Google Analytics goals in Drupal, you will notice the example goal "Bingo" we created is included in the events list. This is because goals are in actuality just a special event. In this tutorial we will look at creating custom events that you can use to track practically anything on your site without programming. 

To create your first custom event, click the Add event inline link at the top of the event list.

The event add/edit form has many options that can be a little overwhelming at first. Don't worry, you don't have to understand what all the fields are to start creating custom events. In fact, our first custom event will only need two fields; key and title.

Adding event crossing attempt

The key is a unique identifier for the event. The title is the administrative name for the event. Enter the following text for your first event:

  • Key: crossing_attempt
  • Title: Crossing attempt

Leave all other fields as is and click Add event.

You have now created your first custom event. To trigger the event, we want to use the intel event fields method we implemented in the managing goals tutorial. If you edit a node/entity of a type that has added the intel event fieldset collection, you now can trigger the custom event by selecting it in the event dropdown.

Go ahead and create a new basic page node titled "Bridge of Death" and add the Crossing attempt event to it. If you have not added the intel event fields to the basic page content type, you will need to do that first (see managing goals tutorial link above).

node edit adding crossing attempt event

Now open up the Google Analytics real time events report in another browser tab. When you view the new node page, you can now see the event triggering in the report.

Hint: there is a refresh filter applied to events, so you may have to navigate to another page then back to trigger the event.

Google Analytics real time events report showing crossing attempt

Understanding Google Analytics events 

Events in Google Analytics are similar to goals in GA, however events offer some additional flexibility. Goals essentially have two parameters; a name and value. Events enable us to use up to five parameters;

  • category
  • action
  • label (optional, defaults to empty string)
  • value (optional, defaults to 0)
  • non-interaction (optional, defaults to false)

While Google Analytics goals use a single name identifier, events use three. The category, action and label parameters work together to form a classification hierarchy. The default Google Analytics events report will displays a list of all event categories. If you click a category, you will see a list of all actions under that category.

For example, if you click the Crossing attempt event in GA's real time event report you will see the event action which by default is set to the node/entity title and the label which defaults to the page's system path. Note that since for the Crossing attempt event we left the action and label fields blank, the Intelligence module automatically added the node title and system path for these parameters. 

Google Analytics action and label under events

The value parameter is simply a numeric value. It might represent a dollar value similar to Google Analytics goals or might be some other type of number related to the event. For example, for a video play event the value could be the number of seconds the visitor watches the video.

Non-interaction is a boolean value (true or false). If set to true the event will not count as a hit for bounce rate calculations.

You can set these values in Drupal under the Google Analytics event values fieldset on Intelligence's event edit form (select edit in ops from the event list at Admin > Config > Services > Intelligence > Events).

Custom Event triggers

Intelligence system implements a wrapper to enhance management of Google Analytics events called an intel event. One of the main features of this wrapper is it enables you to customize when and how an event is triggered leveraging the power of jQuery.

The Crossing attempt event we created earlier triggers whenever someone views the page. This is the default behavior for intel events. But lets say we wanted to trigger an event when someone does something on the page, such as clicks a particular link or submits a form. We can accomplish this using the selector and event fields in the Event trigger fieldset on the event edit form.

To illustrate how this works, lets create a second custom event called Crossing success using the following inputs:

  • Key: crossing_success
  • Title: Crossing success
  • jQuery event: click
  • jQuery selector: .correct-answer 

Leave all other settings as their defaults and click the Add event button at the bottom. 

Adding intel event crossing success

The Crossing success event does not automatically trigger when the page loads. It will trigger only when a visitor clicks a link with the class correct-answers.

To see how this works lets go back to our Bridge of Death node to enable the event. We need to do two things to make this work correctly, first add the Crossing success event and second add some content to the node that contains the trigger link.

In the body of the node, enter the following content: (make sure to enter as source HTML. Turn off any WYSIWYG editor and select a text format that permits HTML.)

Under the Intelligence fieldset add the event by clicking the Add another item button then selecting the Crossing success event. In the value field next to the event selector, enter the number 5. This will set the value of this event to 5 in Google Analytics.

Node edit form implementing two crossing events

Now when you view the page, the Crossing attempt event still triggers when the page is viewed but the Crossing success one does not. Only when visitors click the link for the correct answer will the Crossing success event trigger. Using these two events you could then calculate for every person who comes to the Bridge of Death page and how many know the answer to the gate keepers question.

You can combine custom events and various settings to devise a wide range of variants. For example you might also want to track how many people clicked the wrong answer. Hint: create a Crossing fail event similar to Crossing success and change the jQuery selector to .choices a:not([class='correct-answer'])

Or you could setup several different pages with variants of the question and see if there is any difference in how people answer each variant. Google Analytics events report coupled with GA's filters provide fairly flexible tools for analysis.

Google Analytics event report

Beyond the basics

This tutorial is meant to be an introduction to how to use Intelligence events. Custom events enable site administrators to setup their own events without having to program modules. We covered the essentials for using custom events in this tutorial. There are some more advanced options such as using tokens, event types and callbacks which we will cover in future tutorials.

Even more sophisticated events are possible within module programming. The Intelligence system provides a set of preset events for things like conversion funnel and engagement tracking. It also enables a set of hooks for module developers to implement their own intel events. These subjects will be covered in future tutorials. 


Related Posts

Managing Google Analytics Goals in Drupal

Tom McCracken
Read more

Creating Custom Fields In Drupal Using Display Suite

Kyle Taylor
Read more

Drupal In a Box - Creating really custom functionality within Drupal 7

Ahmad Kharbat
Read more

Google Analytics and Google Spreadsheets: Create Your Own Dashboard

Felipa Villegas
Read more

Drupal and Google Analytics - How to Track Downloads when using the File Entity Module

Kristin Brinner
Read more

OE Pro: Creating Custom Content Layouts With Drupal 7

Brent Bice
Read more