In today’s eCommerce experience, scroll behavior and engagement are strong indicators of product interest and purchase intent. Google Analytics 4 (GA4) provides automatic engagement metrics, but to unlock page-specific scroll depth tracking and custom engagement events on product pages, you need to enhance your implementation using Google Tag Manager (GTM).

✅ Why Track Scroll & Engagement?

Insight	Action
Users scroll <50%	Optimize page layout/above-the-fold content
High scroll + no add to cart	Add urgency or testimonials
Scroll 100% = high interest	Trigger retargeting or lead gen
Monitor drop-off zones	A/B test product placement and page length

---

🧰 Prerequisites

• Google Tag Manager (Web) container installed
• GA4 property with measurement ID
• Product detail page structure (HTML access or platform like OpenCart)
• jQuery or vanilla JavaScript availability

---

🚀 Step-by-Step Implementation: Scroll + Engagement in GA4

---

🔹 Step 1: Enable GA4 Enhanced Measurement (Optional)

In GA4:

• Go to Admin → Data Streams → Web
• Under Enhanced Measurement, make sure Scrolls is enabled
  ✅ This tracks when a user reaches 90% scroll depth, but lacks mid-point detail.

To get 50%, 25%, and custom thresholds, follow the next steps.

---

🔹 Step 2: Create a Scroll Depth Trigger in GTM

In GTM:

1. Go to Triggers > New
2. Choose Scroll Depth
3. Select:
   • Vertical Scroll Depths: 25, 50, 75, 100
   • Trigger on Pages: Page Path contains /product/ (or your product URL pattern)
4. Name it: Scroll Depth - Product Page

✅ This detects % of page viewed.

---

🔹 Step 3: Create GA4 Scroll Event Tag

In GTM:

1. Go to Tags > New
2. Tag Type: GA4 Event
3. Configuration Tag: Select your GA4 config tag
4. Event Name: scroll_depth
5. Parameters:
   • percent_scrolled: {{Scroll Depth Threshold}}
   • page_path: {{Page Path}}
   • item_id or product_name: if available from dataLayer or meta tag
6. Trigger: Scroll Depth - Product Page

✅ You’ll now capture granular scroll behavior across product pages.

---

🔹 Step 4: Push product_id or item_name into dataLayer

In OpenCart or your eCommerce platform, modify the product page:

In product.twig:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'product_page_view',
  item_id: '{{ product_id }}',
  item_name: '{{ product_name }}'
});
</script>

Then create Data Layer Variables:

Variable Name	Data Layer Key
item_id	item_id
item_name	item_name

✅ Use these in your scroll tag parameters to bind engagement with products.

---

🔹 Step 5: Add Engagement Trigger (Time on Page)

To track user engagement beyond scroll, set up:

Trigger: Timer

1. Type: Timer Trigger
2. Interval: 15000 (15 seconds)
3. Limit: 1
4. Trigger on Product Pages Only:
   • Condition: Page Path contains /product/

GA4 Tag:

• Event Name: product_engagement
• Parameters:
  • item_id: {{item_id}}
  • engaged_time_ms: 15000

✅ You now track time-based engagement independent of scroll.

---

🔹 Step 6: (Optional) Track Key Element Views

To track if users see specific product features like reviews, FAQs, or shipping info, use GTM’s Element Visibility trigger.

Trigger: Element Visibility

1. Selection Method: ID or CSS Selector
2. Example: #product-review, .product-faq
3. Minimum Percent Visible: 50%
4. Set as: Once per page
5. Condition: Product page URL match

GA4 Tag:

• Event Name: section_viewed
• Parameters:
  • section_name: "product_reviews"
  • item_id: {{item_id}}

Repeat for:

• section_name: product_faq, size_guide, related_items

✅ This gives a micro-view into which product features hold attention.

---

🔹 Step 7: QA with GTM Preview & GA4 DebugView

• Go to GTM Preview and load a product page
• Scroll to various thresholds (25%, 50%, etc.)
• Validate event firing in Preview Summary
• Open GA4 → Admin → DebugView to ensure scroll_depth and product_engagement events appear with correct parameters

---

🧠 Advanced Use Cases

Use Case	GA4 Event	Parameters
Segment users who scroll 100% but don’t purchase	scroll_depth = 100%	item_id, page_path
Trigger retargeting for long-scrollers	product_engagement	time > 30s
Analyze which sections improve add-to-cart rate	section_viewed → correlated with add_to_cart
Create audiences	Users who scroll 75%+ but bounce

---

🧪 Reporting in GA4

Use Explore → Free Form:

• Rows: item_id, percent_scrolled
• Metrics: engagement time, scroll_depth, purchase
• Filters: event_name = scroll_depth OR product_engagement

---

📦 Summary Table

Step	Action
1	Enable GA4 scroll (optional)
2	Create 25–100% scroll trigger in GTM
3	Fire GA4 scroll_depth event
4	Push product info to dataLayer
5	Add time-based engagement event
6	Track section visibility (e.g., reviews)
7	QA with GTM Preview and GA4 DebugView
8	Analyze with GA4 Explore or build audiences

---