Reliable Targets

A newer version of this documentation is available. Switch to the latest version docs.

This identifier is heavily reliant 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.

For instance, consider the widget tree of a Flutter app as illustrated below:

main.dart
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 Snapshots, 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 Snapshots from different dates and versions, including layouts or different A/B testing variations.

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

  • Tracking elements capable of dynamically shifting on a page (example: customizable profile page).
  • Monitoring elements across various app versions, even if their positions change (example: carousel transitioning from top to bottom).
  • Tracking elements amidst A/B testing (example: testing old and new product pages within the same version).
  • Monitoring elements used across multiple pages (example: search bar).
  • Ensuring a unique identifier for a call to action regardless of its location on the screen (example: “Add to Cart” button).

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

The ReliableTarget widget requires a mandatory name argument for identifying the component to track. Below is an example of implementing it with the provided code:

main.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'),
],
),
);
}