Build An FAQ Page That Tracks Popular Questions

Justyn Hornor
Justyn Hornor
Share

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

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”] <script src=”https://code.jquery.com/jquery-1.10.1.min.js”></script> <script type=”text/javascript”> function logit(id){ $.ajax({ type: “POST”, url: “logit.php”, data: { id: id }, }); } </script> <h1>Frequently Asked Questions</h1> <h3><a name=”toc”>Table of Contents</a></h3> [/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!

Frequently Asked Questions (FAQs) about Trackable FAQs

What are the benefits of having trackable FAQs on my website?

Trackable FAQs provide a wealth of benefits for your website. They not only help in improving the user experience by providing quick and easy access to information but also provide valuable insights into user behavior. By tracking the FAQs, you can understand what information your users are most interested in, which questions are most frequently asked, and how effective your answers are in resolving user queries. This data can be used to improve your content, make informed decisions about product development, and enhance your customer service.

How can I make my FAQs trackable?

Making your FAQs trackable involves integrating analytics into your FAQ section. This can be done using various tools and platforms such as Google Analytics, Hotjar, or any other analytics software. These tools allow you to track user interactions with your FAQs, including which questions are most frequently clicked, how long users spend reading the answers, and whether they click on any links within the answers.

Can trackable FAQs improve my SEO ranking?

Yes, trackable FAQs can significantly improve your SEO ranking. By providing relevant and valuable content in your FAQs, you can increase your website’s dwell time, reduce bounce rates, and improve user engagement, all of which are key factors in SEO ranking. Moreover, by tracking your FAQs, you can continuously optimize your content based on user behavior and preferences, further enhancing your SEO performance.

How can I optimize my FAQ section based on tracking data?

The tracking data from your FAQ section provides valuable insights into user behavior and preferences. You can use this data to optimize your FAQ section by identifying the most frequently asked questions and ensuring that the answers are clear, concise, and helpful. You can also identify any gaps in your FAQs and add new questions and answers based on user queries. Additionally, you can use the data to improve the layout and design of your FAQ section to make it more user-friendly and easy to navigate.

What are some best practices for writing FAQs?

When writing FAQs, it’s important to keep your audience in mind and provide clear, concise, and helpful answers. Use simple and straightforward language, avoid jargon, and break down complex topics into easy-to-understand points. Make sure to update your FAQs regularly based on user queries and feedback. Also, organize your FAQs in a logical and intuitive manner, and use a searchable and trackable format to enhance user experience and gather valuable data.

How can I use trackable FAQs to improve customer service?

Trackable FAQs can significantly enhance your customer service by providing insights into common customer queries and issues. By understanding what information your customers are looking for, you can improve your FAQs to provide more effective solutions and reduce the need for customers to contact your support team. This not only improves customer satisfaction but also reduces the workload on your customer service team.

Can I use trackable FAQs for market research?

Yes, trackable FAQs can be a valuable tool for market research. By analyzing the questions and answers that your users are most interested in, you can gain insights into customer needs, preferences, and pain points. This information can be used to inform product development, marketing strategies, and business decisions.

How can I make my FAQ section more engaging?

To make your FAQ section more engaging, consider using a conversational tone, incorporating visuals, and providing detailed and helpful answers. You can also use interactive elements such as dropdowns, accordions, or search bars to make your FAQ section more user-friendly and easy to navigate. Additionally, make sure to regularly update your FAQs based on user feedback and queries to keep the content fresh and relevant.

Can I integrate trackable FAQs with other analytics tools?

Yes, you can integrate trackable FAQs with other analytics tools to gain a more comprehensive understanding of user behavior. For example, you can use Google Analytics to track user interactions with your FAQs, and then use this data in conjunction with other analytics tools to analyze user behavior across your entire website.

How can trackable FAQs help in content marketing?

Trackable FAQs can play a crucial role in content marketing by providing insights into what information your audience is most interested in. You can use this data to create targeted content that addresses these topics, thereby attracting more traffic to your website and improving your SEO ranking. Additionally, by providing valuable and relevant content in your FAQs, you can establish your brand as an authority in your field, build trust with your audience, and drive customer engagement.