Create an Event for Clicks on Live Chat

Event for live chatview at full size

You can capture clicks on live chat as events.

Live chat can be a useful tool for visitor engagement on your site. If you have implemented live chat, you can track each click on live chat as an event.

As an example of implementation, let’s say that you’re currently calling live chat through a click on an image as follows:

<img src=”/images/live-chat-icon.png’ onclick=’openLiveChat()”>

To track clicks on live chat, you can add a Google Analytics event to onclick:

<img src=”/images/live-chat-icon.png” onclick=”openLiveChat();_gaq.push(['_trackEvent','livechat','click'])“>

You can use whichever naming convention you have established for your event categories, actions, and labels.

In an upcoming post, we’ll discuss how you can use the live chat events that you have captured.

Please share this post:
Facebook Twitter Plusone Linkedin Email

How HTML Event Listeners Generate Google Analytics Events and Virtual Pageviews

In the discussions about Google Analytics events and virtual pageviews, there seems to be more focus on the required syntax for the _trackEvent and _trackPageview method calls than on where and how these methods are triggered to begin with.

Let’s start with a basic example: a PDF link that you want to generate a virtual pageview. The link to the PDF can be written as very basic HTML:

<a href="/pdfs/winter-catalog.pdf">Winter Catalog</a>

This link will only access the PDF; it will not generate a virtual pageview in Google Analytics.

Fortunately, most HTML tags that constitute a Web page – in this case, the <a>…</a> tag – allow you to attach event listeners so you can “listen” for an action that occurs in the HTML tag and then execute your own JavaScript.

To continue with this example, we can add the onclick event listener to the <a>…</a> tag to generate our virtual pageview:

<a href="/pdfs/winter-catalog.pdf" onclick="_gaq.push(['_trackPageview','/pdfs/winter-catalog.pdf'])">Winter Catalog</a>

To generate an identical virtual pageview, you could also take advantage of the this object so you don’t have to manually include the path and filename as an argument:

<a href="/pdfs/winter-catalog.pdf" onclick="_gaq.push(['_trackPageview',this.href])">Winter Catalog</a>

As another alternative, you could use an argument that differs from the path and filename:

<a href="/pdfs/winter-catalog.pdf" onclick="_gaq.push(['_trackPageview','pdf-winter-catalog'])
">Winter Catalog</a>

As another example, let’s consider an image that pops up a different window when a visitor mouses over it. You or your HTML coders have probably already coded the popup to be triggered through the onmouseover event handler:

<img src="product-image.png" onmouseover="doPopup()" />

To generate a Google Analytics event for the mouseover and popup, you can add the _trackEvent call to the onclick handler:

<img src="product-image.png" onmouseover="doPopup();_gaq.push(['_trackEvent','images','mouseover','product-image'])" />

You can consult a comprehensive list of HTML event listeners to view all the specific user actions to which you can attach Google Analytics events or virtual pageviews.

Please share this post:
Facebook Twitter Plusone Linkedin Email

To See Navigation Before and After an Action, Use a Virtual Pageview Instead of an Event

Navigation Summary for virtual pageviewview at full size

You can view the Navigation Summary for a virtual pageview.

To capture a user activity that does not generate a regular pageview, you can code either an event or a virtual pageview.

Each has its advantages and disadvantages. Since events don’t generate pageviews, they don’t increase your pageview count and therefore do not affect metrics such as pageviews/visit.

If, however, you want to analyze pages that were viewed before and after this action, you must opt for the virtual pageview, since you can view the Navigation Summary for a virtual page but not for an event.

To ensure that you can still view total pageviews and pageviews/visit without inflation due to virtual pageviews, you can create an additional profile and apply a filter that excludes the Request URI(s) corresponding to the virtual pageviews.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Generate Play and Complete Events for Wistia Video

Video eventsview at full size

Wisita provides short pieces of code for generating Play and Complete events from your videos.

Apart from a providing a great overall service for video hosting – including a slick and intuitive interface, a responsive support team, and a free option for lower monthly bandwidth – Wistia makes it very easy to generate Play and Complete events for videos embedded on your Web pages.

Just add two small pieces of JavaScript to your page to see how many visitors, on both desktop and mobile browsers, are starting your video and how many are watching through the end.

You can create advanced segments based on these Play and Complete actions and apply them to your Conversion and Ecommerce reports. If you see that visitors who view the video are more likely to convert or transact, you’ll probably want to feature the video prominently and also consider using it in landing pages, emails, and other marketing and sales initiatives.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Isolate Form Abandonment Using Virutal Pageviews as Funnel Steps

Virtual pageviews for form fieldsview at full size

By generating virtual pageviews, you can have each step in a funnel correspond to a form field.

By representing a single form as a funnel, you can isolate drop-off to specific form fields, but how can you track individual fields when each funnel step in Google Analytics corresponds to a separate pageview?

The answer is virtual pageviews.

Without loading a new page into the browser, you can take advantage of the form’s built-in event handlers, such as onBlur, to generate a “virtual” pageview as the user completes fields and clicks the submit button.

These virtual pageviews will match any corresponding goal URL or funnel step that you have defined, just as an actual pageview would.

<input type="text" onBlur="if(this.value != '')_gaq.push(['_trackPageview','field-completed-phone'])" />

Excerpted from the Google Analytics Conversion Funnel Survival Guide.

Thanks to Brian Clifton for demonstrating this technique.

Please share this post:
Facebook Twitter Plusone Linkedin Email

View and Test Events in New Real-Time Report

Real-Time Events reportview at full size

Events are a recent addition to the Real-Time reports.

Did get that event right, or did I forget an apostrophe?

With the addition of Events to the Real-Time reports, you can now easily check that your events are firing correctly.

And, of course, once you have determined that your events are working, you can use this report just to see the events that users have generated in the last 30 minutes.

It’s always interesting to see activity on your site as it happens, so the Real-Time Events report adds a new point of interest to Google Analytics.

For more on the Real-Time reports, see 5-Minute Inactivity Drop-Off for Real-Time Reports, 30 Minutes for Session.

For another way to verify event coding, see Check Pageview and Event Tracking with Chrome Developer Tools

Please share this post:
Facebook Twitter Plusone Linkedin Email

Use JavaScript setTimeout() to Create Time-on-Page Goal

Creating a Google Analytics goal for time on a specific page poses two challenges:

• Although you can create a goal for time on site, there is no built-in goal option for time on a specific page (or for any other page-level metric apart from pageview).

• Google Analytics calculates time on page A only when page B is viewed, since it compares the page B timestamp to the page A timestamp to make this calculation. This prevents any last-page-in-visit from generating a time on page. Of course, as mentioned above, this is moot for goal tracking, since you cannot directly define a goal based on a page metric such as time on page.

The solution is the very useful and straightforward setTimeout() JavaScript function that you can use with an event or virtual pageview call.

For instance, to generate a goal after one minute of visitor time on a detailed product page, you can use the following code:

setTimeout("_gaq.push(['_trackEvent', 'time-on-page', '1-minute'])",60000);

After a delay of 60000 milliseconds, or one minute, this code would generate an event that counted towards any corresponding Event goal. Instead of _trackEvent, you could call _trackPageview as a virtual pageview, which would count towards any corresponding URL Destination goal.

For another use of setTimeout() in Google Analytics, see "Adjusted" Blog Bounce Rate with Customized Tracking Code.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Apply Page as Secondary Dimension to See Where Events Are Occurring

Page applied as secondary dimension to Events reportview at full size

You can apply Page as a secondary dimension to your Event reports.

Secondary dimensions are a very useful (and perhaps underused) feature of Google Analytics, since they allow you to segment your audience and your content by most conceivable combinations.

Bounce rate by country by operating system?

Sure.

Visits by landing page by referrer?

No problem.

In the Events reports – assuming, of course, that you have included event tracking code where it’s needed – you can take advantage of secondary dimensions to see which specific pages event are occurring on. If, for example, the footer on every page of your website links to a PDF or an external resource, you can apply Page as a secondary dimension to your Events reports and thereby determine not only how many events are occurring, but also where on your site they are occurring.

If you note a particularly high or low occurrence of events on specific pages, you could consider content or design changes as part of your ongoing effort to optimize your website’s performance.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Track Mobile Click-to-Call Actions as Google Analytics Events

Click-to-Call Eventsview at full size

You can track click-to-call actions on mobile Web pages as events in Google Analytics.

A useful new feature in HTML 5 is the tel: prefix that you can add before the href value of a link:

<a href="tel:8002221111"> Click here to call us now at 1-800-222-1111.</a>

Similarly to the mailto: prefix that launches an email client when clicked in a desktop browser, the tel: prefix initiates a phone call when the link in clicked in a smartphone browser.

Using the onlick handler within the link, you can insert event tracking code:

<a href="tel:8002221111" onclick="_gaq.push(['_trackEvent', 'Mobile', 'Click to Call'])">Click here to call us now at 1-800-222-1111.</a>

This handy convergence of mobile technology, HTML 5, Javascript and Google Analytics allows us to easily track calls that initiate from mobile pages. This is especially useful relative to desktop browsers, from which it remains difficult to track phone calls that your website has prompted.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Check Pageview and Event Tracking with Chrome Developer Tools

Checking Google Analytics events with Chrome Developer Toolsview at full size

You can check Google Analytics pageviews and events with the Developer Tools built into Chrome.

By taking advantage of the features built into Chrome for monitoring server requests, you can check that your pages are firing Google Analytics pageviews and events correctly:

1. Click the three-bar menu in the top right.

2. Select Tools > Developer Tools.

3. In the Developer Tools panel that appears at the bottom of the screen, select the Network tab.

4. Access a page on your website.

5. At the bottom of the Developer Tools panel, click Scripts, and locate ga.js in the list of requests on the left. This file, ga.js, is the Google Analytics Javascript file referenced by the Google Analytics tracking code in your Web pages.

6. At the bottom of the panel, click Images, and locate __utm.gif in the list of requests. This is the “tracking pixel” request to which ga.js appends a range of name/value pairs that Google Analytics parses into your reports.

Congratulations: Google Analytics has tracked this pageview successfully. If you also want to make sure that you have correctly formatted any event calls that you have included on the page – did I forget a single quote somewhere? – you can continue in Developer Tools as follows:

7. At the bottom of the panel, click the Clear button.

8. On your Web page, perform the action that is intended to generate an event.

9. Click __utm.gif in the refreshed request list, and select the Headers tab.

10. If, as formatted below, the Query String Parameters section lists utme with your _trackEvent parameters, Google Analytics has successfully tracked the event:

utme:5(twitter*follow)

The Developer Tools feature is, in fact, particularly useful for checking events, since the Google Analytics Real-Time reports do not monitor events as they do pageviews.

In addition to Developer Tools in Chrome, you can check pageviews and events using the Firebug plug-in for Firefox – thanks to Pranshu Arya for outlining this procedure. You can also use the Web Inspector in Safari if you have enabled the Developer menu in your preferences.

Please share this post:
Facebook Twitter Plusone Linkedin Email