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 |