Adding a Survey to StoreFronts
- Jonathan Tew
Introduction
Collecting survey data from customers on an ecommerce site is crucial for business growth and customer satisfaction. It provides invaluable insights into the user experience, helping identify areas for improvement in website design, product offerings, and customer service. Survey responses can reveal customer preferences, pain points, and purchasing patterns, enabling businesses to tailor their strategies and offerings accordingly. This data-driven approach allows companies to make informed decisions, optimize their marketing efforts, and enhance overall customer engagement. Furthermore, by actively seeking customer feedback, businesses demonstrate that they value their customers' opinions, fostering loyalty and trust. In a competitive online marketplace, this continuous feedback loop can be the key differentiator that sets successful ecommerce sites apart from their rivals.
Native Survey Collection with SurveyJS
UltraCart, recognizing the critical importance of customer feedback for ecommerce success, made the strategic decision to leverage SurveyJS rather than reinventing the wheel for survey functionality. By integrating this proven solution, UltraCart empowers its merchants to easily implement professional, native-feeling surveys within their online stores. This choice allows UltraCart to focus on its core competencies while providing clients with a robust survey tool that offers a wide range of question types and customizable templates. The seamless integration of SurveyJS into the UltraCart platform enables merchants to gather valuable customer insights efficiently, without the need for extensive development resources. This approach not only saves time and effort for UltraCart and its clients but also ensures that merchants can quickly deploy surveys, leading to faster data collection and more agile decision-making. By choosing SurveyJS, UltraCart demonstrates its commitment to providing best-in-class solutions that help its merchants thrive in the competitive ecommerce landscape.
Building a Survey
SurveyJS simplifies the survey creation process by using JSON files to define survey structures. These JSON files, which contain all the necessary information about question types, layout, and logic, are stored directly on the StoreFront file system, making them easy to manage and version control. To create these survey definitions, SurveyJS provides a free, user-friendly online editor. This intuitive tool allows users to visually design their surveys, adding questions, setting up conditional logic, and customizing appearance without needing to write JSON manually. As users build their surveys in the editor, the corresponding JSON structure is generated automatically. Once satisfied with the design, users can simply copy the JSON file from the JSON Editor tab and save it to their StoreFront file system. This approach offers flexibility for developers, who can easily modify the JSON directly if needed, while also empowering non-technical team members to create and edit surveys through the visual interface. The combination of simple JSON files and a powerful free editor makes SurveyJS an accessible and efficient solution for implementing customer surveys in various applications.
An Example Survey to the File System
The following example survey is a post checkout questionnaire to gain additional insight into how the customer was marketed to.
{
"title": "Post Checkout Questionnaire",
"logoPosition": "right",
"pages": [
{
"name": "page1",
"title": "Page 1",
"elements": [
{
"type": "radiogroup",
"name": "whereDidYouHearAboutUs",
"title": "Before you go... How did you first hear about us?",
"hideNumber": true,
"isRequired": true,
"requiredErrorText": "At least ONE answer must be selected",
"choices": [
"Facebook",
"From a friend, family member, or coworker",
"Podcast/Radio",
"Pinterest",
"TikTok",
"Snapchat",
"Instagram",
"TV",
"Press or other article",
"From an influencer",
"In a retail store",
"Google or other search engine"
],
"showOtherItem": true
},
{
"type": "radiogroup",
"name": "whoPostedAboutUs",
"visibleIf": "{whereDidYouHearAboutUs} anyof ['Facebook', 'Pinterest', 'TikTok', 'Instagram']",
"title": "Who posted about us?",
"hideNumber": true,
"isRequired": true,
"requiredErrorText": "At least ONE answer must be selected",
"choices": [
"You did!",
"I saw an ad",
"Someone I know",
"An influencer I follow"
],
"showOtherItem": true
}
]
},
{
"name": "page3",
"title": "Page 3",
"elements": [
{
"type": "checkbox",
"name": "whatBroughtYouToOurSiteToday",
"title": "And what brought you to our site today?",
"hideNumber": true,
"isRequired": true,
"requiredErrorText": "At least ONE answer must be selected",
"commentPlaceholder": "What Areas?",
"choices": [
"I received a text message",
"I remember you from the past",
"I saw an ad",
"I received an email",
"Someone told me about you",
"I was searching something"
],
"showOtherItem": true,
"otherPlaceholder": "Other",
"otherText": "Other"
}
]
},
{
"name": "page4",
"title": "Page 4",
"elements": [
{
"type": "radiogroup",
"name": "howLongDidYouKnowAboutUs",
"title": "How long didd you know about us before making your first purchase?",
"hideNumber": true,
"isRequired": true,
"requiredErrorText": "At least ONE answer must be selected",
"choices": [
"< 1 day",
"< 1 week",
"< 1 month",
"1 - 3 months",
"3 - 12 months",
"> 12 months"
]
}
]
},
{
"name": "page5",
"title": "Page 5",
"elements": [
{
"type": "text",
"name": "birthdate",
"title": "One last thing, can we send you something on your birthday?",
"inputType": "date"
}
]
}
],
"showTitle": false,
"showPageTitles": false,
"goNextPageAutomatic": true,
"startSurveyText": "Next",
"pagePrevText": "Back",
"completeText": "Finish",
"questionTitlePattern": "numTitle",
"firstPageIsStarted": true
}
Take the example JSON contents and place them on your StoreFront file system as a file named /postcheckoutsurvey.json in the root of the file system as shown below.
Embedding the Survey on the Page
Within the StoreFront visual builder, add a SurveyJS element to the page. Within the settings of the SurveyJS element you will need to select the location of the JSON file on the file system.
How are the Surveys Stored?
UltraCart stores the completed Surveys into the BigQuery Data Warehouse. If the Survey is configured to add an item ID to the cart are completion then an item level property named “survey_uuid” is added which references the Survey and allows the tie together between the individual survey and the item on the order. This is useful for surveys involved with buying specific products.
If the Survey is embedded in the context of an order element (for example on the receipt) then the survey will be tied to the order using a property named “survey_uuid” at the order level.
If the Survey is embedded in the context of an order item list element on the receipt, then the survey will be tied to the order item using a property named “survey_uuid” at the order item level.
The only way to access the survey data is through the BigQuery Data Warehouse. Within the data warehouse you can write SQL queries to aggregate the survey information and the include that within your custom Google Looker reports.