Events

From ClickTale Wiki

Events are a convenient way of tracking visitors based on their actions. By adding an extra piece of code to elements of 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 Events using our Search tool.

For example, you could tag your checkout page as 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 movies of users that either completed or failed to complete the check out process.

Please Note: ClickTale Events are only available to Silver, Gold and Enterprise customers, as noted on our pricing page as "Behavioral Tracking".

[edit] When to use Events

Adding Event tags is pretty simple (see below) and you can tag just about any elements in 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 submit button on your checkout form will allow you to search for visitors that reached checkout but never completed the checkout process. You can then watch these recordings to see exactly why 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 find 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 (the "personalize" code is very useful for this). You can then find and view the browsing sessions of visitors with complaints or questions to gain more perspective on their problems.

Events are used to analyze a website by identifying visitors with either specific interactions or 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 in your pages. An Events tag's length is limited to 255 ASCII characters including spaces.

[edit] How to add a ClickTale Event

[edit] Tagging ClickTale Events via URL

If you want to add an Event for visitors that visited 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) or to http://domain/page#ct=t(SEM). Similarly, if the page has parameters, change the link from http://domain/page?param=x to http://domain/page?param=x&ct=t(SEM) or to http://domain/page?param=x#ct=t(SEM).

[edit] Tagging ClickTale Events in the page code

The most versatile way to adding an Event to a specific page element is to include the following ClickTale JavaScript function call:

ClickTaleTag(<Event>);

where <Event> is any valid JavaScript string that best describes the page or a specific Event. For example, 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)) {ClickTaleTag(' LoginFormSubmitted’); ">
<fieldset>
<input type=...
...</fieldset>

when the form is submitted, as in:

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

or, you can "personalize" the Event:

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

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

Note that if your onsubmit attribute uses single quotes, then you would need to use double quotes inside the ClickTaleTag 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 like this:

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

You can tag a page by adding the following code (with its own unique Event name) below the ClickTale tracking code:

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

[edit] Tagging multiple ClickTale Events

If you want to tag an Event with more than one tag, you have to do so separately for each tag; 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) If you are tagging in the page code, you will need to use ClickTaleTag separately for each tag, as shown here:

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

You can tag a page by adding the following code (with its own unique Event name) below the ClickTale tracking code:

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

[edit] Using ClickTale Events with email or campaign tracking

If you want to track a specific campaign, you can create a unique tag for that campaign and use it in the advertisement. 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.

[edit] Using ClickTale Events to help recognize form submission

If you have a form which uses a standard submission element (as described here) but you still have problems recognizing successful form submission (e.g. if submission is done via an AJAX call). You can add the following ClickTale Events which will let ClickTale know the status of a form 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, so if it is done asynchronously, it should happen when a response arrives, not when the onsumbit event is handled.

[edit] Searching for users tagged with an Event

You can find recorded visitors based on whether or not they have been tagged with a specific Event using the 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 a purchase:

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

2. Choose the "Events" filter

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

4. Click "Apply" then "Search"

[edit] Using ClickTaleTag before the tracking code loads

If you need to call ClickTaleTag before the JavaScript is included, you can buffer the calls to the function:

var ClickTaleTagBuffer = [];
function BufferedClickTaleTag(tag) {
  if(typeof ClickTaleTag == "function") {
     ClickTaleTag(tag);
  } else {
     ClickTaleTagBuffer.push(tag);
  }
}
setTimeout(function() {
  if(typeof ClickTaleTag == "function") {
    for(var i = 0; i < ClickTaleTagBuffer.length; i++) {
       ClickTaleTag(ClickTaleTagBuffer[i]);
    }
  } else {
     setTimeout(arguments.callee, 100);
  }
}, 100);