Once you added the visualizer to your website, you might be interested in checking the effects of the Wizart products on your business by looking at the key metrics. This document is intended to help you with implementing the Wizart event tracking.
Please Note: Wizart is not a POS app, it is essentially a ‘Product List Page’, and once the products are selected, Wizart redirects the consumer to the shopping cart platform for completing the transaction. Therefore, there is no ‘conversion event’ as by this point Wizart is no longer involved. However, you can track and understand the uplift interactions with Wizart are bringing.
The way to do this is to hook into to the Wizart ‘add_to_shopping_cart event’ and write this to Google Analytics as a standard GA event.
Enable Shopping Cart in your Wizart PIM account.
2. Add prices to the products in the visualizer catalogue by updating the csv with metadata.
3. Implement 2-way shopping cart synchronization on the backend following the instructions. Please remember, that once the user clicks the button ‘complete checkout’ in the visualizer, the user is redirected to the shopping cart platform on your website to complete the purchase.
You can then use the E-commerce scope in the Behaviour > Events reports in GA to guage the impact of these interactions as this will give you a conversion rate and per session value of sessions in which these events were triggered. You can check the instructions on Sending Data to Google Analytics via the link.
By using a sensible taxonomy e.g. all events written from Wizart have the category “Wizart”, you could also create a Google Analytics segment for sessions containing the “Wizart” event category and compare this in GA reports to non-Wizart users.
In order to event track these, you’ll need to hook into the JavaScript event pushed by Wizart and then send an event hit type.
Please use the script below, where 'wizart_analytics' is a required base name of all wizart events; and 'apply' is an exact name of a triggered event (gallery_open, apply, add_to_shopping cart, etc.).
<script>
window.addEventListener('message', function (event) {
if (
event.data
&& event.data.eventName === 'wizart_analytics' //base name of all wizart events
&& event.data.analyticsEventName === 'user_init' //exact name of triggered event (gallery_open, apply, etc.)
) {
//some your action to monitor a user activity
//payload contains all necessary data about triggered event
//console.log(event.data.payload);
//console.log(event.data.payload.user_identifier); //current user id. This id is instant for each sessions of the user.
}
});
</script>
This script is to be added to a page where the Wizart Visualizer is integrated (that is, on the home page, catalog pages, and/or product pages). The best place to put it is next to the Wizart integration script, for example, after it, but not before, in order to avoid receiving a null response. To make sure the script works properly, it is better to add it before the document.addEventListener("DOMContentLoaded", () => {}); script.
You can subscribe to any events listed below:
Event name | Description |
|---|---|
launch_first_time | the first time the application was launched |
wizart_session_start | each time the application is launched |
wizart_session_finish | each time the application is closed |
gallery_open | the application (Visualizer) is open |
predefined_interior_selected | whether a pre-defined (default) interior was selected |
photo_uploaded | whether a photo was uploaded |
custom_interior_selected | whether a custom interior was selected |
custom_interior_deleted | whether an uploaded interior was deleted |
back_button_clicked | a user clicks on the back button and goes back to the client’s site |
brand_selected | whether any brand was selected |
collection_selected | whether any brand was selected |
article_selection | whether any product was selected |
apply | whether any products were applied |
add_to_favorite | whether any products were added to the Favorites |
remove_from_favorite | whether any products were removed from the Favorites |
Info | these are users' ‘Go to product page’ clicks |
rotate_flooring | these are users' flooring rotations ('Rotate flooring' button) in the Visualizer |
laying_patterns_selected | whether a user changed any flooring layouts ('Change layout' button) |
download_original | tracks original image (without any products applied) downloads (available for users' interiors only) |
download_result | tracks result image downloads |
download_result_with_info | tracks result image with information downloads |
share_image | tracks social media shares |
shopping_cart_open | tracks shopping cart page visits (within the Visualizer) |
shopping_cart_close | tracks shopping cart page closings (within the Visualizer) |
open_in_store | These are users' visits to the website to proceed with the purchase. It is triggered just once when a user goes to the website even with several products in the shopping cart (i.e. 3 products = 1 ‘open_in_store’ event) |
add_to_shopping_cart | tracks adding items to the shopping cart |
remove_from_shopping_cart | tracks item removals from the shopping cart |
+1_item | tracks increasing the item quantity in the shopping cart |
-1_item | tracks decreasing the item quantity in the shopping cart |
Some examples:
Event name | Script | Example |
|---|---|---|
| window.addEventListener('message', function (event) {
if (
event.data
&& event.data.eventName === 'wizart_analytics' //base name of all wizart events
&& event.data.analyticsEventName === 'gallery_open' //exact name of triggered event (gallery_open, apply, etc.)
) {
console.log(event.data.payload.start_app);
}
});
| This script shows whether the Visualizer is open. The response is true. |
| window.addEventListener('message', function (event) {
if (
event.data
&& event.data.eventName === 'wizart_analytics' //base name of all wizart events
&& event.data.analyticsEventName === 'apply' //exact name of triggered event (gallery_open, apply, etc.)
) {
console.log(event.data.payload);
}
});
| This script shows whether a user applied any products. |