Rebecca Cox - UX Designer
Menu button

Google Analytics for website designers

by

If you're designing a new website or mobile app, its a really good idea to make sure that there's enough data being captured in the site's Google Analytics setup for you to be able to see how well each user interface feature is working.

Down the track, this will help you to understand which features, such as layout styles and call to action wording - work the best, and which need to be altered or even removed. You'll also be well set up to make informed decisions about where and how to add new features.

Specific Google Analytics features for tracking usage of call-to-action buttons, AJAX actions (such as "content reveal" buttons), site search, and placement of UI features on the page layout are outlined below.

Event tracking for buttons and AJAX actions

Standard Google Analytics tracking records "pageviews", letting you see when users click from one page to another on your website.

To see how user's interact with the content and features within a page, you need to set up Event tracking, for:

For each event, you should be recording the category, action, and label.

As an example, for a UI widget which lets the user click on tabs to view content, like Foundation Tabs, you might have:

All of this is set up in the HTML/Javascript code on the website. If however the site is using Google Tag Manager to implement Google Analytics, the event tracking will be managed there, and may also still require some code changes on the site.

Page layouts - which links are clicked?

It can be extremely useful to get data on how your page layouts are being interacted with in a visual format such as a heatmap or clickmap.

In Google Analytics, the "In-page Analytics" reports will give you a view of each page, and show the number of times each link on the page was clicked. It's a bit of a poor cousin to heatmap tools like Crazy Egg or Clickdensity.

The problem with In-page Analytics is that it only counts clicks from the page to each URL - so if you have a link from the header and footer both going to your "About" page, it won't tell you which link received the clicks.

To get more accurate data that identifies which links are being clicked on, you need to set up Enhanced Link Attribution.

This requires a small change code change to the tracking code, with the rest of the setup done in the Google Analytics admin interface.

It works by using IDs for the HTML elements in the page - so there may be some additional code changes needed to add IDs for the tracking to work correctly.

In-page Analytics and Responsive Design

The In-page Analytics reports will display as an overlay on top of the view of the page for your browser screen size.

While there is a feature to look at the part of the page which a % of users could see without scrolling, this also displays over the top of the same view of the page, not taking any responsive design into account.

You also cannot view the report just for mobile or tablet traffic.

Some heatmap tools which claim to support responsive design are Miapex and Heatmap.ca. (See this question on Quora for a note from the developer.)

Site search tracking

If the website has it's own search tool, the folks looking after content for the website will thank you if you make sure that Google Analytics Site Search tracking is set up, and in any case its good practice to track usage. Will usage of site search be higher on mobile devices for example?

If there's any special features like an Advanced Search, or category based search, it can be useful from a design perspective to track the usage of these also. Then later you can review the usage of different features and search options.

Site search tracking is set up within the Google Analytics admin interface. There may also be some changes required to the website code if any URL parameters need to be rewritten for the tracking to work.

Virtual Pageviews

If your website is going to be developed as a single page, with "navigation buttons" taking the user to a section of the page, like epicentrecowork.org you might want to track these clicks as Virtual Pageviews.

This could make sense especially if the website will have full pages for each navigation link later on.

Virtual Pageviews essentially pretend that the user has clicked to a new web page, and these will appear in the Google Analytics content reports as if they were real pages on the website.

This tracking is set up in the HTML/Javascript code on the website, where you can specify a "fake" Title and URL for each one.

This technique can also be used to track clicks on links to download content. More information on tracking download links and how to implement virtual pageviews.

Although Event tracking could be used for downloads and for the type of navigation described, I think that in most cases Virtual pageviews are more appropriate.

Is content being used? Tracking scrolling

There's a nice bit of Javascript by Justin Cutroni which lets you see whether users are scrolling down - and hopefully reading - page content.

It tracks whether the user starts scrolling down, if they reach the bottom of the content, and if they reach the bottom of the page.

The resulting data will appear in the Event tracking section of the Google Analytics reports.