How to implement Hotjar When Application URL doesn’t change
When it comes to tracking user activity on a site which is a SPA (Single Page Application) or PWA (Progressive Web Applications) then using VPV is considered to be best.
What is VPV?
VPV stands for Virtual Page View. Upon rendering something in your application if url doesn’t change and you want to count user actions and activities in your funnel then you can use VPV to add virtual step.
How To Implement VPV?
Before you implement VPV just make sure that you are familiar with hotjar funnels and hotjar tracking code.
Integrating VPV is quite simple and easy, all you have to do is
- Call this method below in your javascript function where you want vpv to get triggered
hj(‘vpv’, ‘funnel-step’);
- Goto Hotjar dashboard and add above funnel step with Contain page targeting rule.
Example
I’m implementing it in a vue.js application, example application has five components.
A (Starter Questions) > B (Basic Signup) > C (Contact Info) > D (Final Questions) > E (Thank You Page)
First step: Call vpv Javascript method where you want to trigger it. I want to trigger vpv each time a component is loaded, so lets call this method to mounted() function of each component.
StarterQuestions Component > hj(‘vpv’, ‘starter_questions’);
BasicSignup Component > hj(‘vpv’, ‘signup’);
ContactInfo Component > hj(‘vpv’, ‘contact_info’);
FinalQuestions Component > hj(‘vpv’, ‘final_questions’);
ThankyouPage Component > hj(‘vpv’, ‘finish’);
Second step: Create a funnel and add above funnel steps in your funnel.
Third step: open your site and visit around so that hotjar track those activities.
Vala! You have your dashboard filled with activities.
GitHub Repo
References:
- https://help.hotjar.com/hc/en-us/sections/360004871194-Triggers-and-VPVs#vpv
- https://help.hotjar.com/hc/en-us/articles/115011805448-How-to-Track-Funnel-Steps-if-My-URL-Doesn-t-Change-
