CSS Selectors, Google Tag Manager, and GA4 (2024)

Here's how you can use CSS Selectors in Google Tag Manager to create a custom GA4 event to track clicks in your primary site navigation.
CSS (Cascading Style Sheets) add styling to web pages. And you can use them to target an individual element, or a group of related elements, in Google Tag Manager. You can use CSS with the Click Element trigger to create powerful custom events in Google Analytics 4.
Link to CSS Tutorial for more:
www.w3schools....
Have questions or feedback? Feel free to leave a comment!
Ps. God is real and Jesus (no kidding) loves you. Check the data!
More resources and links below.
==================================
Subscribe: www.youtube.co...
Subscribe to free monthly newsletter: www.rootandbra...
🔗 Links to 📹 VIDEO TUTORIALS:
========DIGITAL FUNDAMENTALS==========
📺 How to Set Up GA4 in with GTM (2024 update): • Install Google Analyti...
📺 GA4 Full Beginner's Tutorial: • Google Analytics 4 Ful...
📺 GA4 Events Guide (2024): • Google Analytics 4 Eve...
📺 Google Tag Manager Beginner's Tutorial with Install Guide: • Google Tag Manager Beg...
📺 6 Simple Tips for Custom Reports: • 6 Simple Tips For Buil...
📺 Looker Studio Events Dashboard Tutorial: • Looker Studio Dashboar...
📺 How to Install Microsoft Clarity with GTM: • Microsoft Clarity for ...
========CUSTOM EVENTS==========
📺 How to set up BUTTON CLICK tracking with GA4 and Google Tag Manager: • Button Click Tracking ... 🔘
📺 How to TRACK POP UPS: • How to Track Popups wi... 🆙
📺 Use Element Visibility to Track EMAIL SIGNUPS: • Google Tag Manager Ele...
📺 Track EMAIL LINK CLICKS: • Track Email Link Click...
📺 How to set up PAGE TIMER tracking with GA4 and Google Tag Manager: • Set Up Page Timer Trac... ⏲
📺 How to Set Up LINK CLICK Tracking with GA4 and Google Tag Manager: • How to Set Up GA4 Link... 🖯
📺 How to Set Up SCROLL DEPTH Tracking (25%, 50%, 75%, 90%) with GA4 and Google Tag Manager: • Scroll Depth Tracking ... 🖯
📺 How to use TRIGGER GROUPS: • Google Tag Manager Tri...
📺 How to Build a Link Click Tracking Report Using GA4 data and Looker Studio: • Google Data Studio GA4... 📊📊📊
📺 Custom Events without GTM: • Create GA4 Custom Even...
========ARTICLES==========
🔗 Links to 📖📖📖 BLOGS: Some of the best articles on the Root and Branch site
✭ GA4 Reports Explained: Standard Reports, Explorations, Custom Reports: www.rootandbra...
✭ Google Analytics 4 vs. Universal Analytics: www.rootandbra...
✭ A Practical Guide to Event Parameters: www.rootandbra...
✭ Link GA4 and Google Search Console: www.rootandbra...
✭ Session Source Medium in GA4: www.rootandbra...
✭ Microsoft Clarity Full Tutorial: www.rootandbra...
✭And Some SEO! How to Edit robots.txt on Wordpress!
www.rootandbra...
Follow Root & Branch on LinkedIn: / root-branch
Or
Connect: / zackduncan
About Root & Branch: www.rootandbra...
Data driven weirdo: / data-driven-weirdo
Thanks for coming by!
- - - - - - - - - - - - - - - - - - - - - -
Google Analytics can be hard, but there is someone whose yoke is easy and whose burden is light.
Rest easy. Mathew 11: 28 - 30
Meeting the Real Jesus - Tim Keller: • Meeting the Real Jesus...

[@ishita.vbhandari]

Thank you so much for the insightful video, Zack 😁

[@rooted-digital]

Thanks for watching and for the kind words. :)

[@ishita.vbhandari]

@@rooted-digital it’s a pleasure
I’m binge watching your playlist haha, it’s my kind of Netflix. 😅

[@rooted-digital]

Ha! That's a great compliment from you. Thank you. (Although I hope you're able to get some more interesting entertainment as well !🤪)

[@ishita.vbhandari]

@@rooted-digital hahahhahah 🤭😂

[@ishita.vbhandari]

I tried to use this method for a website that has default category selection on homepage which doesn’t go to another page but changes the data whenever a category is clicked.
It’s working fine but sometimes the click text says undefined in variables and at times the click element doesn’t show anything and click text shows up. I’m a beginner so I don’t know actually what’s happening.
Please advise, Zack

[@rooted-digital]

Hi there! I must say that I don't know quite what's happening here either. I would say that CSS Selectors can sometimes be sensitive and don't always work as it seems like they "should" (or at least as I want them to). So in this case, it's possible that the way the site was coded / built means that you won't consistently get the data you want. All I can say is that this is one of the reasons that testing in GTM preview and debug mode is so important...and also sometimes so frustrating.
I hope this ends up working out for you but it's possible that you might need to save this approach for a different site in the future for best results.

[@ishita.vbhandari]

@@rooted-digital I was able to create a custom javascript which now shows category text in debug mode but again it doesn’t show up in GA4 reports

[@ishita.vbhandari]

@@rooted-digital really appreciate your detailed response, Zack 🤩

[@rooted-digital]

Wow...that sounds impressive! And also frustrating that it shows in debug mode but not in your GA4 reports. Could the fact that you're seeing the data - but not in your reports - be related to an event parameter that you need to register as a custom dimension? Don't know if that's it, but might be worth checking out: www.rootandbranchgroup.com/ga4-event-parameters/

[@ishita.vbhandari]

@@rooted-digitalyes I did register a custom definition as well. If I share a loom on DM (LI) would you be able to look through it?