Reliable Targets

CSQ SDK uses zoning identifiers that relies heavily on the structure of the widget tree. Consequently, changes to the widget tree, such as moving, nesting, or removing a widget, may result in the loss of tracking data.

Consider the widget tree of a Flutter app as illustrated below:

Widget _buildMyAwesomeContent() {
  return Column(
    children: const [
      Text('Answer to the Ultimate Question of Life, The Universe, and Everything'),
      Text('is'),
      Text('42'),
    ],
  );
}

In many cases, maintaining a Reliable Target, despite changes in its position within the tree, is essential. This consistency ensures reliable analysis of data across different Screenshots, dates, and versions, including variations in layouts or A/B testing.

Having a Reliable Target for a widget enables the analysis of data across various Screenshots from different dates and versions, including layouts or A/B testing variations.

Here are some scenarios where the Reliable Targets feature proves beneficial:

Scenario	Example use case
Tracking elements capable of dynamically shifting on a page	Customizable profile page
Monitoring elements across various app versions, even if their positions change	Carousel transitioning from top to bottom
Tracking elements amidst A/B testing	Testing old and new product pages within the same version
Monitoring elements used across multiple pages	Search bar
Ensuring a unique identifier for a call to action regardless of its location on the screen	"Add to Cart" button

To facilitate this, the CSQ Flutter SDK offers a ReliableTarget widget, designed to encapsulate the widget intended for reliable tracking.

The widget requires a unique name argument for identifying the component to track across all versions of your app:

import 'package:contentsquare/csq.dart';

Widget _buildMyAwesomeContent() {
  return ReliableTarget(
    name: '42_is_the_answer',
    child: Column(
      children: const [
        Text('Answer to the Ultimate Question of Life, The Universe, and Everything'),
        Text('is'),
        Text('42'),
      ],
    ),
  );
}