Developer's guide to installing the Pendo Flutter SDK

Last Updated:

Note: This article refers to iOS setup.

Pendo captures product usage data, gathers user feedback, and lets you communicate in-app to onboard, educate, and guide users to value. For Flutter apps, Pendo requires implementing events, known as track events, in the code for every event in the app you’d like it to track. For example, tracking a tap on a button requires implementing a track event. Information about Pendo and the general installation process is available in the Installation Planning article. With preparation, the technical installation of the Pendo SDK is straightforward.

Once the SDK is properly installed and events are being sent, anyone can use Pendo. The SDK tracks a visitor’s activity in your app, loads guides, and captures session metadata. Additional development may be done later to optimize and expand the use of Pendo for mobile, such as adding user metadata to sessions. The SDK in your mobile app must also be updated when we release new versions to use the latest Pendo features.

Pendo has integrations with other popular CRM, analytics, and collaboration tools. The scope of integrations ranges from native integrations with a codeless installation wizard to custom development and will not be covered in this article. Check our Integrations articles for help with our popular integrations, or contact a Pendo representative for help with integrations in your subscription after completing the SDK installation.

 

Available Insights

The following analytics will work for Flutter apps using this solution:

  • Track events analytics (under the specific 'Track Events' page: view users and accounts analytics, usage totals and over-time usage)
  • Paths & funnels (via track events)
  • Data Explorer, Trends (via track events)
  • Retention analytics (via track events)
  • Visitors and accounts analytics
  • Time on application (based on your track events)
  • Any dashboard widget that does not relate to page views/button clicks
  • Use track event analytics in any Segment you create, for guides or analytics purposes

Requirements

Install Pendo Flutter Plugin SDK

 In the application folder, run the following command:

flutter pub add pendo_sdk

 

Install instructions 

  1. Select Settings > Subscription Settings > Add Another App and select the Flutter app type.

     

    Select_flutter.png

    Note: In Pendo, two applications are created under the 'Subscription Settings' page (one for Android and one for iOS).

    Flutter.png

  2. Hover over the iOS app and select Continue to installation.

Pendo Setup and Initialization

The SDK initialization has two parts, importing the SDK and initializing the SDK when the visitor is identified. The Pendo SDK is imported during application onCreate. The initialization call can occur in any activity where you want to identify the current visitor and the start a session.

Pendo must be initialized to identify the user, begin data collection, and display guide content. The SDK can be initialized when the visitor is authenticated and metadata is known or with an anonymous visitor. Initialization can occur when the application starts, later when the visitor is identified, or any time you need to identify the current visitor and start a new session.

Identified visitors use a defined schema to create visitor and account objects with associated metadata in Pendo. Refer to the article on Visitor and Account Metadata for additional information on how this data is defined and used in Pendo. Passing null or "" as the visitorId will generate an anonymous visitor ID.

  • visitorId - String containing a unique User ID (e.g. "user-SFGH-56gh"), this ID should match the visitor ID for any other Pendo web or mobile apps
  • accountId - String containing unique Account ID, affiliation of the visitor to a specific company or group (e.g. Acme Inc), this ID should match the visitor ID for any other Pendo web or mobile apps
  • visitorData - Visitor metadata (e.g email, phone, country, etc.) 
  • accountData - Account metadata (e.g tier, level, ARR, etc)

1. In the application AppDelegate file add the following code:

import Pendo

2. Add or modify the function application:openURL:options::

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

        if url.scheme?.range(of: "pendo") != nil {

            PendoManager.shared().initWith(url)

            return true

        }

        return true

    }

Pendo SDK Integration

1. In the application main file (lib/main.dart), add the following code:

import 'package:pendo_sdk/pendo_sdk.dart';

2. Configure Pendo Track Events to capture analytics to notify Pendo of analytics events:

1. Add the following code in the `initState` method:

    ```dart
    var pendoKey = '_insert_app_key';
    await PendoFlutterPlugin.setup(pendoKey);
    ```

2. Initialize Pendo where your visitor is being identified (e.g. login, register, etc.).

    ```dart
    final String visitorId = 'VISITOR-UNIQUE-ID';
    final String accountId = 'ACCOUNT-UNIQUE-ID';
    final Map<String, dynamic> visitorData = {'Age': '25', 'Country': 'USA'};
    final Map<String, dynamic> accountData = {'Tier': '1', 'Size': 'Enterprise'};

    PendoFlutterPlugin.startSession(visitorId, accountId, visitorData, accountData);
    ```

 

Track Events

In the application files where you want to track an event, add the following code:

import 'package:pendo_sdk/pendo_sdk.dart';
PendoFlutterPlugin.trackEventWithProperties('name', { 'firstProperty': 'firstPropertyValue', 'secondProperty': 'secondPropertyValue'});

Step 3: Set up mobile device connection for testing

Follow these steps to enable Mobile device connectivity for testing.

  1. Under Info > URL Types, create a new URL by clicking the + button
  2. Set Identifier to pendo-pairing or any name of your choosing
  3. Set URL Scheme to pendo-[PENDO_SCHEME]
  4. In the application AppDelegate file, add the following code:
    #import "PendoManager.h";
  5. Add or modify the function application:openURL:options::
    - (BOOL)application:(UIApplication *)app
                openURL:(NSURL *)url
                options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
    {
        if ([[url scheme] containsString:@"pendo"]) {
            [[PendoManager sharedManager] initWithUrl:url];
            return YES;
        }
        //  your code here ...
        return YES;
    }

Step 4: Verify Installation

    • Test using Xcode:
      Run the app while attached to Xcode.
      Review the device log and look for the following message:
      Pendo Mobile SDK was successfully integrated and connected to the server.
    • Test using the Pendo UI:
      Confirm that you can see your app under subscription settings as Integrated.

Frequently asked questions

What guides can I use?

Guide Type: Flutter applications can use single-step and multi-step lightbox guides. Tooltips are currently not available for Flutter applications.

As we add more guide capabilities (for example, polls & NPS planned for later this year), they will be available for Flutter applications as well (except for tooltips). 

Guide Activation: You can show guides in your Flutter app as follows:

    • On Application launch. Select App Launch as the activation method for your guides.
    • With Track Event activation to show the guide wherever you want in your user's flow.

ActivationSettings_Track_event.png

What should I report as events?

You can use Track Events to report any event happening in your app; a change in user status, an exception condition, such as 'Server not available', any important business transaction or any action performed by your user, and any button click or page view that you want to collect analytics on.

How do I track my Page views and button clicks? 

Automatic tracking of Pages and features is currently not supported for Flutter apps, due to their unique structure. Capturing Pages in your Flutter application and tagging features will not work.

To get analytics on Page view and button clicks, you will need to send a track event for each.