UserLane Event Listener
How to track Userlane In-App Messaging and Onboarding Flow with google tag manager
This guide will show you how to use the Userlane event listener script in conjunction with Google Tag Manager (GTM) to track website visitors’ interactions with the Userlane in-app messaging or onboarding flow. By integrating this data into analytics tools like Google Analytics (GA4), Piwik Pro, or others, you can gain valuable insights into how users engage with your Userlane experiences.
Step 1: Add the Userlane Event Listener Script to GTM
To get started, copy the provided Userlane event listener script and create a new tag in Google Tag Manager:
- Choose Custom HTML as the tag type.
- Paste the Userlane event listener script into the tag.
- Name the tag appropriately, such as “Userlane Event Listener.”
- Set the trigger type to DOM Ready to ensure the listener activates after the page has loaded.
💡 Pro Tip: Firing the tag on DOM Ready ensures that the Userlane object is fully available and prevents errors.
The event listener script listens for Userlane guide events—such as when a guide is started, completed, or exited—and pushes a userLaneActivity event into the dataLayer. Along with the event name, it tracks key attributes of user interactions, such as:
- userLaneAction: Indicates the type of interaction (e.g., “onStart,” “onComplete,” “onExit”).
- guideId: The ID of the guide.
- userId, userName, and userEmail: Details about the user interacting with the guide.
- stepIndex (for “onExit“ ): Tracks the last step index reached.
Step 2: Create a Custom Event Trigger
Next, set up a custom event trigger in GTM to capture the userLaneActivity events:
- Navigate to the Triggers section in GTM.
- Create a new trigger and select Custom Event as the trigger type.
- In the Event Name field, enter “userLaneActivity”.
- Save the trigger and give it a descriptive name, such as “Userlane Activity Trigger.”
This trigger will ensure your tags fire whenever a Userlane interaction is tracked.
Step 3: Define Data Layer Variables
To capture specific details about Userlane interactions, create the following variables in GTM:
- userLaneAction: Returns the type of interaction/event that occurred, such as “onStart,” “onComplete,“ or “onExit.”
- guideId: Contains the unique ID of the guide.
- userId: Stores the user’s unique identifier.
- userName: Captures the user’s name (if available).
- userEmail: Includes the user’s email address (if available).
For each variable, select Data Layer Variable as the variable type and use the respective keys above as the Data Layer Variable Name.
Step 4: Configure Marketing Tags and Pixels
With the triggers and variables in place, the next step is to set up your marketing tags and pixels to utilize the captured data:
- Create tags for your analytics platforms (e.g., Google Analytics [GA4], Piwik Pro, etc.).
- Attach the Userlane Activity Trigger you created earlier to each tag.
- Use the variables (e.g., userLaneAction, guideId, userId) in your tag configurations to enrich your event data with additional context about Userlane interactions.
Additional Notes:
The Userlane event listener is Tag Manager agnostic, meaning it can be implemented in other Tag Management Solutions (TMS) besides GTM. Regardless of the TMS used, the implementation principles remain the same.
By scrolling down this page, you’ll find a downloadable GTM recipe template that could streamline the implementation process. Customize and import this recipe to easily start tracking Userlane in-app messaging and onboarding flow interactions.
<script>
// Ensure the Userlane object is available
if (typeof Userlane === 'function') {
// Handler for when a Guide is started
Userlane('onStart', function(userlaneId, user) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'userLaneActivity',
'userLaneAction': 'onStart',
'guideId': userlaneId,
'userId': user.id || null,
'userName': user.name || null,
'userEmail': user.email || null
// Add other user properties as needed
});
});
// Handler for when a Guide is completed
Userlane('onComplete', function(userlaneId, user) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'userLaneActivity',
'userLaneAction': 'onComplete',
'guideId': userlaneId,
'userId': user.id || null,
'userName': user.name || null,
'userEmail': user.email || null
// Add other user properties as needed
});
});
// Handler for when a Guide is exited
Userlane('onExit', function(userlaneId, user, stepIndex) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'userLaneActivity',
'userLaneAction': 'onExit',
'guideId': userlaneId,
'userId': user.id || null,
'userName': user.name || null,
'userEmail': user.email || null,
'stepIndex': stepIndex
// Add other user properties as needed
});
});
} else {
console.error('Userlane is not available.');
}
</script>
Video of how to use the listener
Related Event Listener
Userpilot
GetFeedback
Comm100
download the google tag manager recipe for tracking Userlane In-App Messaging and Onboarding Flow
