Getting Started

Welcome to the SDK implementation guide!

This guide is designed to help you seamlessly integrate our SDK into your application. By following the outlined steps, you’ll be able to collect and analyze data from your app, within just a few minutes.

With Flutter CLI:

Terminal window
flutter pub add contentsquare

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

pubspec.yaml
dependencies:
contentsquare: ^3.15.3

See Compatibility for more information.

Now in your Dart code, you can use:

import 'package:contentsquare/contentsquare.dart';

Wrap the entire application inside the ContentsquareRoot widget:

main.dart
import 'package:contentsquare/contentsquare.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ContentsquareRoot(
child: MaterialApp(
title: 'My Flutter App',
home: Home()
),
);
}
}

Once you have wrapped your application with the ContentsquareRoot widget, it will autostart itself when your application starts. You will be able to access all Contentsquare API using Contentsquare().

Start your application, and check logs for this output:

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

Contentsquare provides logging capabilities that allow you to inspect the raw event data logged by your app in Android Studio, Xcode, or on the Contentsquare platform.

To view all logs, you must enable in-app features: logging is linked to in-app features being enabled or disabled.

To view SDK logs:

  1. Plug your Android phone into your computer (or use an emulator)
  2. Open Android Studio and start your app
  3. Open the Logcat view and select your phone or emulator
  4. Filter logs by CSLIB

In-app features are essential for your implementation, as it includes key functionalities like snapshot creation and replay configuration.

To enable in-app features within your app, you have to first make sure your app is launched in the background. Then, follow the appropriate method described as follows.

In Contentsquare, select the Mobile icon in the menu top bar and scan the QR code with your phone.

Scan the QR Code (Android)

In Contentsquare, select the Mobile icon in the menu top bar then select your application ID, and “Copy this ADB command”.

Log Visualizer is a feature integrated into the Contentsquare SDK. As you navigate and interact with your app, it provides a live view of events detected by the SDK, visible directly on the Contentsquare platform.

  1. Start your app.
  2. Select the Mobile icon in the menu top bar then select Log Visualizer.
  3. Select the device to inspect.

At this stage, you should see an ‘App start’ or ‘App show’ event being logged.

Log visualizer Android app start

Contentsquare collects usage data from your app users. To start tracking, you need your users’ consent for being tracked.

The SDK will consider every new user to be opted-out by default. To start tracking, the SDK Opt-in API must be called.

Forward user consent with optIn(). Calling this method generates a user ID and initiates tracking.

opt_in_page.dart
import 'package:contentsquare/contentsquare.dart';
import 'package:flutter/material.dart';
class OptInPage extends StatelessWidget {
const OptInPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Optin Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// This need to be only called once per installation, or if user opt-out
Contentsquare().optIn();
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const HomePage(),
),
);
},
child: const Text(
'Press to opt-in to Contentsquare',
),
),
),
);
}
}

Contentsquare aggregates the user behavior and engagement at the screen level. Start your SDK implementation by tracking key screens like the home screen, product list, product details, or conversion funnel.

Screen tracking is achieved by sending a screenview each time a screen is displayed on the user’s device.

home.dart
import 'package:contentsquare/contentsquare.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
void initState() {
super.initState();
Contentsquare().send('Home');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: const Center(
child: Text('Welcome to Contentsquare!'),
),
);
}
}

Implementation recommendations

Section titled Implementation recommendations

For more detailed information on how to track screens, refer to the complete screen tracking guide.

Testing your SDK implementation is essential to make sure data is being accurately captured and reported.

To test your setup, simulate user interactions in your app and check that the events are logged correctly in our analytics platform.

You can also use debugging tools such as Android Studio, Xcode, or Log Visualizer to monitor data transmission and ensure everything is running smoothly.

Visualize events in Contentsquare

Section titled Visualize events in Contentsquare

Use Log Visualizer to view incoming events within the Contentsquare pipeline. This allows you to monitor the stream in real time.

By simulating user activity, you see incoming screenview and gesture events.

Log visualizer Android activity

Visualize data in Contentsquare

Section titled Visualize data in Contentsquare

Open Journey Analysis in Contentsquare and visualize the user journeys main steps across your app, screen by screen.

See how to use Journey Analysis on the Help Center.

Open Session Replay in Contentsquare and replay the full user session across your app.

See how to use Session Replay on the Help Center

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.