Web Surveys

Marketing Cloud Personalization Surveys uses the power of SurveyJS to render surveys.

  1. Surveys are available to all Premium edition customers. If your account was provisioned before 4/7/2021, request for a Gears refresh for your account from support in order for the Surveys Gear to show up in your Gears list and for the feature functionality to be fully enabled. If you are unsure if a Gears refresh has occurred, please reach out to your account admin who can view the Gears list on your account. If a refresh occurred, the Surveys Gear appears in the list as enabled.
  2. Create at least one survey in the Surveys editor, which can be found in the IS Dashboard.

After carrying out the preceding steps, you can now use the Surveys system in Templates.

For more information on creating a survey, see Create a Survey.

SurveyJS

  • version: 1.0.95
  • sizes: JS(compressed) - 149 kB, CSS(compressed) - 4.0 kB

This version of SurveyJS is a variant of the jQuery version updated to use the Cash library that is included in the Personalization WebSDK. However, there are unsupported features, such as SurveyJS's custom widgets.

Methods

  • Injects the SurveyJS library, renders survey, and handles responses when completed.

  • Survey should have the following shape.

  • Use the following to leverage custom integrations such as custom themes.

Using the Surveys Gear

  1. Invoking renderSurvey automatically uses injectSurveyResourcesIntoPage to inject the SurveyJS library from the Personalization CDN on page load. Please note that this doesn't apply to client-side page changes, such as those in an SPA.
  2. After the SurveyJS library instance is detected, it will start to render the survey.
  3. When each page of the survey is "completed" or "submitted", it parses through survey config and sends an event with each response stored as a survey attribute.

Surveys attributes are automatically set up upon survey creation. These attributes can be viewed in the Personalization platform under Settings > Attributes > Survey Attributes. The attributes become visible on the individual User profile only after a survey event in the specified format is received (see Sending a Survey Event). After the survey event is received by Personalization, the responses are stored within the corresponding Surveys attributes. The event requires surveyId, surveyStartTime, and all the Surveys attributes representing a user's responses to questions in the survey.

Each Surveys attribute is stored in the following format:

survey:<surveyId>:<questionId>:<rowId> or survey:<surveyId>:<questionId>

<surveyId> and <questionId> are generated by Personalization. <rowId> is used for Matrix questions, but is otherwise omitted.

By default, there is a limit of 10 Surveys attributes.

Sending a Survey Event

The Surveys Gear automatically handles survey submissions and sends the survey event in the required format. As a developer, it is not necessary to include any code that sends a survey event within the Template.

The following examples show how to track a survey event in each of the SDK namespaces in case you need to bypass the built-in tracking.

It is not recommended to track a Surveys event outside of the Surveys gear.

  • SalesforceInteractions namespace

  • Evergage namespace

There are a few different options available for styling surveys, many of which can be found in the SurveyJS documentation, such as for using Custom CSS and creating a Custom Theme.

The following is an example for applying custom styling with client-side JavaScript using the applyTheme function:

  • SalesforceInteractions namespace

  • Evergage namespace

If using the following example template in a Campaign, an impression stat is automatically tracked when the initial page of the survey is rendered. To track any other additional stats, please see Campaign Stats Tracking for information about how to do so.

You can download the example template for your namespace from the following locations.

Handlebars code

CSS

Client-side JavaScript

  • SalesforceInteractions namespace

  • Evergage namespace

Server-side TypeScript