Build An FAQ Page That Tracks Popular Questions

July 19, 2013

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.

In this tutorial, I’m going to show you how to create a simple, on-page tracking tool using JavaScript and PHP. We will generate very simple files that you will likely be able to drop right into your website and call it good with very few changes to your current page(s).

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:

[sourcecode language=”html”]

<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>

[/sourcecode]

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.)

[sourcecode language=”html”]
<script src="https://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>

[/sourcecode]

Step 3: Add Some JavaScript Functionality

To make this system work, we’re going to add some JavaScript to our page. Specifically, for those wanting the nuts and bolts, we’re using jQuery and AJAX.

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:

[sourcecode language=”html”]

<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>

[/sourcecode]

In the next step, we will create a JavaScript function called “logit” that will handle storing our click data. In this step, we’re telling the browser to run the function once the user clicks the link.

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.

Step 4: Create the Javascript Code

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:

[sourcecode language=”html”]

[/sourcecode]

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

JavaScript cannot write to your server. It’s a client-side technology, meaning that it only works within the browser. If we want to store the click data from our users, we’re going to want to use a server-side language like PHP.

We’re going to create a new PHP file called “logit.php” and save it in the same directory on your site as the FAQ page. Or, make sure the above JavaScript references the file properly in the URL part of the AJAX call.

Here’s our logit.php file:

[sourcecode language=”php”]

<?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);

[/sourcecode]

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:

[sourcecode language=”text”]

link_id, date, time

[/sourcecode]

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)
www.somesite.com/faq/logit.php
www.somesite.com/faq/logit.txt

Now, all you have to do is give each of your links on the page a unique ID so that you can track them and add the onclick=”logit(this.id)” function to the link. The JavaScript, PHP, and AJAX will do the rest!

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:

[sourcecode language=”text”]

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

[/sourcecode]

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.

Resources

You can drop this folder of files onto your web server to see it all work. Let me know what you think!