Getting Started with Product Analytics

Use this quick start guide to set up the CSQ Product Analytics SDK in a Flutter application.

Use the Contentsquare wizard or skills to set up, update, and configure Flutter with your AI coding assistant.

npx @contentsquare/wizard install

Use this path when you prefer to configure your AI coding assistant yourself.

Choose how to install the Contentsquare skill.

copilot plugin marketplace add ContentSquare/agents
copilot plugin install contentsquare-flutter@contentsquare

/plugin marketplace add ContentSquare/agents
/plugin install contentsquare-flutter@contentsquare

npx skills add contentsquare/agents

After installing the skill, paste this prompt into your AI coding assistant:

Install Contentsquare for Flutter.

Prefer to set things up manually? Continue with the steps below.

Once you've completed the setup process, the CSQ SDK will capture a wide variety of user interactions in your application with no additional code required.

With Flutter CLI:

flutter pub add contentsquare

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
flutter:
  sdk: flutter
contentsquare: ^4.5.1

1. Import the CSQ SDK in your app:

   import 'package:contentsquare/csq.dart';

2. Configure and start the SDK as soon as possible in your app, ideally in the main() function.

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().start(
       startConfig: StartConfig.withEnvironmentId(
         id: 'YOUR_ENVIRONMENT_ID',
       ),
     );
   }

3. (Optional) Add AnalyticsOptions. For example if your Product Analytics environment is hosted in the EU, set the baseUrl option to https://mh.ba.contentsquare.net

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().start(
       startConfig: StartConfig.withEnvironmentId(
         id: 'YOUR_ENVIRONMENT_ID',
         options: AnalyticsOptions(
           baseUrl: Uri.parse('https://mh.ba.contentsquare.net'),
         ),
       ),
     );
   }

4. Start your application, and check logs for this output:

   ┌───────────────────────────────────────────────────────────────────────────────
   │ 🔔 IMPORTANT 🔔 (CSLIB 4.5.1)
   ├───────────────────────────────────────────────────────────────────────────────
   │ Contentsquare Flutter SDK 4.5.1 starting in app:
   │ com.example.testapp
   └───────────────────────────────────────────────────────────────────────────────

5. Recommended To capture screen views automatically, add the CSQNavigatorObserver to your app's navigator observers:

   import 'package:contentsquare/csq.dart';
   
   MaterialApp(
     navigatorObservers: [
       CSQNavigatorObserver(),
     ],
     home: MyHomePage(),
   )

   More details in Customize autocaptured screens.

6. Recommended To enable automatic capture of user interactions, add the option enableInteractionsAutocapture: true to your AnalyticsOptions configuration:

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().start(
       startConfig: StartConfig.withEnvironmentId(
         id: 'YOUR_ENVIRONMENT_ID',
         options: AnalyticsOptions(
           enableInteractionsAutocapture: true,
         ),
       ),
     );
   }

Implement the optIn() API to forward user consent to the SDK and generate a user ID.

The CSQ SDK treats users as opted-out by default.

It can be done immediately after start is called:

void main() async {
  // ...
  await CSQ().start();
  await CSQ().optIn();
  // ...
}

Alternatively, you can call optIn() in response to a user action, such as tapping an "I agree" button:

class UserConsentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Consent'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await CSQ().optIn();
          },
          child: Text('Agree with Terms and Conditions'),
        ),
      ),
    );
  }
}

Our SDK offers a wide range of features to enhance your implementation, including extended tracking capabilities, and personal data masking.

Session Replay and Error Monitoring are both available with the Experience Analytics extension, which you can purchase separately.