Subscribing to Wizart events

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.

One of the ways 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

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

Event name

Script

Example

gallery_open

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.

apply

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.