For fast-moving e-commerce businesses, inefficient feedback processes can lead to lost sales. Vague bug reports and endless email chains create friction between your marketing, content, and development teams, slowing down crucial fixes.
This guide outlines the workflow for implementing Marker.io on your e-commerce store. With Marker.io you will learn to capture, triage, and resolve issues within a central hub, creating a faster and more collaborative operation.
Step 1: The Professional Setup
A proper setup is the foundation for a successful feedback process. The best practice for a live e-commerce store is to use the invisible widget, which allows your team and other stakeholders to report issues without ever showing a feedback button to your customers.
The Invisible Widget Workflow
Install the Website Snippet: Place the Marker.io JavaScript snippet in the global
<head>of your website template.Set to Hidden: In your project's widget settings, ensure the visibility is set to Hidden by default.
Activate via Secret Parameter: Configure a "secret parameter" to reveal the widget when needed. We recommend using
?report.
This setup allows anyone you've given the secret URL to (like an external partner or an internal team member) to spot an issue on a live page, add ?report to the end of the URL, and have the feedback button instantly appear for them.
Step 2: Capturing Deep Context with Every Report
A feedback report is only as good as the context it contains. Marker.io automatically captures deep technical and business data to eliminate guesswork for your team.
See the Past with Session Replay
The Problem: A team member reports a complex bug in the checkout flow, but your developers can't reproduce it.
The Solution: Session Replay is automatically enabled with the website snippet. Every report includes a video-like recording of the reporter's last 60 seconds of activity. Your developers can see every click and scroll that led to the issue.
Capture Business Intelligence with Custom Metadata
The Problem: A bug only affects your VIP customers or occurs when a specific promo code is used. This critical business context is often missing from reports.
The Solution: Pass crucial data from your store directly into every report using the custom metadata feature.
Here is an example of key e-commerce data to capture:
// Set initial data when the page loads
window.markerConfig = {
project: 'YOUR_PROJECT_ID',
customData: {
'Logged In': true,
'User ID': 'cust_1138',
'Customer Tier': 'VIP Gold'
}
};
// Update data dynamically as the user interacts with the site
// For example, when the cart changes:
Marker.setCustomData({
'Cart Value': 41.00,
'Cart Items': 2
});
Step 3: The "Marker-First" Workflow in Action
Instead of sending every minor issue to your developers, use Marker.io as your central command center. This is where understanding the roles of Guests and Members becomes critical.
Empowering Your Teams with Clear Roles
Guests (e.g., External Partners, Non-Technical Teams) Guests are ideal for anyone who only needs to report feedback, not manage it. They typically report via the hidden widget.
Simple Forms: Guests see a streamlined feedback form, ensuring you get the essential information without overwhelming them.
Focused Visibility: They can track the status of their own reported issues via a personal Reporter Portal, but they cannot see feedback submitted by others.
Members (e.g., Core Internal Team, Developers, PMs, QA) Members are the core users you invite to your Marker.io project. They have the power to manage and debug all incoming feedback.
Verbose Forms: Members can use more detailed forms with fields like
Priority,Assignee, and other custom fields that map to your development tools.Full Project Access: This is the key difference. Members can see all feedback submitted to the project, regardless of who reported it.
Complete Technical Details: For every single ticket, Members have access to the deep diagnostic data, including the session replay, console logs, network requests, and all custom metadata. This gives your technical team the comprehensive information they need to triage and resolve issues quickly. 🧑💻
Feature | Guests (e.g., Marketing) | Members (e.g., Dev Team) |
Reporting | ✅ Can report issues | ✅ Can report issues |
View All Feedback | ❌ Only sees their own reports | ✅ Sees all project feedback |
Technical Data | ❌ Cannot view logs/metadata | ✅ Full access to all data |
Manage Issues | ❌ Cannot assign or change status | ✅ Can triage and manage |
Step 4: Escalating Perfect Tickets to Your Developers
Only after an issue has been vetted and confirmed by a Member should it be sent to your development team.
Push to Integration: With one click, send the validated bug report from Marker.io to your team's project management tool (Jira, Asana, ClickUp, etc.).
Create the Perfect Ticket: A developer ticket is automatically created containing everything: the annotated screenshot, a link to the session replay, all console logs, and all the rich custom metadata.
Advanced Workflows for Proactive Quality Assurance
The best teams move from a reactive to a proactive approach to website quality.
Run "Feedback Sprints" & "Site Sweeps" Schedule recurring sessions for your team to actively test parts of your website. For example, before a major sales event like Black Friday, task your marketing team with a full "Site Sweep" of the entire sales funnel to catch any issues before your customers do.
Capture the True "Voice of the Customer" Train your customer support team to use Marker.io. When a customer reports a bug, the support agent can try to reproduce it. Once they do, they can submit a report as a Guest or Member. This turns a vague customer complaint into a perfectly documented, reproducible ticket, complete with a session replay of the agent's steps.