Editor's note:
Thanks for visiting GA Tip of the Day. Please see current posts on the Cardinal Path blog.

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

2 thoughts on “How HTML Event Listeners Generate Google Analytics Events and Virtual Pageviews

  1. Eric…great post, very useful, great documentation. Definitely a keeper as I posted it to my delicious account.

    I use event tracking for links of the site, pdf downloads, video, and testing calls to action on a page. This post is cool because it shows me I can get granular if I want to…love tracking the image mouse over, very cool.

    I think if there is one thing I might push for is tracking every time someone opens something in a new window. Thank you, Take care, Mary Kay

    • Mary Kay, glad you liked the post.

      Yes, it’s a good idea to track every time someone opens something in a new window – especially if it’s not an HTML page that you have access to, or not an HTML page at all, and you can therefore not embed your own Google Analytics tracking code.

      Thanks – take care,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>