Events

From ClickTale Wiki
Jump to: navigation, search

Events are a convenient way of tracking visitors based on their actions. By adding a piece of code to elements on your site (links, URLs, movies, forms, etc.), visitors who interact with tagged elements will have the Event tag attached to their browsing history. You can then search for and watch recordings of visitors with Events using our Search tool.

For example, you are able to tag your checkout page with a “checkout” Event and tag your checkout form as a “purchase” Event. Then any visitor that reaches your checkout page will have their browsing history tagged with the Event “checkout”, and if the visitor then completes your checkout form, their browsing history will also be tagged with the Event “purchase”. You are then able to use our Search tool to find and view videos of users that either completed or failed to complete the check out process.

This feature is only available in some of the subscription plans.

Contact your account manager for details about upgrading.

When to use Events

Adding Event tags is simple (see below) and you can tag just about any elements on your site.

Some useful examples of how to use Events:

  • Marketing
    • Track visitors arriving to your site from specific campaigns (email, ppc, etc.) - This is a great way to evaluate the browsing patterns of specific traffic sources in order to optimize landing pages as well as marketing messages and venues.
  • Ecommerce
    • Shopping Cart Abandonment - Adding Events to the checkout page and to the "submit" button on your checkout form will allow you to search for visitors that reached the checkout process but never completed it. You can then watch these recordings to see exactly why the specific visitors abandoned their carts.
    • Purchase Size - Evaluate visitors based on the size of their purchase by adding an Event tag, for example, when a purchase is $100 or more. You may discover that visitors that make large purchases have different browsing patterns.
    • Purchase Type - Excellent for segmenting visitors based on demographics. Add different Event tags for items most likely to be purchased by men or women, different economic classes, etc. This will give you great insight into how different types of people browse your site.
  • Customer Service
    • Errors - ClickTale's built-in "JSERROR" Event can be used to quickly and efficiently debug your website to ensure an enjoyable browsing experience for your visitors. Whenever a visitor encounters a JavaScript error, they will be automatically tagged with the "JSERROR" Event. Simply view the recording with the Event, and hover over the "?" next the word "JSERROR" on the "Actions" line to view exactly which line of your code is generating the error.
    • Contact Form - Add an event to the submit button of your contact form. You can then find and view the browsing sessions of visitors with complaints or questions to gain more insight as to their problems.


Events are used to analyze websites by identifying visitors with either specific interactions or ones who took part in business processes. In your ClickTale reports, you can:

  1. Segment visitor recordings based on interactions using our Search tool and Events filter
  2. Produce a list of all recorded Event Tags, and sort them by popularity
  3. View each recording's tags along with all other recording properties

There is no limit on the number of Events you can add to your pages. Please note that the length of an event tag is limited to 255 ASCII characters including spaces.

How to add a ClickTale Event

There are 3 methods for adding an event to ClickTale tracking:

  1. Adding page events in the account interface - read this article
  2. Adding ClickTale Events via a URL (below)
  3. Adding ClickTale Events in the page code (below)


Adding ClickTale Events via a URL

To add an Event for visitors that visited the following page, for example: "http://domain/page" with the tag "SEM", change the link leading to the page or the page’s URL to "http://domain/page?ct=t(SEM)".

For more detailed instructions, please see How to Use the ClickTale URL API


Adding ClickTale Events in the page code

The method which allows the maximum number of options when tagging an element, is to include the following ClickTale JavaScript function call:

ClickTaleEvent(<Event>);

where <Event> is any valid JavaScript string that best describes the page or a specific Event.

Example

For example, in order to add an Event tag to the interaction of submitting a login form, you should add something similar to:

<form action="http://domain.com" method="post" onsubmit="if(validate(this)) {ClickTaleEvent('LoginFormSubmitted');} ">
<fieldset>
<input type=...
...</fieldset>

when the form is submitted:

<form ... onsubmit="ClickTaleEvent('LoginFormSubmitted'); ..." ... >

Personalization

You have the option to "personalize" an Event:

<form ... onsubmit="ClickTaleEvent('LoginFormSubmitted:' + UserName); ..." ... >

where UserName is a JavaScript variable holding the submitting user name.

Note: If your onsubmit attribute uses single quotes, then you would need to use double quotes inside the ClickTaleEvent function to implement correct nested quotes.

It is recommended to wrap the call with a check of existence as the function declaration resides in an external JavaScript file. The best would be to write your own wrapper function. Here is an example:

function AddClickTaleEvent(Tag)
{
   if (window.ClickTaleEvent)
       ClickTaleEvent(Tag);
   else
       // optionally do something to log this failure, but avoid disrupting the page flow
}

Tag an Entire Pageview

You also have the option to tag a pageview by adding the following code (with a unique Event name) below the Bottom part of the ClickTale tracking code:

<!-- Set Clicktale Tag -->
  <script type="text/javascript">
     if(typeof ClickTaleEvent=="function")
        ClickTaleEvent("Page_Name");
  </script>
<!-- End Clicktale Tag -->

Using Multiple ClickTale Events

If you want to tag an element with more than one event, you have to do so separately for each event; If you are tagging via URL, you will have separate the tags as in the following example: http://domain/page?ct=t(SEM),t(SECOND) You can tag a pageview by adding the following code (with a unique name for each of the events) below the Bottom part of the ClickTale tracking code:

<!-- Set Clicktale Tag -->
  <script type="text/javascript">
     if(typeof ClickTaleEvent=="function")
        ClickTaleEvent("Page_Name");
        ClickTaleEvent("Second");
  </script>
<!-- End Clicktale Tag -->

Using ClickTale Events with Email Tracking and Campaign Tracking

You have the option to track a specific campaign, by creating a unique tag for that campaign and using it in advertisements. In the same way, you can create a unique tag for a particular email, allowing you to then track visitors according to which campaign or email they came through.

Using ClickTale Events to Help Recognize Form Submission

If you have a form which uses a standard submission element (as described here) but you have problems recognizing successful form submission (e.g. if the submission is done via an AJAX call). You can add the following ClickTale Events which will let ClickTale know the status of the submission:

  • form_submit_success for a successful form submission
  • form_submit_fail for an unsuccessful form submission


Please note: the events must occur after the submission process is completed. If the submission is done asynchronously, it should happen when a response arrives, not when the onsubmit event is handled. Read more here.


Searching for Users Tagged with an Event

In recordings

You can find recorded visitors based on whether or not they have been tagged with a specific Event using the ClickTale Search tool. Using the example above, you can search for visitors that have the Event tag for "Checkout" but do not have the tag for "Purchase". This will generate a list of recordings of visitors that made it to the Checkout page but never completed the purchase:
To perform the search:

1. Go to your Search page by clicking on the "Search visitors" link on your Project Dashboard.
2. Choose the "Events" filter.

choose the Events filter text

3. Select your Events to filter by. Click once to include the Event, twice to exclude.

filtering Events text

4. Click "Apply", then "Search".

In Heatmaps

You can also create Heatmaps filtered by events triggered.

  1. Click the Edit icon of the Page Selection drop-down,
  2. In the window that opens, click "Define the page using an EVENT".
  3. Proceed as in step 3 above.

Heatmap events.png


Using ClickTaleEvent before the Tracking Code Loads

It is possible to call the ClickTaleEvent function before the bottom part of the tracking code is included: you would need to buffer the calls to the function (in this scenario you would need to call the BufferedClickTaleEvent() function instead of the ClickTaleEvent() function):

var ClickTaleEventBuffer = [];
function BufferedClickTaleEvent(tag) {
  if(typeof ClickTaleEvent == "function") {
     ClickTaleEvent(tag);
  } else {
     ClickTaleEventBuffer.push(tag);
  }
}
setTimeout(function tagBuffer() {
  if(typeof ClickTaleEvent == "function") {
    for(var i = 0; i < ClickTaleEventBuffer.length; i++) {
       ClickTaleEvent(ClickTaleEventBuffer[i]);
    }
  } else {
     setTimeout(tagBuffer, 100);
  }
}, 100);