SurveyCompo Event Listener

Use Google Tag Manager (GTM) or any other TMS to track SurveyCompo form interactions, such as each survey flow, completions and submissions, and send it as an event data to your measurement tools, such as Google Analytics, Piwik Pro, etc., for analysis.

How to track SurveyCompo survey form flow and completion with google tag manager

Here are the steps to follow to use the SurveyCompo event listener in Google Tag Manager (GTM) to track and capture user interactions with the SurveyCompo form on your website.

Allowing you to measure these interactions in your analytics platform (e.g., Google Analytics 4, Matomo, Piwik Pro), you can gain deeper insights into how users engage with your surveys.

Step 1: Add the SurveyCompo Event Listener Script to GTM

Start by implementing the SurveyCompo event listener script in GTM. First, copy the provided script and place it inside a Custom HTML Tag in GTM.

You should configure this tag to fire on the DOM Ready trigger, ensuring that the SurveyCompo form has fully loaded before the script starts listening for user interactions.

💡 Tip: Using the DOM Ready trigger ensures that the SurveyCompo form is ready to interact with, helping to avoid any tracking issues or event conflicts.

The script listens for key user actions within the SurveyCompo survey, such as starting, navigating, completing, or closing the survey. When an action is detected, it pushes an event to the dataLayer with the event name survey_compo_interaction, along with detailed information about the action.

Here are the primary user actions tracked by the event listener:

Survey Started (START)
Survey Input Changed (INPUT_CHANGE)
Page Navigation (Next/Previous) (NEXT_PAGE_GO, PREV_PAGE_GO)
Survey Completed (COMPLETE)
Survey Closed (SURVEY_CLOSE)
Survey Aborted (ABORT)
Error Occurred (ERROR)

Step 2: Create a Custom Event Trigger in GTM

After adding the event listener script, you need to create a Custom Event Trigger in GTM. This trigger will activate whenever an event related to the SurveyCompo survey form occurs.

Go to Triggers in GTM.
Create a new Custom Event Trigger.
Set the event name to survey_compo_interaction.

This trigger will fire every time an event related to the SurveyCompo widget is pushed to the dataLayer. It ensures that the relevant GTM tags will be triggered based on the user’s interaction with the survey.

Step 3: Define DataLayer Variables in GTM

In order to leverage the interaction data, define the following dataLayer variables in GTM. These variables allow you to capture specific details about the survey actions.

Here are the key variables you should define:

survey_action_type: Identifies the specific action (e.g., START, INPUT_CHANGE, COMPLETE, SURVEY_CLOSE).
survey_action_description: Provides a human-readable description of the action (e.g., “survey started”, “survey completed”).
pageCount: The total number of pages in the survey.
pageIndex: The index of the current page.
pageErrors: Any errors encountered on the current page.
progress: The current progress through the survey (e.g., percentage completed).
errorTs, initTs, startTs, completeTs, finalTs, abortTs: Timestamps related to various stages of the survey flow.
sessionId: The unique ID for the user’s session.
variables: Any custom variables defined within the survey.
survey: The ID of the survey.
inputs: The data entered by the user (e.g., responses to survey questions).

These variables allow you to build detailed tags and triggers, which help you track survey interactions more effectively and pass rich data to your analytics platforms.

Step 4: Set Up Marketing Tags and Pixels

Once the triggers and variables are defined, the next step is to create the appropriate marketing tags to send the data to platforms like Google Analytics (GA4) or Piwik Pro.

For example, to send SurveyCompo events to Google Analytics 4:

Create a GA4 Event Tag.
Set the Event Name to survey_compo_interaction.
Use the following Event Parameters:
- survey_action_type
- survey_action_description
- survey_id
- pageCount
- pageIndex
- progress
- sessionId

This configuration ensures that each interaction with the SurveyCompo survey is tracked and sent to your analytics platform with all relevant details.

Note that the SurveyCompo event listener script works with any tag management solution (TMS), so it can be used beyond GTM. The process remains similar across different tag management system platforms or if you intend to use the hard-coded route.

You can download SurveyCompo’s GTM template to streamline the implementation process and save time.

<script>
(function() {
  // Short contextual names for SurveyCompo events
  var eventDescriptions = {
    "START": "survey started",
    "START_OK": "clicks ok button on screen start",
    "START_CANCEL": "clicks cancel button on screen start",
    "INPUT_CHANGE": "input changed in survey",
    "NEXT_PAGE_GO": "navigated to next page",
    "PREV_PAGE_GO": "navigated to previous page",
    "PAGE_GO": "navigated to specific page via API",
    "COMPLETE": "survey flow completed",
    "COMPLETE_OK": "clicks ok button on screen completion",
    "COMPLETE_CANCEL": "clicks cancel button on screen completion",
    "FINALIZE": "survey finalized",
    "SURVEY_RESET": "survey reset via API",
    "SURVEY_CLOSE": "survey close button clicked",
    "ABORT": "survey aborted",
    "ABORT_OK": "clicks ok button on abort screen",
    "ABORT_CANCEL": "clicks cancel button on abort screen",
    "ERROR": "error occurred in survey"
  };
  // Ensure window exists and dataLayer is available
  window.dataLayer = window.dataLayer || [];
  // Set up the event listener
  window.addEventListener("surveychange", function(e) {
    if (!e || !e.detail) return;
    var detail = e.detail;
    var context = detail.context || {};
    // Create the data object to push
    var data = {
      event: "survey_compo_interaction",
      survey_action_type: detail.name || "",
      survey_action_description: eventDescriptions[detail.name] || "unknown event"
    };
    // Optional context fields
    var contextFields = [
      "pageCount", "pageIndex", "pageErrors", "progress",
      "errorTs", "initTs", "startTs", "completeTs",
      "finalTs", "abortTs", "sessionId", "variables",
      "survey", "inputs"
    ];
    for (var i = 0; i < contextFields.length; i++) {
      var key = contextFields[i];
      if (typeof context[key] !== "undefined") {
        data[key] = context[key];
      }
    }
    // Push to GTM dataLayer
    window.dataLayer.push(data);

  });

})();

</script>

Video of how to use the listener

Related Event Listener

Iterate

Use this event listener to collect data on how users engage with the embedded Iterate survey forms.

Unbounce Form

Capture the successful submission of your Unbounce forms, and trigger your marketing pixels on this action.

GetFeedback

Collect data on how users interact with the GetFeedBack widget in your measurement tool.

download the google tag manager recipe for tracking SurveyCompo survey form flow and completion

we make you smarter with data

made with ❤️

The DumbData Team