Media
1 item
Description
Pick CSS selectors, XPath, and element IDs from any page — built for Google Tag Manager workflows. GTM Selector Picker is a lightweight element inspector built specifically for digital marketers and media buyers who set up event tracking in Google Tag Manager. No DevTools knowledge required. WHAT IT DOES When you need to track a button click, form submission, or any user interaction in GTM, you first need the correct CSS selector for that element. This usually means opening Chrome DevTools, navigating the DOM tree, and trying to figure out which selector will actually work in a GTM trigger. GTM Selector Picker replaces that entire process with one click. HOW IT WORKS Click the extension icon and hit "Start picking" Hover over any element on the page — a blue highlight appears with a tooltip showing the element's CSS selector, XPath, and ID Click the element to select it The popup displays every available selector for that element, sorted by reliability Click "Copy" next to the one you want, and paste it into your GTM trigger SELECTOR STABILITY RATING Not all selectors are created equal. A selector based on an element's ID is rock-solid — it won't break when the page gets redesigned. A selector that relies on a chain of nth-child positions is fragile — one layout change and your tracking breaks silently. GTM Selector Picker rates every selector it generates: Stable (green) — based on element ID or data attributes. These survive redesigns. Medium (amber) — based on meaningful CSS class names. Usually reliable, but can change when developers refactor stylesheets. Fragile (red) — based on DOM position or long parent chains. Works today, may break tomorrow. The most stable selector is always shown first, with a "Recommended" badge so you know which one to grab. MULTIPLE SELECTOR FORMATS For each element you click, the extension generates all applicable selectors simultaneously: Element ID (e.g., #addToCart) Data attributes (e.g., button[data-action="add-to-cart"]) Full CSS selector (e.g., div.product-card > button.add-to-cart) Short CSS selector (e.g., .add-to-cart) — only shown if it uniquely matches the element XPath (e.g., /html/body/div/main/button) Each format has its own copy button. No need to pick one and hope — see them all and choose the right one for your GTM setup.