Tracking Content Helpfulness

About Tracking Content Helpfulness

You have content on your site to help your visitors find answers to their questions. How do you know that your visitors have actually achieved their goal? How do you know whether the content was helpful, or could use improvement?

On this page, we’ll explain how to use Website / App Feedback to measure the helpfulness of a page, all without disrupting the visitors’ flow. We will be using a Wikipedia page as an example.

Survey Setup

Let’s start with the survey.

1. Make a survey project.
2. Create a new multiple choice question titled “Was this helpful?” with “yes” and “no” as answers.
   Qtip: Do not add “maybe” or “I don’t know” as options. This will make the data you collect subjective and difficult to action.
3. Add a new block.
4. In the new block, create a text entry question titled “How can we improve this page?”
5. Add display logic to the text entry question so it will only appear if the user answers “No” to “Was this helpful?”
6. This is what your survey should look like, so far:
   
7. Now, go to the Survey Flow.
8. Add an Embedded Data element.
   
9. Add the following Embedded Data so you can track the page the visitor’s on, the name of the page, and how long they spent on the page:
   • CurrentPageUrl
   • PageTitle
     Attention: The PageTitle field will require some programming knowledge to implement. We recommend passing this information to the team that will be implementing your deployment code. Our support team does not offer assistance or consultation on custom coding. You can always try asking our community of dedicated users If you’d like to know more about our custom coding services you can commission, please contact your Qualtrics Account Executive.
   • TotalDuration
     Qtip: Do not use Q_TotalDuration; this is a different, pre-built field. Just type TotalDuration.
10. Move the Embedded Data to the top of the Survey Flow.
11. Save the Survey Flow.

Look & Feel

In addition to the survey customization we’ve described so far, you’ll also want to consider the following Look & Feel settings for your survey:

• Use the Classic layout: Reduce spacing between questions and answers.
• Use the Blank survey theme: Keep the survey plain so it blends right into your webpage.
• Use Autoadvance on Questions and Autoadvance on Pages motion: After the respondent answers the helpfulness question, the survey will automatically progress to the next question (or submit, if they don’t qualify for the hidden question). This also contributes to the seamless experience of embedding the survey on the page.
• Use Compact Question Spacing: Make sure the space around questions is smaller to reduce the space the survey takes up on the page.

Website Feedback Setup

Now that we have our survey, let’s set up our Website / App Feedback project.

1. Create a Website / App Feedback project.
2. Under the Creatives tab, make a Custom HTML.
3. Add an Embedded Target to your Custom HTML.
   
4. Resize the target. You’ll want it to be big enough to fit one survey question at a time, but small enough to take up little room on the page.
5. Under the Intercepts tab, create a new intercept.
   
6. Connect it to your Custom HTML creative.
7. Connect it to your survey.

Capturing the Page URL, Total Duration, and Page Title

Add your Survey Flow’s Embedded Data to the Intercept:

• CurrentPageUrl set to a value of Current Page URL
• PageTitle set to a value from JavaScript
• TotalDuration set to Time Spent on Site

For PageTitle, we need to set the value from JavaScript so we can capture your web page’s title. But how?

If you are using Google Chrome, simply select the title on the page, right click, and select the Inspect option. The Chrome developer tools window will open up, and it should look like the following. Right click on the corresponding HTML element and copy the selector, as shown below.

This should return something like this:

#firstHeading

With the following JavaScript, you can get the value of the page title from the HTML element:

document.querySelector("#firstHeading").textContent

You can edit the bolded text, depending on what your selector returned.

Now that we have the JavaScript, put it in the value for the Embedded Data field “PageTitle,” as shown earlier. Click Save on your Embedded Data when you’re done.

Placing the intercept in the correct spot on the page

We’re almost done. Finally, we want to decide where to show the “Was this helpful?” question.

1. Say we want to add it right above the “See also” section on the Wikipedia page. Again, we can go back to our Google Chrome developer tools to find out the Id of the element where we want to insert the Custom HTML creative. It turns out the Id is “See_also”.
   
2. Copy this.
3. Go to Advanced Options.
   
4. Under Display Options, select Replace Creative Contents.
5. Under Creative Insertion Point, paste the selector, e.g., See_also.
6. Click Save.
7. Go to Intercept Options and make sure we insert before the target container. This ensures the survey appears before the See Also section, as we decided earlier.
   

Testing the Intercept Before Publishing It

Using a bookmarklet, we can test out our intercept on the page. This section will go over some of the common changes you may want to make to an intercept as you test implementing it on your page.

Button Placement

In the screenshot above, both answers don’t fit on the page. We want the yes and no buttons to show side by side. Go back to the survey question and change the multiple choice Position to Horizontal or Column.

Button Size

Sometimes, buttons may appear larger than we want them to. Here are some Look & Feel edits that can adjust button size:

• Change the layout
• Change the font size of the answers

However, the best way to reduce button size is using Custom CSS in the Look & Feel editor.