Saber Feedback Event Listener
How to track User's Engagement With The Saber Feedback Widget with google tag manager
This guide walks you through how to use the Saber Feedback event listener script with Google Tag Manager (GTM) to monitor and track website visitor interactions with the embedded Saber Feedback widget. You can send this data to analytics platforms like Google Analytics (GA4), Piwik Pro, and others to enrich your insights.
Step 1: Add the Saber Feedback Event Listener Script to GTM
Start by copying the Saber Feedback event listener script provided above. Add this script to a new GTM tag of the custom HTML tag type. Configure the tag to trigger on DOM Ready to ensure the feedback widget has loaded before the listener activates.
💡 Pro Tip: To avoid race conditions, always fire on DOM Ready when working with widgets implemented through GTM.
The Saber Feedback event listener script listens for various interactions with the feedback widget, such as opening, completing, canceling, or closing. For each interaction, it triggers a dataLayer event named saberFeedbackInteractions and includes details about the interaction.
Here are the interactions it tracks:
- Widget Opened (on_open)
- Feedback Submitted (on_complete)
- Widget Canceled (on_cancel)
- Widget Closed (on_close)
Step 2: Create a Custom Event Trigger in GTM
Next, create a custom event trigger in GTM. Set the event name to:
saberFeedbackInteractions
This trigger ensures that tags configured in GTM fire whenever a relevant interaction with the Saber Feedback widget occurs.
Step 3: Define DataLayer Variables in GTM
To extract meaningful data from the interactions, create the following dataLayer variables in GTM. Each variable corresponds to a key in the event data:
- saberAction: Identifies the type of interaction (e.g., on_open, on_complete, on_cancel, on_close).
- feedbackId: Provides the unique ID of the submitted feedback.
- email: Captures the user’s email address at the time of submitting feedback.
- category: Indicates the category selected during feedback submission.
- userId: Returns the user’s ID.
These variables can be used to configure advanced triggers or to enrich the event data sent to your analytics tools.
Step 4: Configure Marketing Tags and Pixels
After setting up the variables and triggers, the next step is to create your marketing tags and pixels. For instance, you can create Google Analytics (GA4) event tags or Piwik Pro custom event tags. Attach the custom event trigger (saberFeedbackInteractions) to these tags. Use the variables you created earlier to pass additional context about the interactions.
For example, you might configure a GA4 event tag to include the following parameters:
- Event Name: saber_feedback
- Event Parameters: saberAction, feedbackId, email, category, userId
This configuration helps you track and analyze Saber Feedback interactions directly in your analytics platform.
Additional Notes:
The Saber Feedback event listener script is Tag Manager agnostic, meaning it can be used with any Tag Management Solution (TMS), not just Google Tag Manager. The principles of implementation remain the same across different TMS platforms.
To save time, scroll down this resource page to find a downloadable GTM recipe template. You can customize and use it to streamline the tracking of Saber Feedback widget interactions.
<script>
Saber.do('set_option', 'on_open', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'saberFeedbackInteractions',
'saberAction': 'on_open'
// Additional keys can be added here if needed
});
});
// Handler for when feedback is submitted
Saber.do('set_option', 'on_complete', function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'saberFeedbackInteractions',
'saberAction': 'on_complete',
'feedbackId': data.feedback_report.id,
'email': data.feedback_report.values.Email,
'category': data.feedback_report.values.Category,
'userId': data.feedback_report.values.user_id
// Include other relevant data as needed
});
});
// Handler for when the feedback widget is canceled
Saber.do('set_option', 'on_cancel', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'saberFeedbackInteractions',
'saberAction': 'on_cancel'
// Additional keys can be added here if needed
});
});
// Handler for when the feedback widget is closed
Saber.do('set_option', 'on_close', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'saberFeedbackInteractions',
'saberAction': 'on_close'
// Additional keys can be added here if needed
});
});
</script>
Video of how to use the listener
Related Event Listener
GetFeedback
WSForm
OnSched
download the google tag manager recipe for tracking User's Engagement With The Saber Feedback Widget
