I built a documentation site using Angular and installed the ngx-google-analytics package. I got everything working however I'm not sure about what I need to do to get the analytics data back in the manner I want. I have a lot of interactive demonstrations on the site and I want to track and an example of how I do this using the event() method goes as follows
sendData(value: string):void{
this.analyticsService.event(
'event',
'demonstration_click',
'Demonstration 01 Title',
undefined,
undefined,
{'setting': value}
);
}
The event() method has a value property however it's of type number so I have to use the options property to pass in the value as an object. This works however when I go into my analytics dashboard I have to go to reports -> Realtime then go to the event count by event name widget and click event -> event_category to see the number of times the demonstration_click event has occurred. But if I want to see the options object I passed in with the setting property I have to click event and the setting property is at the end of the list. The Demonstration 01 Title title is in the event_lable object. It seems like that whole widget is showing the entire object sent from the event() method except with all the instances of those events in one object.
With it showing up this way I don't see how I'll be able to associate the setting values from each instance furthermore which users they're coming from. What do I need to do so I can see a chart of the user and all the activities they perform? Aside from this the page views are in a different section, other button clicks I've set up are in different areas. I've been studying into this however I keep coming across info for either Google Analytics or Gtag.js but never anything that covers both so I'm having trouble making sense of this all together as one thing. The way I want to structure everything goes as follows.
interactions:{
//list of users
}
user:{
user_id: 'id given to user by GA4',
location: 'where user is located',
link_clicks: {/*list of links user clicked*/},
demonstrations: {/*list of demonstrations user interacted with*/}
}
link_click: {
path: 'url of the link',
time: 'time stamp of click'
}
demonstration: {
title: 'name of demonstration',
values: {/*list of values and time stamps*/}
}
How do I achieve this type of structure and make sure I'm passing values into the event() method to make sure it's collected in this manner?