Hotjar is a saas product that basically tracks users' clicks, mouse movements and scrolls on your site. It can do a lot more but the basic use case is to capture this data and see how people are using pages etc.
To integrate with ServiceNow Service Portal is pretty straightforward. There are some limitations as well so I'll go over those too.
Integration
Assuming you've already signed up for a hotjar account and created your first site, hotjar will have prompted you to add a script to your page <head>. This script injects the scripts that actually do all the clever hotjar gubbins.
To include this script in the Service Portal page <head> you need to add it as a js include in your Portal's theme.
1. Go to Service Portal > Portals and select your portal
2. Click the Theme record
3. Scroll to the related lists and click to add a new JS Include
4. On this first page click the magnifying glass on JS Include and click to create a new record
5. On this page fill in the fields:
Display name: hotjar
Source: UI Script
6. Click the magnifying glass on UI script and click to create a new record
7. On this page fill in the fields:
Name: hotjar
UI Type: All
Description: Script to initiate hotjar tracking
Script: copy in the tracking code from hotjar (strip out any non-JavaScript code, described below)
Adjustments/Improvements
Stripping out non-JavaScript
The hotjar tracking script comes wrapped in an html <script> element and with a comment above, Simply remove the two <script> tags and the comment and you are left with only JavaScript.
Dealing with page loading
After a bit of trial and error I found that hotjar would load immediately while my portal page was still showing loading spinner
This was a problem when I went to review the data in hotjar as the screen shot the code has taken was of this loading page and so users' clicks etc didn't show over the elements they were actually on.
To prevent this I added some code to only load hotjar once loading was complete. It's a bit a of fudge so if anyone has a better idea I'd be happy to hear.
My code uses jQuery to check if the loading element is present:
- If it is, it waits a second and checks again
- If it isn't, it runs the hotjar snippet
jQuery(document).ready(function(){
checkLoading();
function checkLoading(){
if(isLoading()){
window.setTimeout(checkLoading,1000);
} else {
startHotjar();
}
}
function isLoading(){
return jQuery('BODY .page:first-child H4:first-child').hasClass('sp-page-loader');
}
function startHotjar(){
//your hotjar tracking code
}
});
Limitations
Currently there is some functionality that I don't believe hotjar can support for ServiceNow OOB Portal widgets like sc_cat_item.
- hotjar doesn't appear to recognise forms on cat items as html forms
- hotjar does not capture entire screen i screenshot if scrolling required (i think this may be remediable)
