Getting Started with Product Analytics

Use this quick start guide to set up a new instance of CSQ’s Product Analytics SDK in a Flutter application.

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.0.0

1. Import the CSQ SDK in your app:

   import 'package:contentsquare/csq.dart';

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

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().configureProductAnalytics(
       environmentId: 'YOUR_ENVIRONMENT_ID'
     );
   }

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

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().configureProductAnalytics(
       environmentId: 'YOUR_ENVIRONMENT_ID',
       options: ProductAnalyticsOptions(
         baseUrl: 'https://mh.ba.contentsquare.net',
       ),
     );
   }

4. Add a call to CSQ().start() after the configuration:

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().configureProductAnalytics(
       environmentId: 'YOUR_ENVIRONMENT_ID',
       options: ProductAnalyticsOptions(
         baseUrl: 'https://mh.ba.contentsquare.net',
       ),
     );
     await CSQ().start();
   }

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

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

6. 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 screen names.

7. Recommended In order to enable automatic capture of user interactions, add the option enableInteractionsAutocapture: true to your ProductAnalyticsOptions configuration:

   import 'package:contentsquare/csq.dart';
   
   void main() async {
     await CSQ().configureProductAnalytics(
       environmentId: 'YOUR_ENVIRONMENT_ID',
       options: ProductAnalyticsOptions(
         enableInteractionsAutocapture: true,
       ),
     );
     await CSQ().start();
   }

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.