Leave tracker for a website: how to catch the moment your customer is leaving
In this article, we’ll speak about tracking moments when users try
to leave a website. I’ll describe in detail how we determine the time of users’ leaving, and how the tracking will affect business revenue within our project.
For now, we are testing hypotheses about returning clients to our website.
To make the process plain, we’ll walk you through our customer flow, and the technical side of tracking. We aim to share experience and produce a solution that can be applied in different cases.
The article is written by Vasyl Tarnapolskyi
But first context. Our project is a digital B2B marketplace that automates the procurement of sheet-metal parts. We are working on reducing manual tasks like order processing, status tracking, and facilitating communication between customers, manufacturers, and shipping companies.
Our usual customer flow includes five steps:
- Upload
- Configuration
- Quote
- Billing
- Overview
Firstly, a user has to choose the type of metal and upload all files which need to be processed.
Then the uploading status of all files will be shown:
The next step is Configuration. Once the user finalizes to configure all uploaded files, we need to process data — Step 3.
And here is the issue. The proceeding of one or five files would be fast. Prices and available dates for the order would be visible to the client.
But what if the client has fifty files, or five hundred?
It would take quite a long time. Because of the complicated process of calculation, and additional services we use to do this. Services emulate the process of developing details on factories to figure out the most optimal way to place parts on sheet metal.
For now, we are tracking time from calculation start to full rendering of Step 3 in a tracking tool — Sentry. Here you can see actual one of the highest results for the last 90 days:
Exactly, this action (moment of leaving the website) we had to determine.
The process of calculation is really time-consuming and not all of our clients want to wait for so long, so they leave. The tracking would allow us to notify the client about the calculation finish and the order ready to be completed.
Tech Part
Now, let’s speak about the technical part. Based on these manipulations you will have the possibility to catch a moment when the user tries to leave the page.
While loading the calculation page, we are doing a lot of requests to get full order information.When the client decides to leave the page, there could be no additional space for one more request, but at this moment we have to do
a request to a server-side, to inform that client is leaving the calculation. If this case is related to leaving from calculation to another page, we can easily handle it with native Vue.js methods. If a user is closing the tab, we can only use — beforeunload or unload methods.
There was a possibility to send sync XMLHttpRequest inside those methods, but now it’s impossible because it significantly slowed down the transition to other pages. So, in this case, we could send a request to the server-side with navigator.sendBeacon().
How does it work?
The system sends your request at a browser level, instead of a page level. That gives us the possibility not to slow down the transition between pages, and also be sure that the request will be done, even if the tab would be closed.
What about browser support?
All modern browsers support Beacon API, the only problem could occur with Internet Explorer 11 support, but fortunately, we do not use it anymore.
How does it look in the code?
We create a function with a server-side request, where we use sendBeacon.
Also, we need to create a function to check if prices exist, and if so — this request is not valid anymore, and we don’t have to track user leaving, on the contrary, we do server-side requests.
When a page is mounted, we add an EventListener to beforeunload, which gives us the ability to track tab closing.
We also add TrackLeave to the native destroy function in case, user decides to go to another page of the site without waiting for the uploading completed.
Finally, we add the removal of the Event immediately, after the price has been loaded.
As you can see, mechanisms are similar to regular requests to the server.
The only thing that you should add is onbeforeunload listener. Don’t forget to clean it, when you needn’t it anymore. Plus, the sendBeacon function was useful in this case. We hope you will find it helpful as well.
Now, we are expecting tracking results, to make the final decision. Do we need to inform customers about calculation finish or not? If we have to notify them, what is the best way to return them to work on our platform?
Nevertheless, this research could increase the number of orders and clients in multiple times, or at least, give us more information about our customers.
Thanks for reading. Stay tuned for what’s new. Follow Rolique!
