Hide sensitive data

When using autocapture, Product Analytics collects target text information about the element that was interacted with, as well as text data from UI elements further up in an element’s ancestry. However, some of these elements might contain sensitive user information, or Personal Data, that needs to be excluded from data capture.

There are three options for hiding sensitive data:

Disabling text capture
Per-view text masking
Ignoring interactions for specific views

Disabling all text capture

You have the option to disable text capture for all events that are automatically captured. To do this, use the CSQMaskingConfig API when starting the SDK.

import 'package:contentsquare/csq.dart';

void main(){
  await CSQ().start({
    maskingConfig: CSQMaskingConfig(
      maskTexts: true,
    ),
  });
}

Masking text for specific views

If you don’t want to disable all text capture for your app, you can take a more targeted approach of only masking text for specific views in your app that you know might contain sensitive data. When text is masked for a view, it will still have target text, but the actual text will be replaced with ****.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CSQMask(
        config: CSQMaskingConfig(maskTexts: true),
        child: Text('Sensitive Information'),
      )
    );
  }
}

Using the CSQMask widget, you can wrap any view that might contain sensitive data to ensure that its text content is masked when captured by the SDK. Its usage will impact all child views contained within the masked view.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CSQMask(
      config: CSQMaskingConfig(maskTexts: true),
      child: Column(
        children: [
          Text('Sensitive Information'),
          ElevatedButton(
            onPressed: () {},
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

In this example, both the Text and ElevatedButton views will have their text content masked when interacted with, as they are both children of the CSQMask widget.

In case of need you can also combine multiple masking configurations by nesting CSQMask widgets.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CSQMask(
      config: CSQMaskingConfig(maskTexts: true),
      child: Column(
        children: [
          Text('Sensitive Information'),
          CSQMask(
            config: CSQMaskingConfig(maskTexts: false),
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

In this example, only the Text view will have its text content masked, while the ElevatedButton view will retain its original text, as it is wrapped in a nested CSQMask with maskTexts set to false.

Ignoring all interactions

You have the option to disable all interaction capturing. To do this, use the CSQMaskingConfig API when starting the SDK.

import 'package:contentsquare/csq.dart';

void main(){
  await CSQ().start({
    maskingConfig: CSQMaskingConfig(
      maskInteractions: true,
    ),
  });
}

Ignoring interactions for specific views

If you don’t want to disable interactions for your app, you can take a more targeted approach of only masking interactions for specific views in your app.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CSQMask(
        config: CSQMaskingConfig(maskInteractions: true),
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Submit'),
        ),
      )
    );
  }
}

Using the CSQMask widget, you can wrap any view that you want to ignore interactions for. Its usage will impact all child views contained within the masked view.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CSQMask(
      config: CSQMaskingConfig(maskInteractions: true),
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text('Submit'),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('Cancel'),
          ),
        ],
      ),
    );
  }
}

In this example, both the ElevatedButton views will have their interactions masked, as they are both children of the CSQMask widget.

In case of need you can also combine multiple masking configurations by nesting CSQMask widgets.

import 'package:flutter/material.dart';
import 'package:contentsquare/csq.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CSQMask(
      config: CSQMaskingConfig(maskInteractions: true),
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text('Cancel'),
          ),
          CSQMask(
            config: CSQMaskingConfig(maskInteractions: false),
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

In this example, only the Cancel ElevatedButton view will have its interactions masked, while the Submit ElevatedButton view will retain its original interactions, as it is wrapped in a nested CSQMask with maskInteractions set to false.