Google Analytics for website designers
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:
- Clicks on buttons and links that open popup or modal windows
- Completion of forms which are submitted via AJAX, where the user remains on the page after submitting
- Clicks on buttons which reveal hidden content, or load additional content via AJAX
- Any external links which you want to track
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:
- Event category = Display tabbed content
- Event action = Clicked [name of button] button
- Event label is useful especially where there are multiple instances of the same type of widget on the page. It can be used to identify which was clicked on, eg Event label = [Title to identify this content item]
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.
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 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
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.