Visual Element Picker
The visual element picker lets you select page elements — buttons, forms, links — by pointing and clicking instead of writing CSS selectors manually. Use it when creating click goals or configuring experiment targets.
How It Works
Apex provides three ways to pick an element, and automatically falls back between them:
1. Iframe Preview
Apex loads a preview of your target page inside the dashboard. Hover over elements to see them highlighted, then click to select. The generated CSS selector appears in the goal or experiment configuration.
This works well for static and server-rendered sites (HTML, WordPress, standard Next.js pages).
2. Live Site Picker
If the iframe preview can't render your site — common with React SPAs, Next.js client components, Plasmic sites, or pages behind authentication — Apex opens your actual live site in a new tab.
The Apex tracking snippet activates a picker overlay on the page. Click any element and the CSS selector is sent back to the dashboard automatically via the snippet's messaging channel.
Info
The live site picker requires the Apex tracking snippet to be installed on the target page. If the snippet isn't installed yet, use the bookmarklet instead.
3. Bookmarklet
If the tracking snippet isn't installed on your site yet, you can use the Apex Picker bookmarklet:
- Drag the "Apex Picker" link from the goal configuration screen to your browser's bookmarks bar
- Navigate to your target page
- Click the bookmarklet — a picker overlay activates
- Click the element you want to track
- The selector is captured and you can paste it into the goal configuration
4. Manual Selector
If you already know the CSS selector, enter it directly. This is fastest when elements have clear IDs or data attributes.
Selector Quality
The picker generates selectors automatically, but not all selectors are equally reliable:
| Selector type | Reliability | Example |
|---|---|---|
| ID | Best — unique by definition | #signup-cta |
| Data attribute | Excellent — designed for targeting | [data-goal="signup"] |
| Unique class | Good — stable if classes don't change | .pricing-start-btn |
| Generic class | Fair — may match multiple elements | .btn.primary |
| Tag + nth-child | Fragile — breaks when page structure changes | div > button:nth-child(2) |
Tip
For the most reliable tracking, add id attributes or data-goal attributes to important elements in your HTML. These won't change when you update styling or rearrange the page.
Testing Your Selection
After selecting an element:
- The goal configuration shows a preview of the matched element
- A test button verifies the selector still matches on the live page
- If the selector matches multiple elements, Apex shows a count — you can decide if tracking all of them is intentional (e.g., all "Add to Cart" buttons) or if you need a more specific selector
Common Issues
| Problem | Cause | Fix |
|---|---|---|
| Iframe preview is blank | Site blocks embedding (X-Frame-Options or CSP) | Use the live site picker or bookmarklet instead |
| Live picker doesn't activate | Snippet not installed or blocked | Verify snippet installation, check for ad blockers |
| Selector stops matching | Page structure changed after a deploy | Re-pick the element or use a more stable selector (ID, data attribute) |
| Multiple elements matched | Selector is too broad | Use a more specific selector — add an ID or narrow the CSS path |
Next Steps
- Create a click goal using the visual picker
- Install the tracking snippet to enable the live site picker
- Run an experiment targeting a specific element