Monitor users that avoid your data collection funnel, using React and Segment
Improving our users’ experience is a must.
To offer the best payment experience to our customers, which is the core value of Libeo, we need their feedback.
Using simple and automatic anonymous data collection in our app is a great way to get it.
The goal is to better understand how our users interact with our app to facilitate their business administrative management, make it simple, pleasant and useful.
The problem comes with “ad blockers”. Indeed, our data collection can be drastically reduced because of it, without us having an idea of how much.
Before starting, what is Segment ?
Assuming you came through this article by pure chance, you should know that Segment is a software that helps companies by collecting, cleaning, and monitoring events from their web and mobile apps.
By sending us “front-end events”, it allows us to get answers to questions like :
Does this new button gets more clicks than the previous one ?
Was this new feature used a lot during the last 2 weeks ?
When certain types of ad blockers are active in the user’s browser, calls to Segment server cannot be performed, thus these front-end events are blocked.
To address this, we decided to flag the users which we cannot collect the front-end events from.
Catch these ad blocker users
How ? By watching for the presence of an ad blocker in the users’ browser at the entry points of our application which are the log in and sign up pages.
The idea is very simple : we want to trigger the user’s browser into making a request to Segment when he is on the log in/sign up page.
The result of this request will be sent to our server, collected and tracked through back-end Segment events, which are completely independent from the user’s browser :
From there, we can make statistics and get good idea of how many users are blocking front-end Segment events.
Here is a simple way to implement this solution using React
There are two possible results to this request made to Segment :
- It succeeds : the ad blocker is non existent, or at least doesn’t block the front-end Segment events
- It fails : there is an ad blocker, and it blocks the front-end Segment events
In practical terms, we’ll be using using two hooks that React provides us with : useEffect and useState.
The state isEventSegmentEnabled is the one that will indicate if the user’s browser is blocking our front-end Segment events.
This state’s value will change according to the result of our request to Segment.
The function makeRequestToSegment triggers a request to Segment. For the moment, this function is never called.
If the function makeRequestToSegment request fails, isEventSegmentEnabled value will be set to false, in the other case it will be set to true.
NB: isEventSegmentEnabled default value must be null, and it will stay null only when the user’s log in/sign up process takes less time than the request to Segment to finish. In that case, we do not have any idea if the call to Segment server would have failed or not, thus there is no way to know if front-end Segment events are being blocked or not, so it has to be kept to null.
makeRequestToSegment is called inside a useEffect hook.
Its role will be to trigger the function makeRequestToSegment each time the parent component will be rendered.
In practical terms, it means that makeRequestToSegment will be triggered each time the user lands on our the log in or sign up page.
Where and how to use this hook ?
Let’s say you have a component called MainSignInScreen.
This custom hook should be used inside this component. isSegmentEventEnabled value could then be send from the log in/sign up’s form right to the server.
The only thing left to do is to store it somewhere and monitor it.
Conclusion
Now that we know about this issue, it might interesting to consider implementing solutions to minimise its impact :
→ Showing a pop-up inviting the user to deactivate his ad blocker
→ Forbidding the app access till the user deactivates his ad blocker
→ Find a way to run the front-end segment calls to Segment outside the users’ browser
What are your thoughts about this ? How would you optimise the use of your data collection tools ?
We’d love to hear your suggestions !
