Use onmousedown JavaScript Listener for Events if onclick Doesn’t Work

Real-Time Events reportview at full size

Whichever JavaScript listener you use, you can check your event in the Real-Time reports.

If you’re trying to generate a Google Analytics event based on a click and onclick isn’t working, try onmousedown instead.

Let’s say that you want to track a click on the following mailto: link as a Google Analytics event:

<a href="mailto:[email protected]?subject=Demo%20Request">mailto: link</a>.

If you use the JavaScript onclick handler, make sure to test the event in multiple browsers, because if the “mouseup” part of the click is not recognized, onclick never fires:

<a onclick="ga('send', 'event', 'link', 'mailto', this.href);" href="mailto:[email protected]?subject=Demo%20Request">mailto: link</a>.

If onclick is proving unreliable, use onmousedown instead:

<a onmousedown="ga('send', 'event', 'link', 'mailto', this.href);" href="mailto:[email protected]?subject=Demo%20Request">mailto: link</a>.

If you’re using jQuery, you can similarly use the .mousedown() listener instead of .click().

Whichever option you choose to capture your events, you can test your events in the Real-Time reports.

Please share this post:
Facebook Twitter Plusone Linkedin Email

Generate Print Events with onafterprint JavaScript Handler

For visitors using Firefox or Internet Explorer, you can combine the built-in onafterprint JavaScript handler with Google Analytics _trackEvent code as below to record each time a Web page in printed:

<body onafterprint="_gaq.push(['_trackEvent','page','print', document.location.pathname+document.location.search])">

The specific parameters that you pass to _trackEvent are your decision, but you’d certainly want to record the URL of the page printed – either as the event label or possibly the event action. (In the example above, document.location.pathname is used to capture the part of the URL after the domain but before any question mark, and document.location.search is used to capture any question mark in the URL and the querystring that follows the question mark.)

Note that onafterprint is used within the <body> tag, so you’ll probably incorporate it into your page template (and not inject on a page-by-page basis).

As noted above, onafterprint is supported only in Firefox and IE, but since it’s probably safe to assume that Chrome and Safari users print pages at roughly the same rate as Firefox and IE users, you could easily apply advanced segments to calculate browser percentages and extrapolate print events for just Firefox and IE to print events for all browser types.

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

Find Scripting Errors with the Chrome JavaScript Console

Chrome JavaScript Consoleview at full size

The Chrome JavaScript Console displays scripting errors.

You access a new page on your website and check the Google Analytics Real-Time > Content report, but the page is not listed.

You then check Google Tag Assistant in Chrome, and – surely enough – you see a red “Not Working” error.

You right-click directly on the page, select View Source from the context menu, and verify that the Google Analytics tracking code is present on the page.

Why isn’t the page tracking?

The problem could be a JavaScript error. Any script error that occurs higher up in the page source than your Google Analytics tracking code will prevent the tracking code from executing.

Even if you’re not in a position to fix JavaScript errors yourself, you can take advantage the Chrome JavaScript Console as an primary tool for troubleshooting problems with the tracking code and other Google Analytics elements such as events and custom variables.

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

Enhanced Link Attribution for Better In-Page Analytics

In-Page viewview at full size

With Enhanced Link Attribution, the In-Page view shows clickthroughs for Javascript links and separate links to the same page.

The usefulness of the In-Page view in the Google Analytics Content reports has heretofore suffered from the following two drawbacks:

 

- Separate links to the same page, such as Home links in the page header and footer, showed the same number of clickthroughs.

 

- Only standard href links were tracked; Javascript links and redirects were not.

 

With Enhanced Link Attribution, you can now add two lines to your Google Analytics tracking code to eliminate these two issues, and also see multiple destinations for a single page element, such as a search button.

 

See the Google help page for the simple tracking code modification – definitely worthwhile for most websites.

 

Special thanks to Romain Damery for alerting us to this very significant update.

Please share this post:
Facebook Twitter Plusone Linkedin Email