Analyzing User Behavior

Product analytics are an important undertaking to gain valuable insights into the way your users interact your app including the Mobile SDK’s editor. To achieve that, we offer a flexible and versatile interface to transfer analytics data from the SDK to your app, allowing you to feed insights gathered in the SDK context into various kinds of analytics solutions and aggregation mechanisms that you might be using. As an example, in this article we explain how to integrate with the popular service Amplitude.

The analytics API provided by our ip.labs Mobile SDK delivers raw data about all important events that occur when a user interacts with our editor. You are of course also free to enrich these events with your own information (e.g. user ID) before passing it on.

The following sections will guide you through the process of integration step by step.

Integrate Amplitude SDK

If you already use the Amplitude SDK, you can probably skip this step. In case you are starting from scratch, all you need to do is add the Amplitude SDK to your project and initialize it with an API key as described in their documentation ↗️.

Activate Analytics Tracking Support

In order to receive analytics events from the editor you need to explicitly enable user tracking (for example while initializing the ip.labs Mobile SDK). Please refer to the respective section of our customization page.

Receive Analytics Events from Editor and Transmit Them

Once you have an ip.labs editor up and running in your app, you can wire the receiveAnalyticsEvent callback to get hold of any trackable event. Those events always have the same structure:

@Serializable
data class AnalyticsEvent(
    // Name of the event.
    val name: String,
    // Date and time (UTC) of the event occurrence.
    val timestamp: Instant,
    // Additional data describing the event. Content may vary for different types of events.
    val properties: Map<String, String>
)

You can use this data to simply push it to Amplitude. You just need to add the receiveAnalyticsEvent method in EditorCallbacks for the editor. Here is a basic breakdown of the steps to be taken:

import com.amplitude.android.Amplitude
import com.amplitude.android.Configuration

// Create an Amplitude instance with an API key (e.g. read from BuildConfig)
val amplitude = Amplitude(
    AmplitudeConfiguration(
        apiKey = BuildConfig.AMPLITUDE_API_KEY,
        context = applicationContext
    )
)

// Set up the corresponding editor callback for analytics tracking
val editorCallbacks = object : EditorCallbacks {
    override fun receiveAnalyticsEvent(event: AnalyticsEvent) {
        amplitude.track(event.name, event.properties)
        amplitude.flush()
    }

    // other editor callbacks…
}

// Start an editor (e.g. via view binding reference to a de.iplabs.mobile_sdk.editor.EditorView) with this setup
binding.editor.initialize(
    productConfiguration = yourProductConfiguration,
    callbacks = editorCallbacks
)

This is also the place where you can enrich events with any data from your app (e.g. user ID) before sending it to Amplitude.

Check New Events in Amplitude’s Backend

Once you have connected the ip.labs Mobile SDK to Amplitude and used the editor in your app, first events should start to occur in Amplitude’s backend. At first, these events are in the Unexpected state because they are not known to Amplitude.

When hovering over the Unexpected button, you have the possibility to properly add and configure the event. Do this with all events and properties you want to process or block the ones you don’t want to collect.

Congratulations! You are now able to use analytics data from the ip.labs editors to better understand your users’ behavior.

Available Events

The following list gives an overview about all available events from the editor:

Event Name	Properties	Description
project_create	projectTrackingId	A new project was created
project_save	projectTrackingId sink	A project was saved
project_load	projectTrackingId source	A previously saved project was loaded
product_select_setting	projectTrackingId productSettingKey productSettingValue	A product setting (e.g. paper type) was changed
transaction_undo	projectTrackingId	The user undid a change
transaction_redo	projectTrackingId	The user restored an undone change
view_select_mode	projectTrackingId viewMode	The user switched the view mode (e.g. normal, 3d)
element_cut	projectTrackingId elementType elementId imageId	An element was cut
element_copy	projectTrackingId elementType elementId imageId	An element was copied
element_paste	projectTrackingId elementType elementId imageId	An element was pasted
element_delete	projectTrackingId elementType elementId imageId	An element was deleted
element_to_front	projectTrackingId elementType elementId imageId	An element was put to the front of the composition
element_to_back	projectTrackingId elementType elementId imageId	An element was put to the back of the composition
element_mirror	projectTrackingId elementType elementId imageId mirrorAxis	An element was mirrored
image_add	projectTrackingId elementType elementId imageId imageSizeBytes imageHeightPx imageWidthPx imageMimeType imageCreationDate imageName	An image was added to the project
image_change	projectTrackingId elementType elementId imageId imageSizeBytes imageHeightPx imageWidthPx imageMimeType imageCreationDate imageName	An existing image was exchanged
image_select_filter	projectTrackingId elementType elementId imageId imageFilter	A filter was applied to an image
image_correct_color	projectTrackingId elementType elementId imageId imageBrightness imageContrast imageSaturation	Colors were corrected for an image
image_set_opacity	projectTrackingId elementType elementId imageId imageOpacity	The opacity of an image was changed
image_select_frame	projectTrackingId elementType elementId imageId imageFrameId	A frame was applied to an image
image_remove_frame	projectTrackingId elementType elementId imageId	The frame was removed from an image
image_rotate	projectTrackingId elementType elementId imageId imageRotation	The rotation of an images was changed
sticker_add	projectTrackingId elementType elementId stickerId	A sticker was added to the composition
text_add	projectTrackingId elementType elementId	A text was added to the composition
text_edit	projectTrackingId elementType elementId textLength textIsMultiline	The content of a text element was changed
text_select_font	projectTrackingId elementType elementId textFont	The font of a text element was changed
text_select_style	projectTrackingId elementType elementId textStyle	The style (e.g. bold / italic) of a text element was changed
text_set_size	projectTrackingId elementType elementId textSize	The size of a text element was changed
text_select_alignment	projectTrackingId elementType elementId textAlignment	The alignment of a text element was changed
text_select_color	projectTrackingId elementType elementId textColor	The color of a text element was changed
layout_save	projectTrackingId layoutId	A custom layout was saved
layout_delete	projectTrackingId layoutId	A custom layout was removed
page_select_layout	projectTrackingId pageId layoutId layoutIsDesigned layoutShuffled	A layout was applied to a page
page_select_background	projectTrackingId pageId backgroundType backgroundColor?	A background was applied to a page
page_remove_background	projectTrackingId pageId	A background was removed from a page
panel_open	projectTrackingId panelType	A panel was opened
panel_close	projectTrackingId panelType	A panel was closed
panel_confirm	projectTrackingId panelType confirm	A panel was confirmed or discarded
list_filter_by_category	projectTrackingId listType listCategoryId	A category was selected in the modal for frames, background, or stickers