As most projects use some sort of tagging to gather data about users behaviors and Beagle offers a way to get those informations.
It is necessary to configure all platforms that will be used. You can check the configuration for each one of them bellow:
To make the Analytics feature work on your Android project you just need to add a Class that implements the Analytics interface and annotate this Class with the @BeagleComponent annotation:
@BeagleComponent
class SampleAnalytics: Analytics {
override fun trackEventOnClick(event: ClickEvent) {
//TODO: send click event to your tagging library
}
override fun trackEventOnScreenAppeared(event: ScreenEvent) {
//TODO: send screen appeared event to your tagging library
}
override fun trackEventOnScreenDisappeared(event: ScreenEvent) {
//TODO: send screen disappeared event to your tagging library
}
}
To make the Analytics feature work on your iOS project you just need to add a class that implements the Analytics protocol and pass an instance of this class to the Beagle Dependencies:
import BeagleUI
class SampleAnalytics: Analytics {
func trackEventOnScreenAppeared(_ event: AnalyticsScreen) {
//TODO: send screen appeared event to your tagging library
}
func trackEventOnScreenDisappeared(_ event: AnalyticsScreen) {
//TODO: send screen disappeared event to your tagging library
}
func trackEventOnClick(_ event: AnalyticsClick) {
//TODO: send click event to your tagging library
}
}
Transfer the Analytics implementation to the Beagle Dependencies:
let dependencies = BeagleDependencies()
dependencies.analytics = SampleAnalytics()
Beagle.dependencies = dependencies
To make the Analytics feature work on your Web project, you must create a handler to the click and screen event, see the example below:
import { ClickEvent, ScreenEvent } from '@zup-it/beagle-web/types'
const analyticsHandler = {
trackEventOnClick: (event: ClickEvent) => {
//handle click event
},
trackEventOnScreenAppeared: (event: ScreenEvent) => {
//handle screen appeared event
},
trackEventOnScreenDisappeared: (event: ScreenEvent) => {
//handle screen disappeared event
}
}
Now, add the analytics property on the configuration files of the framework’s library you are using:
Angular: open the beagle.module.ts
file and alter just like the example below:
@BeagleModule({
...
analytics: analyticsHandler
})
React: open the library configuration file and follow the example:
export default createBeagleUIService<any>({
...
analytics: analyticsHandler
})
The tagging feature was at first added to only some components and mostly used behaviors. Below we listed and described those behaviors and provided some samples:
For tagging the click event of an Widget, it was added to the Button and Touchable Widgets the property clickAnalyticsEvent with the following attributes:
See below a click event of a tagged Button example:
{
"_beagleType_": "beagle:component:button",
"text": "Test",
"clickAnalyticsEvent": {
"category": "Category",
"label": "Label",
"value": "Value"
}
}
Button(
text = "Test",
clickAnalyticsEvent = ClickEvent(
category = "Category",
label = "Label",
value = "value"
)
)
Button(
text: "Test",
clickAnalyticsEvent: .init(
category: "Category",
label: "Label",
value: "Value"
)
)
if you want to tag a screen appearing and disappearing, it is necessary to add a component with the property screenAnalyticsEvent with the following attributes:
See below the ScreenView event example, with the tagged screen:
{
"_beagleType_": "beagle:component:screencomponent",
"child": {
"_beagleType_": "beagle:component:button",
"text": "Test"
},
"screenAnalyticsEvent": {
"screenName": "ScreenName"
}
}
Screen(
child = Button("test"),
screenAnalyticsEvent = ScreenEvent(
screenName = "ScreenName"
)
)
Screen(
child: Button(text: "Test"),
screenAnalyticsEvent: : .init(
screenName: "ScreenName"
)
)
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.