Using Not in CSS Selector for record_mask_text_selector Configuration | Mixpanel Community

Using Not in CSS Selector for record_mask_text_selector Configuration

Are we able to use not in our CSS selector for configuring record_mask_text_selector? I'm looking to apply a class to a few elements that I'd like included in the screen recording (vs trying to block all the ones I don't). Here is my init config that doesn't appear to be working.

record_mask_text_selector: "*:not(.mp-allow-text)", 

and a simple element with the class applied.

<span class="hidden md:block lg:block xl:block mp-allow-text">Flow</span>

2 comments

kapa.ai
APP
·
·
Hi Mike P., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
Based on the knowledge sources provided, I don't have specific information about using the :not selector in the record_mask_text_selector configuration for Mixpanel's Session Replay. The documentation doesn't explicitly mention this use case.However, I can provide some relevant information based on what is documented: 1. By default, Mixpanel masks all non-input text on your webpage. This is done by setting record_mask_text_selector to "**".2. You can customize this behavior. According to the Session Replay documentation, you can change the default masking behavior: "Mixpanel empowers its customers to decide to record all non-input text as-is. First, change record_mask_text_selector's default value from "" to "" to make all text elements no longer masked. Then, you can individually mask each text element detailed in the next section."3. The documentation also mentions that you can add a specific class to mask individual elements: "To mask text, add the class name ".mp-mask." Masked content is replaced with []"Given this information, a potential approach to achieve what you're looking for might be: 1. Set record_mask_text_selector to an empty string "" to unmask all text by default. 2. Then, use the .mp-mask class on elements you want to mask, rather than trying to use a :not selector.Here's how you might modify your configuration: LBKSmixpanel.init(YOUR_PROJECT_TOKEN, { record_mask_text_selector: '', // other configuration options... });LBKSAnd then in your HTML: html <span class="hidden md:block lg:block xl:block"> Flow</span> <span class="mp-mask"> This text will be masked</span> LBKSThis approach allows you to explicitly choose which elements to mask, rather than trying to exclude specific elements from masking.However, please note that this is a suggested workaround based on the available documentation. If this doesn't meet your specific needs, I recommend reaching out to Mixpanel's support team for more detailed guidance on advanced configuration options that might not be covered in the public documentation.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.