Getting Started with Experience Analytics

This quick start guide shows you how to get Contentsquare Experience Analytics set up 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.

After completing the setup process, you'll be able to take full advantage of the CSQ API to collect data from your app, within just a few minutes.

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 SDK:

   import 'package:contentsquare/csq.dart';

2. Add a call to star SDK as soon as possible in your app, ideally in the main() function.

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

3. 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
   └───────────────────────────────────────────────────────────────────────────────

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

Once SDK has started, you're able to take full advantage of the CSQ SDK API to track screen views, monitor user interactions, and capture app behavior data.

CSQ Experience Analytics also comes with powerful Session Replay and Error Monitoring capabilities as paid options.

Screen tracking is achieved by sending a screenview event:

• Right after the SDK has started
• When the screen appears
• When a modal/pop-up is closed and the user is back on the screen
• When the app is put in the foreground (after an app hide)

import 'package:contentsquare/csq.dart';

CSQ().trackScreenview(screenName: 'ScreenName');

For more information see Track screens.

While screen tracking gives an overview of user navigation, capturing session, screen, or user metadata provides a deeper understanding of the context behind user behavior.

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

Proceed with these how-to's to refine your implementation.