GA4 CSS Selector Attribution

Prerequisite & additional guides: GA4 Setup → Event Seeding → Custom Dimensions (link each at the top)

Adding classes in Breakdance, what events fire, how to verify in GA4

1. Introduction

1.1 What is selector-based attribution?

Tag page elements with CSS classes; tracking fires automatically

• no tag manager configuration per button or elements
• uses common things a service based local business would likely want to track.
• Automatic, Named GA4 events with category, label, and optional value

1.3 How it fits the lead hierarchy

• Brief intro: Cold → Warm → Hot lead model
• Selector classes on CTAs and forms feed into lead_tier on form events
• One sentence on CTA-to-form attribution (last clicked CTA stored in session)

2. Before You Start — Prerequisites

2.1 Analytics module must be active

• GA4 Measurement ID configured (brighter_ga4_measurement_id)
• Events seeded at least once (link to seeding guide)

2.2 Testing as a logged-in user won’t work

• Admin/editors are excluded from tracking (skipTracking)
• How to test: incognito window, or log out, or use GA4 DebugView with a non-editor account

2.3 Cache plugin note

• Scripts are excluded from LiteSpeed/Autoptimize by design
• If events don’t appear, check cache exclusions before blaming classes

*Add the ga4 js to js excludes

3. How It Works (Conceptual)

3.1 The three-step flow

1. You add a CSS class to a button, link, section, or form wrapper (e.g. ga-cta-main)
2. The script tags the element on page load — writes data-ga-event, data-ga-category, data-ga-label
3. User interacts → click or scroll-into-view → event sent to GA4 with page + strategy dimensions

3.2 Two Main Tracking <odes

3.3 What gets sent with every event

• Standard: page_title, event_category, event_label
• Optional: value, currency (AUD)
• SCOS dimensions (when Content Architecture is active): 
  altc_primary, altc_topic, content_maturity, content_intent, content_purpose, etc.
• Form events add: lead_tier, lead_type, cta_label, cta_location, element_location

3.4 Dynamic content

• Script re-scans when new DOM nodes are added (accordions, tabs, AJAX forms)
• Note for builders: classes added after initial load still get tagged

4. The Class Naming System

4.1 Naming convention

• All classes start with ga-
• Pattern: ga-{category}-{role} (e.g. ga-cta-main, ga-hrcy-faq)
• Apply to the clickable element (button/link) for CTAs; apply to the section wrapper for hierarchy/trust impressions
• Tag the elements you want to track you don’t have to tag every element – button, link or section, just the ones you need to.

4.2 Class families overview

Quick-reference table of all families:

5. CTA Classes — Click Events

5.1 When to use each CTA class

5.2 Breakdance: how to add a CTA class

• Step-by-step: select button → Advanced → CSS Classes → add ga-cta-main
• Rule: class goes on the <a> or <button>, not the section wrapper

Screenshot placeholder: button settings panel

5.3 Event labels — what shows in GA4

• Default labels are preset (e.g. “Main CTA”)
• Best practice: meaningful button text becomes the visible label context via CTA history; document that button copy matters for reporting

5.4 Optional manual overrides

• data-track="meeting" on meeting links (alternative to ga-cta-meeting)
• Custom data attributes the script respects if pre-set: data-ga-event, data-ga-category, data-ga-label, data-value, data-currency

When to override vs use standard classes

Add details here

5.5 Excluding an element

• data-ga-skip="1" — element won’t fire even if class matches

6. Form Classes — Lead Hierarchy

6.1 Form wrapper classes

6.2 Where to put the class

• On the form element or its immediate wrapper — script walks up to find ga-* classes
• Breakdance: Form Builder element → wrapper div → CSS class

6.3 Lead tier override

• ga-form-hot, ga-form-warm, ga-form-cold on wrapper — forces tier regardless of field count

6.4 What fires on form interaction

6.5 CTA-to-form attribution chain

• Explain session storage: last 3 CTA clicks remembered
• On submit, cta_label, cta_location, cta_type attached to lead event

Ideally (in most cases) a user clicks a tagged CTA before submitting a form

• ga-cta-main css attribution on the a button with text “Book a Strategy Call”
• User clicks Book a Strategy Call and Navigates to form
• Fill in form & Submit
• “Book a Strategy Call” becomes the cta_label (not the form button label).
• If form is filled in with no pre CTA link clicked then cta_label is not sent at all (will display as not-set in GA$ reports)
• No cta_label on the conversion = no tagged CTA was clicked in this browser tab before submit. Often a direct-to-form visit, bookmark, or SERP landing on the contact page. Can also mean the journey CTA wasn’t tagged, or the user opened the form in a new tab.
• Not Set may mean you page is converting really well (but just as a reasonable hypothesis). Direct form fills are a positive signal, but GA4 can’t distinguish “high-intent direct visitor” from “broken CTA tagging.” just worth knowing…
• CTA history lives in sessionStorage (bw_cta_history), which persists across page loads in the same tab on the same site. Click on homepage → /contact/ → submit: cta_label should still be "Book a Strategy Call".
• if the user clicks ga-cta-main (“Book a Strategy Call”) then clicks a tagged nav link (ga-nav-service → “SEO Services”) before submitting, cta_label becomes “SEO Services”, not the CTA text. Last tagged link/button wins (only the most recent entry is read)
  
• Ideal path: User clicks a tagged CTA (ga-cta-main on “Book a Strategy Call”) → lands on or scrolls to the form → submits. On generate_lead, cta_label = "Book a Strategy Call", cta_type = main, cta_location = where on the page the CTA lived.
• Direct form path: User reaches the form without clicking any tagged link/button in that tab. cta_label is absent (shows as (not set) in GA4). Often high-intent direct traffic — but also check tagging and new-tab behaviour before drawing conclusions.
• event_label on the conversion identifies the form (e.g. “Quote Form”), not the CTA that drove them there. Use cta_label for “which message converted.”

6.6 Auto-detection fallback

• If no ga-* class: script infers tier from form ID patterns and field count
• Document the inference rules in plain language (7+ fields = hot, 3+ = warm, else cold)
• When explicit classes are better than relying on inference

7. Section Hierarchy Classes — Scroll Depth

7.1 Purpose

• Track which page sections users actually reach — not just page views
• Maps to page structure (ATF → problem → method → trust → FAQ → final CTA)
• Uses the likely page sections that most Local service businesses would have.
• Add your own if you need.

7.2 Hierarchy class reference

Add your own by adding to section in breakdance – Advanced -> attributes

data-ga-event | my custom GA4 Event
data-ga-category | my custom GA4 category
data-ga-label | my custom GA4 label

*Try to use or reuse existing categories, its just better for reporting. Create new if it is genuinely a new category you want to track.

7.3 Breakdance: applying to sections

• Section element → Advanced → CSS Classes → ga-hrcy-method
• One class per section — don’t stack multiple hierarchy classes on one wrapper
• Screenshot: service page wireframe with classes annotated

7.4 Impression threshold

• Fires once when 50% of the element is visible
• Element must have impression tagging (automatic for hierarchy classes)
• Long pages / mobile: note that below-fold sections only fire if user scrolls

8. Trust & Navigation Classes

8.1 Trust signals (mostly impressions)

(Very Optional), These can make reporting feel more complex. but can be useful if you want to know if particular elements were seen on a page.

8.2 Navigation pathway clicks

Recommend only adding these to important navigational events that you really want to track. You don’t have to add ga-nav-service to ever link that navigates to a service.

8.3 Form view classes (impressions)

These mean the form was viewed, GA$ only tracks if a form was started not if it was viewed.

ga-form-* should include the view events in a future release. one class fires both event groups (ga-vquote + ga-form – then drop the ga-v* selectors.

9. Worked Example — Service Page Checklist

9.1 Minimum viable tagging

Checklist format builders can copy per page type:

•  Hero section → ga-hrcy-atf
•  Hero CTA button → ga-cta-main
•  Problem section → ga-hrcy-phs
•  Method section → ga-hrcy-method
  •  Reviews block → ga-trust-reviews
•  FAQ section → ga-hrcy-faq
  •  Quote form wrapper → ga-quote
•  Final CTA → ga-cta-end + section ga-hrcy-end
•  Header phone → ga-cta-phone

9.2 Before/after

• Untagged page: only page_view, generic click, scroll
• Tagged page: full funnel visible in GA4 Explorations

10. Verifying Events in GA4

10.1 Realtime check (immediate)

• GA4 → Reports → Realtime → Event count by Event name
• Click a tagged CTA in incognito → see click_main_cta within ~30 seconds

10.2 DebugView (optional, more detail)

• When to use Chrome GA Debugger extension
• Confirming custom dimensions (altc_topic, lead_tier) are attached

10.3 Standard reports (24–48 hours)

• GA4 → Admin → Events — confirm event names registered
• Mark conversions: generate_lead, form_submit, click_meeting, click_main_cta

10.4 Filtering seed data

• Reminder: seed events have [SEED] in page_title / event_label
• Exploration filter: event_label does not contain [SEED]

10.5 Useful exploration starting points

• Funnel: view_section (hierarchy) → click_main_cta → form_start → generate_lead
• Breakdown by cta_location on generate_lead
• Breakdown by lead_tier on form_submit
• Breakdown by altc_topic (requires SCOS + custom dimensions registered)

11. Common Mistakes & Troubleshooting

12. Reference Appendix

12.1 Complete class → event lookup table

Full table: CSS selector | GA4 event name | Category | Default label | Default value (AUD) | Click or Impression

12.2 Complete parameter glossary

All parameters sent to GA4 and what they mean in reports

12.3 Lead tier decision tree

Visual flowchart: form type → class → tier → recommended GA4 conversion action

12.4 Page-type tagging templates

• Service page
• Blog article (lighter tagging)
• Contact page
• Landing page (campaign)

12.5 Related guides

• GA4 Setup
• Event Seeding
• Custom Dimensions
• Full Analytics Module Guide