GetFeedback Event Listener
How to track Interactions With The GetFeedBack Widget with google tag manager
This guide will show you how to use the GetFeedback event listener script in combination with Google Tag Manager (GTM) to track website visitors’ interactions with the GetFeedback widget. By implementing this setup, you can capture detailed interaction data and send it to analytics platforms like Google Analytics (GA4), Piwik Pro, or others.
Step 1: Add the GetFeedback Event Listener Script to GTM
Begin by creating a new custom HTML tag in Google Tag Manager. Copy the provided GetFeedback event listener script and paste it into this tag. Assign the tag a descriptive name, such as “cHTML—Get Feedback Listener,” and configure it to trigger on DOM Ready.
💡 Pro Tip: Firing on DOM Ready ensures the event listener is initialized after the widget has loaded.
The event listener script tracks interactions with the embedded GetFeedback widget and pushes a dataLayer event named getFeedbackInteraction. These events capture website visitors’ actions, including opening the feedback form, submitting feedback, and interacting with campaigns or in-page forms.
Step 2: Create a Custom Event Trigger in GTM
Next, set up a Custom Event Trigger in GTM to listen for the dataLayer event emitted by the GetFeedback script. In the trigger configuration, set the event name to “getFeedbackInteraction”. This trigger will fire tags based on interactions tracked by the event listener.
Step 3: Define Data Layer Variables in GTM
To access detailed information about GetFeedback interactions, create the following dataLayer variables in GTM:
- gfEventType: Returns a short, descriptive name of the interaction (e.g., “Feedback Form Opened,” “Campaign Completed”).
- gfCategory: Categorizes the event (e.g., “Web Buttons,” “Campaigns”).
- gfAction: Provides the raw event action name (e.g., “Feedback:Open,” “Campaign:Closed“).
- (Optional) You can also create variables for gfLabel, gfValue, and gfUserData to capture additional details such as labels, numeric values, and user-specific data.
Step 4: Configure Your Marketing Tags
Once you’ve created the custom event trigger and variables, use them to configure your marketing tags. For example, in a Google Analytics (GA4) event tag, you can include the variables to add context to the GetFeedback interactions:
- Event Name: getFeedbackInteraction
- Event Parameters:
- Event Type: {{dlv – gfEventType}}
- Category: {{dlv – gfCategory}}
- Action: {{dlv – gfAction}}
Attach the custom event trigger to your tag so it fires whenever a GetFeedback interaction is tracked.
Additional Notes:
The GetFeedback event listener script can be implemented in other Tag Management Solutions (TMS) (e.g., Piwik Pro Tag Manager) and not just restricted to Google Tag Manager. However, the implementation principles, including setting up custom event triggers and variables, remain consistent across platforms.
To streamline your implementation, scroll down this resource page to find a GTM recipe template. Download, customize, and use this template to quickly track GetFeedback widget interactions.
<script>
window.usabilla_live('setEventCallback', function(category, action, label, value, userData) {
// Map actions to descriptive event types and categories
var eventMapping = {
"Feedback:Open": { type: "Feedback Form Opened", category: "Web Buttons" },
"Feedback:Success": { type: "Feedback Submitted", category: "Web Buttons" },
"Campaign:Open": { type: "Campaign Shown", category: "Campaigns" },
"Campaign:Success": { type: "Campaign Completed", category: "Campaigns" },
"Campaign:NextPage": { type: "Campaign Page Changed", category: "Campaigns" },
"Campaign:Closed": { type: "Campaign Closed", category: "Campaigns" },
"BoostCTA:Clicked": { type: "Boost CTA Clicked", category: "Campaigns" },
"Passive:Closed": { type: "Passive Feedback Closed", category: "Web Buttons" },
"InPage:NextPage": { type: "In-Page Form Page Changed", category: "In-Page Survey" },
"InPage:FeedbackGiven": { type: "In-Page Feedback Submitted", category: "In-Page Survey" }
};
// Find the event mapping, or default to "Unknown Event"
var eventDetails = eventMapping[action] || { type: "Unknown Event", category: "Unknown" };
// Push the event to dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'getFeedbackInteraction',
'gfEventType': eventDetails.type, // Short descriptive name
'gfCategory': eventDetails.category, // Event category
'gfAction': action, // Raw action name
'gfLabel': label || null, // Additional details (e.g., comments, IDs)
'gfValue': value || null, // Numeric value (e.g., ratings)
'gfUserData': userData || {} // Additional user data
});
});
</script>
Video of how to use the listener
Related Event Listener
Saber Feedback
Web Engage
Podia
download the google tag manager recipe for tracking Interactions With The GetFeedBack Widget
