How to use google tag manager with flutter web application?

277 views Asked by At

I want to track user engagement in my website made in flutter. I am using google analytics 4 for report generation and google tag manager for managing tags. I have followed the instructions in tag manager for web pages. I have created a container, pasted the generated script as the top of the in index.html file, as well as created the google tag(mentioned in second step). If possible I want to avoid manking any further changes in my code for ga4, and perform all actions, necessary for logging any custom events, from gtm only.

I am facing problems in creating custom tags and triggers to log event in my ga4 property. This is because I am not able to capture any values in custom variables which would be necessary in creating those tags and triggers. For example in below page:- sample web page

I want to log an event named "Outbound link Clicks" with "link-url" as parameter whenever user click the youtube (link url: www.youtube.com) or medium(link url:- www.medium.com) button. How the trigger should be built here? I thought the ideal trigger should be when buttons with a certain label, let say "outbound-button" is pressed. Is there any way to label these buttons as such in flutter and later obtain these labels as variables in gtm? (Current gtm built in variables like click ID, click Element, click Class etc won't work) Another approach will be to fire the trigger when a button named "youtube" or "medium" etc are pressed. But inspecting the web page shows only the following element hierarchy flt-glass-pane > shadow-root. inspect element result Thus I am not able to create any javascript function in gtm variable that will be able to capture the name of buttons.

Now coming to tags, if I have to populate the parameters, I have to identify the links, which would be part of onpressed callback :-

ElevatedButton(
                key: const ValueKey("Medium"),
                onPressed: () => launchUrl(Uri.parse('https://www.medium.com')),
                child: const Text("Medium")),

. how can I capture the link in a gtm variable?

All of the above issues revolve around me not able to provide any values to gtm variable from flutter application. So any general lead in this regard will be helpful too.

0

There are 0 answers