Web Surveys

Marketing Cloud Personalization Surveys uses SurveyJS to build and render surveys on your website. Surveys are deployed within web campaigns, leveraging Personalization's targeting rules and testing capabilities.

Use survey data to create user segments, enhance personalization experiences, A/B test to validate business impact, and analyze feedback. You can clone or build a survey using the Surveys editor in the Personalization UI, or use the SurveyJS JSON editor for more advanced customization. For more information about Personalization Surveys, see Surveys. For detailed documentation on using the JSON survey editor, see the official SurveyJS documentation.

  • Surveys are available to all Premium edition customers. If your account was created before April 7, 2021, request a Gears refresh from Support to turn on this feature. Your account administrator can then review the Gears list to confirm whether the Surveys Gear is enabled.
  • Create at least one survey in the Surveys editor within the Personalization UI.

With these steps complete, you're ready to use Surveys in your web campaign templates.

To learn how to create a survey, see Create a Survey.

SurveyJS

  • Version: 1.0.95
  • Sizes:
    • JS (compressed) - 149 KB
    • CSS (compressed) - 4 KB

This version of SurveyJS is a variant of the jQuery version, updated to use the Cash library included in the Personalization module of the Salesforce Interactions SDK. However, features such as SurveyJS custom widgets are currently not supported.

This code injects the SurveyJS library, renders the survey, and handles responses upon completion.

The Survey interface defines the structure of the survey object, containing its ID, name, and the SurveyJS JSON configuration.

To integrate custom resources, such as themes, use injectSurveyResourcesIntoPage().

  1. Invoking renderSurvey automatically injects the SurveyJS library from the Personalization CDN using injectSurveyResourcesIntoPage on page load.

    This automatic injection doesn't occur for client-side page changes, such as those within a Single-Page Application (SPA).

  2. The survey renders after the SurveyJS library instance loads.

  3. Upon completion or submission of each survey page, the system parses the survey configuration and sends an event with each user's responses stored as survey attributes.

Survey attributes are automatically created when you design a survey. You can view them in Personalization under Settings > Attributes > Survey Attributes. These attributes populate an individual user's profile with their survey responses only after Personalization receives a survey event in the correct format. For information about sending a survey event, see Send a Survey Event.

Upon receiving a survey event, Personalization stores the responses within corresponding survey attributes. Each event must include the surveyId, surveyStartTime, and all survey attributes representing the user's responses.

Depending on the type of question, survey responses are stored in these formats:

  • Matrix questions: survey:<surveyId>:<questionId>:<rowId>
  • Other question types: survey:<surveyId>:<questionId>

Personalization generates <surveyId> and <questionId> to identify surveys and questions respectively. <rowId> is a unigue ID for a row within a Matrix question and is omitted for other question types.

By default, Personalization limits the number of survey attributes to 10.

The Surveys Gear automatically handles survey submissions and sends survey events in the required format. As a developer, you don't need to include any code that sends a survey event within your web campaign template.

These examples show how to manually track a survey event in each SDK namespace, if needed.

Avoid tracking survey events outside the Surveys gear.

You can style your surveys in different ways using methods described in the SurveyJS documentation. Some of these methods include using Custom CSS and creating a Custom Theme.

These examples demonstrate how to apply custom styling with client-side JavaScript using the applyTheme function.

When using the sample survey template in this section in a web campaign, an impression statistic is automatically tracked after the initial page of the survey renders. To track additional statistics, see Campaign Stats Tracking.

Handlebars code

CSS

Client-side JavaScript

Server-side TypeScript

Download the sample survey template for your SDK namespace: