Survicate Event Listener
How to track Survicate Survey form interactions and completion with google tag manager
Here is the step-by-step guide on how to set up the Survicate event listener script within Google Tag Manager (GTM) to track and monitor user interactions with the Survicate survey form and feedback widget on your website. By using GTM, you can send data on these interactions to analytics platforms like Google Analytics (GA4), Piwik Pro, and others for further analysis.
Step 1: Add the Survicate Event Listener Script to GTM
Start by copying the provided Survicate event listener script and in your web GTM container, add it to a new tag of the Custom HTML type.
You’ll want to configure this tag to trigger on DOM Ready so that it only fires after the survey widget has been fully loaded.
💡 Pro Tip: Always trigger the tag on DOM Ready to ensure that the survey widget or form is available for interaction, and avoid any potential race conditions.
The script listens for key user actions within the Survicate survey widget and fires a custom event named survicate_interactions in the dataLayer whenever one of these actions occurs.
Here are the main interactions tracked by the event listener:
- Survey Displayed (survey_displayed)
- Question Answered (question_answered)
- Survey Completed (survey_completed)
- Survey Closed (survey_closed)
Step 2: Create a Custom Event Trigger in GTM
Next, you need to set up a custom event trigger in GTM that will listen for the survicate_interactions event. This trigger will be responsible for firing tags in GTM whenever one of the interactions occurs within the Survicate survey.
- In GTM, go to Triggers.
- Create a new Custom Event Trigger.
- Set the event name to survicate_interactions.
This ensures that the trigger activates whenever an interaction (like a survey being displayed or a question being answered) is logged in the dataLayer.
Step 3: Define DataLayer Variables in GTM
To extract and utilize the interaction data from the events, you will need to define a set of dataLayer variables in GTM. These variables allow you to capture and work with specific event details that are pushed to the dataLayer.
Here are the variables you should define for the Survicate events:
- survicate_action: Specifies the type of interaction (e.g., survey_displayed, question_answered, survey_completed, survey_closed).
- survey_id: Represents the unique ID of the survey.
- survey_name: Captures the name of the survey.
- question_id: For the question_answered event, this identifies which specific question was answered.
- answer_type: Also for question_answered, indicates the type of answer provided (e.g., multiple choice, text, etc.).
- answer_id: For certain answer types, this variable captures the specific ID of the answer (e.g., for multiple choice options).
- answer_ids: If multiple answers were selected, this captures the IDs of all selected options.
- answer_value: For text or open-ended answers, this variable holds the response value.
These variables will be useful for building customized triggers and feeding detailed data into your analytics tools.
Step 4: Set Up Marketing Tags and Pixels
Once your triggers and variables are configured, the next step is to set up tags for marketing purposes, such as sending event data to Google Analytics (GA4), Piwik Pro, or other platforms.
For example, to send the Survicate data to Google Analytics 4, you can set up a GA4 Event Tag with the following configuration:
- Event Name: survicate_interaction
- Event Parameters:
- survicate_action
- survey_id
- survey_name
- question_id
- answer_type
- answer_id
- answer_ids
- answer_value
- survicate_action
This configuration ensures that whenever a user interacts with the Survicate survey form or feedback widget, the event is captured in GA4 with data points that help provide context to the event data about the interaction.
Please keep in mind that the Survicate event listener script is not limited to use only in GTM. It can be used with any tag management system (TMS), and the process remains the same across platforms.
And for convenience, you can download a GTM template or recipe to get a head start on implementing this setup. This will save you time and help streamline the process.
<script>
// Ensure dataLayer is defined
window.dataLayer = window.dataLayer || [];
// survey_displayed
_sva.addEventListener('survey_displayed', function(surveyId, surveyName) {
window.dataLayer.push({
event: 'survicate_interactions',
survicate_action: 'survey_displayed',
survey_id: surveyId,
survey_name: surveyName
});
});
// question_answered
_sva.addEventListener('question_answered', function(surveyId, questionId, answer) {
var data = {
event: 'survicate_interactions',
survicate_action: 'question_answered',
survey_id: surveyId,
question_id: questionId,
answer_type: answer.answer_type
};
// Conditionally include additional fields
if (answer.answer_id) {
data.answer_id = answer.answer_id;
}
if (answer.answer_ids) {
data.answer_ids = answer.answer_ids;
}
if (answer.answer_value) {
data.answer_value = answer.answer_value;
}
window.dataLayer.push(data);
});
// survey_completed
_sva.addEventListener('survey_completed', function(surveyId) {
window.dataLayer.push({
event: 'survicate_interactions',
survicate_action: 'survey_completed',
survey_id: surveyId
});
});
// survey_closed
_sva.addEventListener('survey_closed', function(surveyId) {
window.dataLayer.push({
event: 'survicate_interactions',
survicate_action: 'survey_closed',
survey_id: surveyId
});
});
</script>
Video of how to use the listener
Related Event Listener
SurveyCompo
Iterate
Saber Feedback
download the google tag manager recipe for tracking Survicate Survey form interactions and completion
