If you’re not using Hotjar yet, you should be. While Google Analytics gives you a lot of quantitative data to interpret, Hotjar focusses on qualitative data, letting you know exactly what actions your visitors are taking on your site. We’re talking heatmaps and screen recordings here. Screen recordings are especially useful as you can actually watch a user navigate through your website, and see the issues they run into. Screen recordings have a small caveat though, as most legal departments find it risky to record PII (Personally Identifiable Information). While Hotjar supplies a standard fix for this issue, it’s only a small part of the solution. To completely remove all the users personal information from the recordings, you need to follow these 3 steps:

Step 1: Block Hotjar from recording keystroke data

When setting up your site in Hotjar, you’ll eventually run into a checkbox that says "Record visitor keystroke data on this site". Unchecking this will result in any user input to show up as asterisks in your recording. This is the part you’ve probably done already.

Step 2: Block Hotjar from seeing input values

While keystrokes are blocked, there are other ways a user’s entered data can be shown in any input field:

• Using the browser’s back-button
• The browser’s autocomplete tools
• Copy/pasting data (sometimes)
• Validation scripts (sometimes)

Because this data isn’t registered as a keystroke, the user’s data will be visible in the recording, which is a bad thing. Luckily, Hotjar has you covered and has a specific HTML attribute that when set, will mask the elements content in the recording. All you need to do is add data-hj-masked to your elements and you’re good to go. If that sounds like a lot of work, you can always add a line of code above your Hotjar tracking script:

//note: this is a jQuery example, recode to vanilla JS if jQuery is not available on your website.
  $('input[type="text"]').attr('data-hj-masked','');

  <!-- Hotjar Tracking Code for www.yoursite.com -->
    ... rest of the Hotjar tracking code ...
  

There you go, all of your inputs are now masked in Hotjar recordings.

Step 3: Block Hotjar from recording feedback data

This is the part most people forget. Let’s say you have an e-commerce website, and you’ve meticulously blocked all inputs from showing up in the Hotjar recordings. Some time has passed and you look at a recording. The user types their information in the fields, you only see asterisks, so far so good. The user moves through the funnel, and ends up on the confirmation page, and there it is: all the users information right there on the screen. Crap.

Most sites have some form of feedback of user data as a final check before a purchase, usually in the form of a final step listing everything a user has entered, from selected products to shipping information (and maybe even creditcard details). Don’t forget to add the data-hj-masked-attribute to the elements that hold this information, so Hotjar won’t see it. If you can’t access the site, I recommend adding the specific selectors to a javascript array and adding the attribute just like the example in step 2:

var blockFromHotjar = ['#details','.user-info','input[type="text"]','textarea'];
  $.each(blockFromHotjar,function(i,val){
    $(val).attr('data-hj-masked','');
  });

  <!-- Hotjar Tracking Code for www.yoursite.com -->
    ... rest of the Hotjar tracking code ...
  

With the code above, any selectors you add to the array, will automatically get the attribute needed to block it from Hotjar’s recordings.

And there you go, your Hotjar recordings are now totally void of any PII. If you listen closely, you can hear the sighs of relief coming from your legal department.