Additional SessionCam class customizations
At time there are additional classes that would need to be added to elements on the page in order for SessionCam to be able to perform different actions. We have listed the additional customization's below, if you are unsure whether you need the customization option please do reach out to our Customer Success Team who will happily advise.
The additional classes that can be used are listed below:
- If you have an elements on your site that scroll separately from the body element of the site (perhaps you have a <div> element that has overflow-y:auto present) then you would need to add the "sessioncammonitorscroll" class to the element in order to see the element scroll during our replays. You can find another article about this here: Monitoring scrolling for sub-elements on the page.
- In some implementations of ReactJS applications there will be a solution known as parallax scrolling involved. This typically requires our "sessioncammonitoroverflow" class to be added to the body element of the page to allow us to accurately capture the scroll position.
- If your site contains a single element (such as <div> or <main>) that covers the whole page (therefore all other content is contained within it) and has the CSS options for: height:100%, overflow-y:auto (or scroll), and position:fixed then you would need to add this class to that element.
- If you have sensitive data on a page you will likely need to mask this information so that is not shown in the recordings. In order to do this you can add the "sessioncamhidetext" class to the lowest element possible that contains the data (these would tend to be something like a <p>, <h*>, or <span> element). It is important to add the class to the lowest element in the DOM tree to ensure the data is always masked. You can find another article regarding this option here: Disable recording of page text.
- Sometimes there will be elements on a page that trigger a DOM change every so often, this may be as simple as a countdown clock on a special offer through to product images changing colour when the user interacts with a colour selector. You may not want to track these changes as they may impact the value of the recording for you (for example you may not need to know that the countdown clock is counting down!). If this is the case you can add the class for "sessioncamignorechanges" to the element that is changing constantly.
- There are two options for masking form fields on your site, this can be done from the SessionCam console itself (with various masking options), or it can be set on your own site by added a class called "sessioncamexclude" to your fields. You can find another article regarding this option here: Disabling recording of form fields