GTM CSS Selector — by Tag Companion

About

DevTools gives you the full DOM path. One layout change later, your GTM trigger breaks.

This extension generates the shortest, most stable selector instead: class/ID-based, attribute-anchored, built to survive the next deploy. Click any element on
the page to get it.

---
🖱️  HOW IT WORKS

1. Click the extension icon and activate it on your domain
2. Hover over any element on the page, it highlights in real time
3. Click it and the CSS selector appears instantly in the panel
4. Copy it straight into GTM

The overlay stays active as you navigate across every page on the domain.

---
✅ SMARTER SELECTORS THAN DEVTOOLS

DevTools copies the full DOM path anchored to the body. One div added or removed anywhere in the chain and your GTM trigger breaks.

This extension works differently:

- Shortest path first. Outputs the most specific class-based selector that uniquely matches your element, not the full ancestor chain.
- Stable attributes over structure. Checks for data-testid, aria-label, name, data-analytics and similar attributes before falling back to positional. A selector like button[data-testid="add-to-cart"] survives layout changes entirely.
- ID-anchored paths. Automatically roots the selector at the nearest ID ancestor, cutting out every unnecessary node above it.
- Multi-match disambiguation. When a selector hits more than one element, every match lights up orange on the page. Click the exact one you want. You find out before GTM, not after.

---
🔍 WORKFLOW ADVANTAGES

- See before you click. Elements highlight on hover so you always know what you are selecting.
- Tag dropdowns and modals. Minimize the panel, open the interaction, come back and click. DevTools collapses the menu the moment you open it.
- Works across the whole site. Activate once and it follows you to every page on the domain. DevTools makes you repeat the process every time.
- iframe warning. If an element is inside an embedded iframe where GTM selectors do not work, the tool tells you immediately instead of letting you waste time.
- No HTML knowledge required. If you can click it, you can tag it.

---
👤 BUILT FOR

- GTM implementers who want selectors that do not break after the next deploy
- Digital marketers and analysts setting up GA4 events without developer help
- Agencies tagging client sites across dozens of pages

---
🔒 PRIVACY

This extension does not collect, transmit, or store any data about the pages you visit or the elements you select. Everything runs locally in your browser. No account required.

---
🏷️ BY TAG COMPANION

Tag Companion helps marketers implement GA4 ecommerce tracking, AJAX form events, and GTM configurations without writing code or filing dev tickets. This extension is the free selector tool. The full platform automates everything that comes after.

https://www.tagcompanion.com