Tracking Analytics for Wizart Visualizer
- Andrei Dyakov
Integrating Wizart Visualizer into your website opens up opportunities to measure its impact on your business. Tracking key metrics allows you to understand how users interact with Wizart and evaluate the value it adds to your sessions.
This article explains how to collect analytics from Wizart Visualizer by hooking into its events and sending them to tools like Google Analytics (GA). For a complete list of available Wizart events, refer to our Deployment Kit Reference.
Why Track Wizart Events?
By tracking Wizart events:
You can measure user interactions like applying designs, adding items to the shopping cart, or opening the gallery.
Use Google Analytics’ E-commerce Scope in Behavior > Events reports to analyze conversion rates and per-session values for sessions where Wizart events were triggered.
By categorizing Wizart events under a single taxonomy (e.g., category: "Wizart"), you can create GA segments to compare Wizart-using sessions against non-Wizart sessions.
Setting Up Event Tracking
To track events from the Wizart Visualizer, you will hook into its JavaScript events and send them as event hits to your analytics platform.
Add the Tracking Script
Place the tracking script on the pages where the Visualizer is integrated (e.g., home, catalog, or product pages).Ensure the script is added after the Wizart integration script to avoid null responses.
Insert it before the
document.addEventListener("DOMContentLoaded", () => {})block for proper execution.
Example Script
Here’s a sample script to track Wizart events and send them to Google Analytics:
<script>
document.addEventListener('DOMContentLoaded', () => {
// Subscribe to Wizart events and forward them to Google Analytics
const wizartAnalyticsHandler = (event) => {
const eventData = event.data; // Event-specific data
const eventName = event.name; // Event name, e.g., 'USER_SESSION_START', 'PRODUCT_SELECT'
// Send event to Google Analytics
if (window.gtag) {
gtag('event', eventName, {
event_category: 'Wizart',
event_label: 'Wizart Event',
value: 1,
});
} else if (window.ga) {
ga('send', 'event', 'Wizart', eventName, 'Wizart Event', 1);
}
};
// Subscribe to all available Wizart events
WizartDeploymentKit.EventBus.subscribe(wizartAnalyticsHandler);
});
</script>Customize the event label (event_label) or value (value) as needed for your GA setup.
Also you can subscribe only for specific events or specific Visualizer instance see more.