Tracking If Users Are Viewing a Particular Section, Image, or Banner (Element Visibility) with GA4 via GTM

Objective

To detect when a user scrolls to and views a specific element on the page (e.g., a banner, hero image, contact form), and send that event to Google Analytics 4 using Google Tag Manager.

Step 1: Identify the Element You Want to Track

You’ll need a unique identifier (ID or class) for the element.

Right-click on the section/image/banner → Inspect Element → Look for:

• id=”hero-banner”
• or class=”cta-section”

Prefer using an ID if available (more reliable).

Step 2: Enable Built-In Variables in GTM (Optional but Helpful)

1. In GTM, go to Variables
2. Click Configure (top right)
3. Enable:

• Page Path
• Page URL
• (optional) Percent Visible, Visible ID, Visible Classes

Step 3: Create an Element Visibility Trigger

1. Go to Triggers → Click New
2. Name it: Visibility – Hero Banner Viewed
3. Choose Trigger Type → Element Visibility
4. Select:

• Selection Method: ID (or “CSS Selector” if using a class)
• Element ID: hero-banner (or whatever your element uses)

5. Visibility Settings:

• ✅ “Observe DOM changes” (for dynamic pages)
• ✅ “Once per page”
• Minimum Percent Visible: 50 (or adjust as needed)
• When to fire: ✅ “Every time an element appears on screen”

6. Click Save

Step 4: Create the GA4 Event Tag

1. Go to Tags → Click New
2. Name it: GA4 – hero_banner_viewed
3. Choose Tag Type → Google Analytics: GA4 Event
4. Under Configuration Tag, select your existing GA4 config
5. Set Event Name to: hero_banner_viewed
6. Add Event Parameters (optional but useful):

Parameter Name	Value
section_id	hero-banner
page_path	{{Page Path}}

     7. Scroll to Triggering → Select: Visibility – Hero Banner Viewed

     8. Click Save

Step 5: Preview and Test

1. Click Preview in GTM
2. Enter your website URL → Connect
3. Scroll down until the element (e.g., hero banner) becomes visible
4. In the Tag Assistant window:

• Confirm that the visibility trigger fires
• Check that your GA4 event tag fires
• Verify values like section_id and page_path

Step 6: Publish the Tag

1. Click Submit → Publish in GTM
2. Name your version: GA4 Element Visibility – Hero Banner

Result

You’re now tracking when a user sees a specific element on your site (like a banner, image, or CTA section) — valuable for:

• Measuring real visibility, not just pageviews
• Knowing if users scroll to and see key conversion elements
• Triggering retargeting or performance-based actions

Note

• You can track multiple sections using different triggers and event names
• Use Lookup Table Variables if you want to send human-readable section names
• If the element is loaded dynamically (e.g. by React or Gatsby), ensure “Observe DOM changes” is enabled in the trigger