Deep dive into the technical details: SDK architecture, GTM container file generation, and why it just works.
Tag Companion has three main tools, each with a slightly different workflow optimized for its specific tracking needs:
Tracks scroll depth and time on page. No SDK needed: just configure thresholds and download your container file.
Tracks clicks, visibility, and AJAX responses. The SDK automatically passes the selector back to the dashboard.
Tracks GA4 eCommerce events. Multiple selectors per event (item_name, price, etc.), so you copy/paste each one.
What makes our point-and-click selector tool special
First tries unique attributes (data-id, aria-label, id) before falling back to complex CSS selectors. Adapts to minor page changes automatically.
Color-coded highlights show exactly what you're selecting: hover (blue), selection (red), multiple matches (orange), confirmed (green).
When your selector matches multiple elements, we alert you and let you click "Next" to cycle through them until you find the exact one you want.
No more counting elements manually. The SDK calculates nth-child positions automatically for precise targeting.
Uses 24-hour tokens with hourly re-validation. The SDK only activates when YOU launch it from your dashboard. Never appears to regular visitors.
Pure JavaScript. No jQuery required. Works with any standard website. Minimal page load impact.
What the code does in each scenario, and where the advantage is real vs. equal.
| Scenario | Tag Companion SDK | DevTools |
|---|---|---|
| Unique element with its own meaningful class | Outputs the shortest class-based path that matches only that element (e.g. p.hero-subtitle). Won't break unless that specific class is renamed. Changes anywhere else on the page don't matter. |
Outputs the full path anchored to the nearest ID or body. Breaks if any ancestor div is added, removed, or reordered — even if the element itself didn't change. |
Unique element with a stable attribute (data-testid, aria-label, name, etc.) |
Checks for stable attributes on the element and its ancestors first. If found, outputs e.g. button[data-testid="add-to-cart"] — survives any structural or class change as long as the attribute stays. |
Never checks for stable attributes. Goes straight to a structural path. |
| Unique element anchored to an ID ancestor | Automatically roots the path at the nearest ID — e.g. #hero > p.subtitle. Shorter path, fewer breakable ancestors. |
Also anchors to the nearest ID, but includes all ancestors above it too — more nodes, more points of failure. |
| Unique element — no useful class, no stable attribute | Falls back to a structural path, same as DevTools. Both are equally fragile here. | Same structural path. No advantage either way. |
| Multiple identical elements — parent has a unique class | Uses :nth-child anchored at the nearest ID or unique class — e.g. #features > div.card:nth-child(2). Won't break if code outside that anchor changes. |
Uses :nth-child anchored to nearest ID or body. Breaks if anything in the full ancestor chain changes. |
| Multiple identical elements — one has a stable attribute | On refinement, checks for stable attributes first — outputs e.g. button[aria-label="Buy now"] instead of :nth-child. Survives reordering as long as the attribute stays. |
Always positional. Reorder the elements and it fires on the wrong one. |
| Multiple identical elements — no useful class or attribute | Same positional output as DevTools. Both break on reorder or insertion. | Same. No advantage either way. |
Bootstrap or utility-class heavy page (col-md-6, mb-0, d-flex) |
Picks up utility classes, but a developer restyling the component breaks the selector. Both tools are equally weak here. | Same weakness, different path. |
The Website Helper doesn't require any website code changes. It installs entirely through Google Tag Manager:
No CSS selectors. No JavaScript. No developer needed.
Free plan available • No credit card required
Traditional GTM setup fails when forms submit without page reloads. You need custom JavaScript to intercept the request. Most marketers don't know how.
Tag Companion automatically generates a universal AJAX listener that intercepts:
response.success), and we create a trigger that fires when that value matches your condition.
What we generate for you automatically
Pre-configured with your event name, GA4 Measurement ID (or variable), and any event parameters you specified.
Click triggers with CSS selectors, visibility triggers with intersection observers, scroll depth triggers, timer triggers, AJAX custom events, all properly configured.
Data layer variables for AJAX responses, custom JavaScript variables for complex extractions, constant variables for configuration values.
Automatically enables required GTM built-in variables (Click Element, Page Path, Scroll Depth Threshold, etc.) so everything works out of the box.
Complete Custom HTML tag with universal AJAX interceptor code that pushes structured data to the data layer.
We generate tags, triggers, and variables automatically. Import to GTM and you're done.
Works first try • 30-day money-back guarantee
The most advanced feature: complete GA4 eCommerce tracking without writing code
We've built the entire GA4 eCommerce schema into the tool:
Beginner Mode:
Advanced Mode:
The difference: Other tools either overwhelm you with options or limit what you can do. We give you both.
Set up multiple eCommerce events in one session:
eCommerce tracking is complex; each event requires multiple parameters with different CSS selectors. Don't lose your work to session timeouts or browser crashes:
All 13 GA4 eCommerce events. Beginner and Advanced modes. Save your progress.
Pro plan includes complete eCommerce tracking • 30-day guarantee
What Tag Companion works with (and what it doesn't)
Start tracking in minutes. No credit card required for free plan.