FAQ pages are typically fairly easy from a design standpoint. But, they also beg the question: Which of these questions are truly “frequently asked”? Rather than relying on guesswork when it comes to FAQ content, we could find out which questions are truly the common ones by tracking user activity on the FAQ page and analyzing the results.
Every now and then I get asked to help a client determine just how effective a particular page is at its particular purpose. Sometimes I can reach for Google Analytics or some other user tracking tool, but sometimes I need a customized tool to really drill into how effective the page truly is.
A great example is the “Frequently Asked Questions” page, where many have internal links. Users can click on a table of contents area and the page jumps down to the anchor text on the same page. In this case, Google Analytics won’t work out of the box and neither will most other tracking tools. This is because the user isn’t technically going to a new page.
Step 1: Staging your FAQ Page
The first thing you need to do is enable your FAQ page to handle clickable anchor text. Consider the following HTML example:
<h1>Frequently Asked Questions</h1> <h3><a name="toc">Table of Contents</a></h3> <ul> <li><a id="who_toc" href="#who">Who would want this?</a></li> </ul> <h3><a name="who">Who would want this?</a> - <a id="who_back" href="#toc">Back to top ^</a></h3> <p>Curabitur elementum consequat nisl vel ornare. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante.</p>
This example is a single FAQ item, but you should recognize the key elements on your own page. You have a table of contents and the title of the FAQ, which is also a link to the area further down the page. Then you have the full question (and answer) later on the page with a “Back to top” button.
This is pretty standard formatting for a FAQ page. The point here is to note that you have <a> elements that either are followed by “href” or “name”. The name is where the link lands. The href is where the link points.
Step 2: Enable jQuery
Don’t freak out! This will likely be the easiest part of the tutorial, as the only thing you’re going to do is add a simple reference. The top line in the example below is all you need to add, but I included the above code just to show you where it needs to be referenced.
(Note: If you are using WordPress or other CMS, you may already have jQuery running. If you get errors, try deleting this line out and see if that clears up the conflict for you.)
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <h1>Frequently Asked Questions</h1> <h3><a name="toc">Table of Contents</a></h3> <ul> <li><a id="who_toc" href="#who">Who would want this?</a></li> </ul> <h3><a name="who">Who would want this?</a> - <a id="who_back" href="#toc">Back to top ^</a></h3> <p>Curabitur elementum consequat nisl vel ornare. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante.</p>
Why, you ask? AJAX allows us to send data to the server where it can be stored, all without refreshing the page. The whole point of using anchor links on the page is to make sure the user doesn’t have to reload the page every time. So AJAX allows us to stay on the page while passing data along to the server as invisibly as possible.
All we’re going to do is add the onclick function to our links:
<h1>Frequently Asked Questions</h1> <h3><a name="toc">Table of Contents</a></h3> <ul> <li><a id="who_toc" href="#who" onclick="logit(this.id)">Who would want this?</a></li> </ul> <h3><a name="who">Who would want this?</a> - <a id="who_back" href="#toc" onclick="logit(this.id)">Back to top ^</a></h3> <p>Curabitur elementum consequat nisl vel ornare. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante.</p>
In short, when the user clicks the link, the browser sends the ID of the link to the function. In the above examples, the ids are “who_toc” and “who_back”, respectively.
Now, we need to create this “logit” function so the page knows what to do once the user clicks a link on the page. This is a very simple but powerful script that you can use just about anywhere on your site:
I included snippets of previous code so you can see where to place it in your file.
At this point, it doesn’t work just yet, but we’re getting there fast.
Step 5: Time for Some PHP
Here’s our logit.php file:
<?php $id = mysql_escape_string($_POST['id']); $date = date('Ymd'); $time = date('H:i:s'); $log = 'logit.txt'; $current_log = file_get_contents($log); $current_log .= PHP_EOL. $id . ', ' . $date. ', ' . $time; file_put_contents($log, $current_log); ?>
Before this will work, you’ll want to upload the logit.txt file. You can make it yourself and upload it with the following content:
link_id, date, time
This is just the header information, so you can easily drop the contents of the log file into Excel or some other software.
I built this to be a comma-delimited file that should work on any OS for you.
Check Your Files and Functions
Just to be sure that you have everything you need in one place, make sure that the following files are in the same directory as your FAQ page. So, if your URL for your FAQ is www.somesite.com/faq, then your files will be found here:
- www.somesite.com/faq/index.html (or .php, or whatever file types you’re using)
Here’s a snapshot of what the text file looks like. You can just go straight to the .txt file on your site to see this:
link_id, date, time when_back, 20130715, 08:41:43 what_toc, 20130715, 08:41:44 how_back, 20130715, 08:41:46 who_toc, 20130715, 08:41:47 how_back, 20130715, 08:41:48 what_toc, 20130715, 08:52:34 why_back, 20130715, 08:52:35 how_back, 20130715, 08:52:37 how_toc, 20130715, 08:52:38 who_toc, 20130715, 08:52:43 where_back, 20130715, 08:52:44 how_toc, 20130715, 08:52:45 why_back, 20130715, 08:52:46 who_toc, 20130715, 08:52:47 what_back, 20130715, 08:52:49 where_back, 20130715, 08:52:49 who_toc, 20130715, 08:52:51 what_back, 20130715, 08:52:52 what_back, 20130715, 11:49:40 when_toc, 20130715, 11:49:41 where_toc, 20130715, 11:49:42 how_toc, 20130715, 11:49:43 what_toc, 20130715, 11:49:44 why_back, 20130715, 11:49:45 what_back, 20130715, 11:49:46 how_back, 20130715, 11:49:46 how_back, 20130715, 11:49:47
Copy and paste into Excel or other software to start your analysis. The data starts as a simple log, but with some careful spreadsheet sorting, you could determine the most popular questions, least popular questions, most popular this week, and other useful inferences that could guide content decisions based on real data instead of guesses or hunches.
You can drop this folder of files onto your web server to see it all work. Let me know what you think!