Why Are My Customers Living Product Page Without Adding Product to Cart?

What to Track on Product Page To Find Reasons for Shopping Cart Abundant?

• Page Scroll Depth – Did they scroll halfway? To the bottom?

• Time on Page – Did they stay long enough to read the product details?

• Click Events – Did they:

  • View product images?

  • Click on size/color selectors?

  • Expand descriptions, reviews, or FAQs?

  • Interact with related products or recommendations?

• Mouse Movement & Hovers – Indicates interest or confusion.

• Exit Intent – Detects when users move their cursor toward the browser bar to leave.

• Form Interactions – For products with custom options or questions (e.g., engraving, size charts).

• Video/Media Plays – If you have product videos.

• ​Click on other links, exit page

​

How to Track the Events?

we can either use Google Analytics $ or Adobe Analytics to track this user behaviour. ​

How to track user engagement on product pages using GA4?

 

Set Up GA4 on Your Site

• Verify GA4 tag is firing correctly through GTM or gtag.js. via real-time reports.

• ​

Track Scroll Depth

• Use built-in scroll event in GA4.

• This triggers automatically at 90% scroll depth. For more granular tracking (e.g., 25%, 50%, 75%), set it up in GTM 

Track Clicks 

• Enable Enhanced Measurement in GA4 for basic click tracking.

• For custom buttons/elements, create Custom Events using GTM:

  • Event Name: product_image_click

  • Parameters: product_id, product_name, etc.

• Send data using gtag('event', 'product_image_click', {...}).

View Event Reports

• Go to Reports > Engagement > Events.

• Create custom explorations for deeper analysis (e.g., funnel paths).

​​

How to track user engagement on product pages using Adobe Analytics

​

Ensure Adobe Analytics Tag is Implemented

• Either directly via AppMeasurement.js or through Adobe Launch.

Define Custom Variables (eVars, Props, Events)

• e.g., eVar10 = Scroll Depth, event15 = Product Image Click

Implement via Adobe Launch

• Set up Rules:

  • Event: Element Click or Scroll

  • Condition: e.g., clicked .product-image

  • Action: Send Adobe Analytics Beacon with proper variables.

Use Processing Rules or Classifications

• Normalize scroll %, click categories, etc.

 

How to track user engagement on product pages using Google Tag Manager?

​

Enable Built-in Variables

• Go to Variables > Configure.

• Enable all relevant variables: Click Classes, ID, URL, etc.

Track Scroll Depth

• Trigger: Scroll Depth Trigger (25%, 50%, 75%, 100%)

• Tag: GA4 Event tag

  • Event Name: scroll_depth

  • Parameters: scroll_percentage

Track Clicks

• Trigger: Click trigger on specific elements (e.g., .product-image, .color-selector)

• Tag: GA4 Event tag

  • Event Name: image_click

  • Parameters: product_name, image_index

Track Element Visibility (e.g., "Add to Cart" button seen but not clicked)

• Trigger: Element Visibility Trigger

  • Selector: #add-to-cart-btn

• Tag: GA4 Event

  • Event Name: add_to_cart_visible

 

How to Track Using Google Tag Manager (GTM) and Google Analytics 4 (GA4)

 

Import a Prebuilt GTM Container for Scroll Tracking

To expedite the setup process, you can use a prebuilt GTM container that includes scroll tracking configurations:

1. Download the Scroll Tracking Recipe: Obtain the container JSON file from Analytics Mania.

2. Import into GTM:

   • Navigate to your GTM workspace.

   • Go to Admin > Import Container.

   • Upload the downloaded JSON file.

   • Choose to merge or overwrite existing tags as appropriate.

3. Update GA4 Measurement ID:

   • Open the imported GA4 event tag.

   • Replace the placeholder Measurement ID with your actual GA4 Measurement ID.

4. Preview and Publish:

   • Use GTM's Preview mode to test the setup.

   • Ensure events are firing correctly.

   • Once verified, publish the container.​Analytics Mania+1Analytics Mania+1

​This setup tracks scroll depths at 25%, 50%, 75%, and 90% thresholds. ​Analytics Mania+3Analytics Mania+3Semrush+3

 

Set Up Click Tracking for Specific Elements

To track user interactions like image clicks or option selections:

1. Enable Built-in Variables:

   • In GTM, go to Variables.

   • Click on Configure and enable variables such as Click Classes, Click ID, and Click Text.

2. Create a Click Trigger:

   • Navigate to Triggers and click New.

   • Choose Click – All Elements as the trigger type.

   • Configure the trigger to fire on specific conditions, e.g., when Click Classes equals product-image.

3. Create a GA4 Event Tag:

   • Go to Tags and click New.

   • Select GA4 Event as the tag type.

   • Enter an event name like product_image_click.

   • Add relevant parameters, such as product_name or image_index.

   • Set the trigger to the one you just created.

4. Test and Publish:

   • Use Preview mode to ensure the tag fires correctly upon the desired interaction.

   • Once confirmed, publish the changes.​

Analyse Events in GA4

After implementing the above:

• Navigate to Reports > Engagement > Events in GA4 to view the collected data.

• Use Explore to create custom reports or funnels, such as tracking users who viewed a product but didn't add it to the cart.​

 

How to track user behaviour Using Adobe Analytics along with Adobe Launch

To track similar engagements in Adobe Analytics:

Set Up Scroll Depth Tracking

1. Create a Data Element:

   • In Adobe Launch, define a data element to capture scroll depth percentage.

2. Create a Rule:

   • Navigate to Rules and click Create New Rule.

   • Name the rule appropriately, e.g., Scroll Depth Tracking.

   • Event:

     • Select the appropriate extension and choose an event type that corresponds to scroll depth (e.g., Scroll Position if available).

   • Conditions:

     • Set conditions to trigger at specific scroll percentages (e.g., 25%, 50%, 75%, 90%).

   • Actions:

     • Set an action to send the scroll depth data to Adobe Analytics, mapping it to a custom event or eVar.

3. Test and Publish:

   • Use Adobe Launch's debugging tools to ensure the rule fires correctly.

   • Once verified, publish the changes.​

​​

Track Click Events

1. Create Data Elements:

   • Define data elements to capture details like product_name, product_id, or clicked_element.

2. Create a Rule:

   • Go to Rules and click Create New Rule.

   • Name the rule, e.g., Product Image Click.

   • Event:

     • Choose Click as the event type.

     • Specify the selector for the element you want to track (e.g., .product-image).

   • Actions:

     • Set an action to send the click data to Adobe Analytics, mapping it to appropriate variables.

3. Test and Publish:

   • Use the preview mode to test the rule.

   • Once confirmed, publish the changes.​

 

How to track using Heat map & Session Recording Tools?

Watch users abandon checkout in real-time using tools like hot jar, Microsoft clarity, Full story. These help visualise user behaviour through heat maps and session replays.

 

How to track using Funnel Analysis?

See where drop-off happens using Funnel analysis

 Create funnels that include:

• Product page view

• Interactions (hover, click, scroll)

• Add to cart (missing step) This shows where users drop off.

 

​I would either use exit intent pop-ups or surveys (e.g., "What stopped you from adding this to cart?") to gather qualitative feedback.

How to Reduce the Drop offs?

• Show trust signals (reviews, badges, return policy)

• Highlight urgency (low stock, limited time offers)

• Optimize product page speed

• Clear CTA buttons

​