How to track product additions to cart source in e-commerce?

Shopify Discussion

Topic summary

The discussion addresses tracking which pages and elements trigger “Add to Cart” actions in Shopify stores—crucial data for understanding conversion drivers that Shopify doesn’t natively provide.

Two solutions are proposed:

1. Google Tag Manager (GTM) + Google Analytics 4 (GA4):

  • Set up GA4 Configuration Tag with Measurement ID
  • Create click trigger targeting Add to Cart buttons (by text or CSS class)
  • Configure GA4 event tag to capture page URL, click ID, and other parameters
  • Provides comprehensive analytics tracking

2. Custom JavaScript Solution:

  • Add event listener code to theme.liquid before closing tag
  • Detects Add to Cart button clicks
  • Captures page URL and product name
  • Logs data (can be modified to send to analytics tools)
  • Lightweight alternative for internal tracking

Recommendation: GTM + GA4 for full analytics capabilities; JavaScript method for simpler internal tracking needs.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

In the past e-commerce platform a central part of analysing the sales had been to understand where the user take action on a purchase. Easily explained, what URL was present when the used added the product to cart. For Shopify it would be interesting to understand what page, and also what element on the startpage that generated a add to cart.

Anyone have solved this in a good way?

2

Hi @Djurberg

I totally get why you want to track where customers are adding products to their cart—it’s key for understanding what pages or elements drive conversions.

Does Shopify Track This Natively?

No, Shopify doesn’t provide a built-in way to track the exact page or button that triggered an “Add to Cart” action. However, you can track it using Google Tag Manager (GTM) & Google Analytics 4 (GA4) or a custom JavaScript solution.

Solution 1: Track Add to Cart Source with Google Tag Manager (GTM) & GA4

If you’re using GA4, you can set up a custom event to track when and where a product was added to the cart.

Steps to Set It Up

1-Go to Google Tag Manager (GTM)

  • Create a GA4 Configuration Tag with your GA4 Measurement ID.
  • Set it to trigger on all pages.

2-Create a New Trigger for “Add to Cart”

  • Choose Click - All Elements.
  • Set conditions:
  • Click Text contains “Add to Cart” OR
  • Click Classes contains “add-to-cart” (depends on your theme’s button class).

3-Create a GA4 Event Tag

  • Choose GA4 Event.
  • Name the event add_to_cart.
  • Add event parameters:
  • Page URL: {{Page Path}} (tracks the page where the click happened).
  • Click ID: {{Click ID}} (identifies the exact button clicked).

4-Publish & Test in GTM

  • Use Preview Mode to test.
  • Check GA4’s Realtime report for event tracking.

Solution 2: Track Add to Cart with Custom JavaScript

If you want a simpler, code-based solution, add this script to theme.liquid before :

What This Script Does- Detects when a user clicks an Add to Cart button.

  • Captures the page URL and product name.
  • Logs the data (you can modify it to send info to GA4 or another analytics tool).

Which Method to Use?- For full analytics tracking → Use GTM + GA4.

  • For a lightweight internal tracking solution → Use the JavaScript method.

Hope this helps! Let me know if you need more details. Thanks!
Daisy.