The video provides a step‑by‑step tutorial on using Wix’s Site Monitoring tool to capture and analyze real‑time events and errors on a Velo site. It begins by instructing the viewer to enable code in the editor, open the Site Dashboard, and navigate to the Site Monitoring section under Production Tools. The presenter then demonstrates how any console or error event triggered by visitors—whether from the front‑end, mobile, or back‑end—is logged with full details such as timestamp, severity, view mode, and JSON payload. A custom console.log is added to the $w.onReady function to log a “homepage opened” event, and the resulting entry is examined in the monitoring UI. Next, an intentional error is created by adding an OnClick handler to a “Book now” button that references a non‑existent success message, causing a runtime error that is captured by the tool. The site is then published, the live button is clicked, and the resulting error report is reviewed. The tutorial concludes by encouraging users to leverage Site Monitoring for debugging and optimization, and points them to the Resources page for further tutorials, articles, and example code.
Chapters
In this video, we'll show you how to use Site Monitoring Tool to track events and errors in real time. You'll gain immediate insight into your users interactions and optimize the way you follow errors and debug your site. To get started, open the editor and make sure code is enabled on the top bar. Then click Settings and select My Dashboard. Your Site Dashboard will open up in a new tab. From here, click Settings and under Production Tools, select Site Monitoring. Then under View Site Events, click Open. Now you can view site events in real time. Any action by your site visitors that triggers a console or error event, including events on mobile or from the back end, will be logged here in full detail. To demonstrate this, let's log some events while the Site Monitoring tool is still open. Go back to the editor and open the page code panel at the bottom of the screen at $w onready add a console log to log an event of a user opening the homepage of your site. Then click Preview and return to the Site Monitoring Tool. In your other tab you'll see the event log was added and you can click anywhere on it to get more details. From here you can see information including the timestamp of the event and its severity. Scroll down to see the view mode that was used when the event was logged and the JSON payload of the event. In this example, it's the console log that we added to the dollar won ready function. Let's try adding another event, this time an error. To do this, close the Details window and leave the Site Monitoring tab open. Then return to the preview page inside the editor and click Back to Edit. You can add an event to any element on your page. In this example, we'll choose a Book now button in the Properties panel. Hover over OnClick, click the plus sign and hit Enter. For the onclick event, we'll do two things. First, we'll log the event so we know the user has clicked the button. Next, we'll add a success message, but since we haven't created the message yet, the code editor will register it as an error. This is because it recognizes the element doesn't exist. Let's leave it there anyway to see what happens. Instead of previewing our page, let's click Publish to test this on the Live site. To view your live site, click Site on the top bar and then view Published Site. Once your site loads, click on the Book now button. You'll notice that nothing happens. Return to the Site Monitoring tab to get a detailed report of your site events and how they were evaluated. Now you're ready to use site monitoring tool to track events and errors as they occur in real time. To learn more, visit our Resources page for tutorials, articles, example code, and more.