Beagle v1.7 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
Como a maioria dos projetos usam alguma forma de marcação/tags para agrupar dados sobre o comportamento do usuário, o Beagle oferece uma ajuda para você conseguir essas informações.
É necessário configurar a sua plataforma para que o analytics funcione, segue abaixo os passos para a configuração:
Para que o Analytics funcione no seu projeto Android, você precisa adicionar uma classe que implemente a interface do Analytics. Anote essa classe com o @BeagleComponent.
@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
}
}
Para que o Analytics funcione no seu projeto iOS, você precisa adicionar a classe que implemente o protocolo Analytics e passar a instanciá-la nas dependências do Beagle:
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
}
}
passando a implementação de Analytics para o Beagle Dependencies:
let dependencies = BeagleDependencies()
dependencies.analytics = SampleAnalytics()
Beagle.dependencies = dependencies
Para que o Analytics funcione no seu projeto Web, você precisa criar um handler para os eventos de clique e screen:
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
}
}
Agora basta adicionar a propriedade analytics nos arquivos de configuração da biblioteca dependendo do framework utilizado:
Para Angular, abra o arquivo beagle.module.ts
e altere como no exemplo:
@BeagleModule({
...
analytics: analyticsHandler
})
Para React, abra o arquivo de configuração da biblioteca e siga o exemplo:
export default createBeagleUIService<any>({
...
analytics: analyticsHandler
})
A feature de marcação foi adicionada em apenas alguns componentes dos comportamentos mais usados. Segue abaixo a descrição e os exemplos:
Para marcação do click event de um widget, foi adicionado o botão e o Touchable Widgets da propriedade clickAnalyticsEvent com os seguintes atributos:
Segue abaixo um exemplo de click event da marcação de um botão:
{
"_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"
)
)
Quando for marcar uma tela que aparece e desaparece, é preciso adicionar um componente com a propriedade screenAnalyticsEvent com o seguinte atributo:
Segue abaixo um exemplo de evento de ScreenView com a tela marcada:
{
"_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.