How to track textual input with Google Analytics

This week an analytics ninja showed me how to use Google Analytics to track the values entered into a text field. It comes down to sending a dummy page name to Google Analytics, containing the value entered into the field. Google Analytics faithfully records a “page view” for that value, which you can then see in the analytics reports in the same way that you can see any other page view. Magic.

For example, let’s say you have a search box on a documentation page, allowing readers to search a subset of the documentation.  It would be nice to track the most popular search terms entered into that field, as an indication of what most readers are interested in. If people are searching for something that is already documented, you might consider restructuring the documentation to give more prominence to that topic. And how about the terms that people enter into the search box without finding a match? The unmatched terms might indicate a gap in the documentation, or even give a clue to functionality that would be a popular addition to the product itself.

It turns out that you can track input values via Google Analytics. The trick is to make a special call to Google Analytics, triggered when the input field loses focus (onblur).

<input onblur="ga('send', 'pageview', 'my-page-name?myParam=' + this.value);" />

The above ga call sends a customised page view to Google Analytics, passing a made-up page name that you can track separately from the page on which the input field occurs. The made-up page name is a concatenation of a string ('my-page-name?myParam=') plus the value typed into the input field (this.value).

The string my-page-name can contain any value you like. It’s handy to use the title of the page on which the input box occurs, because then you can see all the page views in the same area of Google Analytics.

Similarly, the part that contains the input text can have any structure you like. For example, if the page is called “Overview” and the input field is a search box, the Google Analytics call could look like this:

<input onblur="ga('send', 'pageview', 'overview?searchText=' + this.value);" />

This blog post assumes you have already set up Google Analytics for your site. See the Google Analytics setup guide. The Google Analytics documentation on page tracking describes the syntax of the above “ga” call, part of “analytics.js”.

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 28 August 2014, in technical writing and tagged , , , , . Bookmark the permalink. 2 Comments.

  1. Cool! I wonder if this allows getting passwords from the password fields🙂

  2. A very interesting post. I was actually thinking on how to embed Google Analytics to my WIKI pages. And here is your post. Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: