How to Track WooCommerce Product Views Using JavaScript and Google Tag Manager (view_item Event for GA4)

Tracking ecommerce activity accurately is essential for understanding your customers. In this guide, you’ll learn how to set up the view_item event for WooCommerce product pages using plain JavaScript and Google Tag Manager (GTM) — without needing PHP or extra plugins.

This tutorial is ideal for:

• Ecommerce analysts
• WooCommerce store owners
• GTM beginners learning real-world tagging

Let’s dive in step by step.

---

Tools You’ll Need

• WordPress with WooCommerce
• Google Tag Manager container installed
• GA4 property connected to GTM
• Chrome browser with DevTools

---

Step 1: What Is view_item and Why Track It?

The view_item event is part of GA4’s Enhanced Ecommerce schema. It fires when a user views a product detail page. Capturing this event lets you:

• Track product engagement
• Build product funnels
• Connect GA4 to remarketing

---

Step 2: Inject JavaScript on Product Pages

You’ll inject this code using a plugin like WPCode or directly into your footer using a child theme

document.addEventListener("DOMContentLoaded", function () {
  if (!window.location.pathname.includes("/product/")) return;

  window.dataLayer = window.dataLayer || [];

  const itemName = document.querySelector("h1.product_title")?.textContent.trim() || "Unknown Product";
  const priceText = document.querySelector(".price .amount")?.textContent || "0";
  const price = parseFloat(priceText.replace(/[^0-9.]/g, "")) || 0;
  const category = document.querySelector("span.posted_in a[href*='/product-category/']")?.textContent.trim() || "No Category";
  const brand = document.querySelector("span.posted_in a[href*='/brand/']")?.textContent.trim() || "Unknown Brand";

  window.dataLayer.push({
    event: "view_item",
    ecommerce: {
      items: [
        {
          item_name: itemName,
          item_category: category,
          item_brand: brand,
          price: price,
          quantity: 1
        }
      ]
    }
  });

  console.log("✅ view_item pushed", itemName, price, category, brand);
});

This Script

• Waits for the page to finish loading
• Runs only on product pages
• Extracts product data from the DOM
• Pushes it to the dataLayer

---

Step 3: Verify with GTM Preview

1. Open Google Tag Manager → Click Preview
2. Enter your product URL
3. In the event stream, look for view_item
4. Click it → check the ecommerce.items values in the Data Layer tab

---

Step 4: Send Event to GA4

In GTM:

1. Tag: GA4 Event → Name: view_item
2. Parameter:
   • Name: items
   • Value: {{DL - ecommerce.items}} (Data Layer Variable you create)
3. Trigger: Custom Event → Event Name = view_item

Create the Data Layer Variable:

• Name: DL - ecommerce.items
• Type: Data Layer Variable
• Variable Name: ecommerce.items

---

Step 5: Confirm in GA4 DebugView

1. Go to GA4 → Admin → DebugView
2. Refresh your product page
3. Look for view_item
4. Expand → confirm all item details (name, brand, price, etc.)

---

Troubleshooting Tips

Problem	Solution
Event doesn’t fire	Confirm JS is scoped to product pages only
Data missing in GA4	Ensure items parameter is set correctly
GTM Preview shows duplicate events	Check for multiple scripts firing view_item
dataLayer shows nothing	Use dataLayer.filter(...) in Console to check

---

Conclusion

By setting up view_item tracking with JavaScript and GTM, you’re gaining clean, dynamic ecommerce insights without relying on server-side PHP. This method is flexible, client-side, and easy to debug — making it ideal for WooCommerce-based stores.

---

Bonus: What’s Next?

In upcoming tutorials:

• Add to Cart Tracking with JS
• Checkout and Purchase events
• Building Looker Studio dashboards from GA4 ecommerce data

👉 Subscribe to Hisham Ghanyem