A magic erasure that protects your visitors’ privacy

Image of the blog authorChris PattisonLast updated: June 1, 2023

ProductUXEngineeringDesign
Blog cover image

Introduction

As part of our ongoing commitment to user-privacy we've developed a new tool that enables you to quickly prevent data being captured for any element on your site, without having to write a single line of code. We're calling it the Squeaky Magic Erasure.

It's available now to all our users and you'll find it in your site under a new Privacy-Tab that groups all your privacy controls in one place:

Image shows the Privacy page in Squeaky
Image shows the the Privacy page in Squeaky

The problem

Before we get into the details about what the Magic Erasure is, let's discuss why it's needed in the first place.

When a visitor browses your website or web app there are times when they could inadvertently send personal data to your analytics tool. If you don't have their consent this could be a serious problem, but even if you do have their consent you may not want to capture various elements of your site within your analytics data set.

For form data this is easily solved, we suppress all data entered into forms by default because we know via your HTML which elements are form fields. However, there are various times when the display of personal data cannot be easily detected automatically, for example:

  • Your application could be rendering text about your user on the pages of your site e.g. their personal details might appear on their user profile page.
  • Your users might add photographs to your site that contain identifiable or personal information.
  • You may wish to turn off the global data suppression for forms, but still want to avoid capturing bank details or medical data in some specific fields.

There is a technical solution to this problem that some analytics tools already deploy, including Squeaky. We provide classes (.squeaky-hide and .squeaky-mask) that you can add to your HTML and this tells the tracking code to skip data collection for those particular elements.

However, the majority of teams using web, product, or customer experience analytics tools are not engineers. They either don't have access to the codebase, or the technical knowhow, to quickly add classes to the HTML when they spot sensitive data that shouldn't be captured. This means companies often continue capturing sensitive data for weeks whilst waiting for busy engineering teams to find the time to update their site.

The solution (video demo)

Squeaky's Magic Erasure lets you avoid capturing data for almost any element on your website or web application with just a few clicks of your mouse, without having to bug developers. There's no setup either, if you've already got the Squeaky Tracking Code on your site, you're ready to get started.

I'll describe how it works below, and for those that prefer a video demonstration I've also recorded a quick demo:

Video shows a short demonstration of the Magic Erasure in action

How it works

In the guide below I'll show you the same steps taken in the video demo above. In this example we're going to be hiding elements on the Squeaky website. We don't display sensitive data on our website and the elements we are hiding are purely to illustrate the functionality of the tool.

Step 1

Go to the Squeaky Magic Erasure section of Data Capture tab in your Privacy settings:

Image shows the location of the Magic Erasure settings
Image shows the location of the Magic Erasure settings

Step 2

Check the 'Show Magic Erasure' box:

Image shows the location of the 'Show Magic Erasure' checkbox
Image shows the location of the 'Show Magic Erasure' checkbox

Step 3

Visit your site and you'll see the Squeaky Site Widget in the bottom-right of your page. Only you can see this and it will not be visible to your visitors:

Image shows the Squeaky widget overlaid on top of a website
Image shows the Squeaky widget overlaid on top of a website

Step 4

Open the widget and any element you hover over will be highlighted, displaying the name of the element:

Image shows the widget in the open state, along with a highlight element on the page
Image shows the widget in the open state, along with a highlight element on the page

Step 5

Now you can click any element and it will disappear from view on the page. You'll see a faded out version of the element, but your visitors will still see everything. The Squeaky tracking code will now skip data capture for that element.

You'll also see a list of items that you've hidden in the widget, and you can either re-click the element on your page to unhide it, or click the 'x' on the relevant row in the widget.

Image shows the widget in the open state, along with a populated list of hidden elements
Image shows the widget in the open state, along with a populated list of hidden elements

Step 6

When you view any session captured that includes hidden elements you'll see a blank space where the element appeared for your visitor but the script did not track it:

Image shows the session playback with the blank element
Image shows the session playback with the blank element

Please note: If you're hiding repeating elements or dynamic content e.g. cells in table, then you'll want to use the traditional privacy classes we provide in our developer docs rather than the Magic Erasure.

Conclusion

Keeping your analytics setup compliant and protecting your visitors' privacy is incredibly important, but historically it's not been very easy to configure which data you mask without having technical knowhow. The Squeaky Magic Erasure solves this, by providing a point-and-click solution that allows anybody to quickly teach the Squeaky Tracking Code which elements on the page to avoid capturing. It has no impact on the end user experience and simply makes it faster and easier to protect your visitors' privacy.

We're the first and only analytics tool on the market to offer a no-code solution for session data protection, so if user privacy matters to you and your business, make sure you sign up today!