{"id":7516,"date":"2025-06-09T16:04:22","date_gmt":"2025-06-09T16:04:22","guid":{"rendered":"https:\/\/hishamghanayem.com\/?p=7516"},"modified":"2025-07-24T12:14:52","modified_gmt":"2025-07-24T12:14:52","slug":"track-woocommerce-product-views","status":"publish","type":"post","link":"https:\/\/hishamghanayem.com\/en\/data-analysis\/track-woocommerce-product-views","title":{"rendered":"In 5 steps, Easily Track WooCommerce Product Views with JS &amp; GTM"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Track WooCommerce Product Views with JavaScript and GTM (GA4 Enhanced Ecommerce)\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/N6BnKL0kmWc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Tracking ecommerce activity accurately is essential for understanding your customers. In this guide, you\u2019ll learn how to set up the <strong><code>view_item<\/code> event<\/strong> for <strong>WooCommerce product pages<\/strong> using <strong>plain JavaScript and Google Tag Manager (GTM)<\/strong> \u2014 without needing PHP or extra plugins.<\/p>\n\n\n\n<p>This tutorial is ideal for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ecommerce analysts<\/li>\n\n\n\n<li>WooCommerce store owners<\/li>\n\n\n\n<li>GTM beginners learning real-world tagging<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s dive in step by step.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Tools You\u2019ll Need to Track Product Pageview<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress with WooCommerce<\/li>\n\n\n\n<li>Google Tag Manager container installed<\/li>\n\n\n\n<li>GA4 property connected to GTM<\/li>\n\n\n\n<li>Chrome browser with DevTools<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"> Step 1: What Is <code>view_item<\/code> and Why Track It?<\/h2>\n\n\n\n<p>The <code>view_item<\/code> event is part of GA4&#8217;s Enhanced Ecommerce schema. It fires when a user views a product detail page. Capturing this event lets you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Track product engagement<\/li>\n\n\n\n<li>Build product funnels<\/li>\n\n\n\n<li>Connect GA4 to remarketing<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Inject JavaScript on Product Pages<\/h2>\n\n\n\n<p>You\u2019ll inject this code using a plugin like <strong>WPCode<\/strong> or directly into your footer using a child theme<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>document.addEventListener(\"DOMContentLoaded\", function () {\n  if (!window.location.pathname.includes(\"\/product\/\")) return;\n\n  window.dataLayer = window.dataLayer || &#91;];\n\n  const itemName = document.querySelector(\"h1.product_title\")?.textContent.trim() || \"Unknown Product\";\n  const priceText = document.querySelector(\".price .amount\")?.textContent || \"0\";\n  const price = parseFloat(priceText.replace(\/&#91;^0-9.]\/g, \"\")) || 0;\n  const category = document.querySelector(\"span.posted_in a&#91;href*='\/product-category\/']\")?.textContent.trim() || \"No Category\";\n  const brand = document.querySelector(\"span.posted_in a&#91;href*='\/brand\/']\")?.textContent.trim() || \"Unknown Brand\";\n\n  window.dataLayer.push({\n    event: \"view_item\",\n    ecommerce: {\n      items: &#91;\n        {\n          item_name: itemName,\n          item_category: category,\n          item_brand: brand,\n          price: price,\n          quantity: 1\n        }\n      ]\n    }\n  });\n\n  console.log(\"\u2705 view_item pushed\", itemName, price, category, brand);\n});<\/code><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">This Script<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Waits for the page to finish loading<\/li>\n\n\n\n<li>Runs only on product pages<\/li>\n\n\n\n<li>Extracts product data from the DOM<\/li>\n\n\n\n<li>Pushes it to the <code>dataLayer<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Verify with GTM Preview<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Google Tag Manager \u2192 Click <strong>Preview<\/strong><\/li>\n\n\n\n<li>Enter your product URL<\/li>\n\n\n\n<li>In the event stream, look for <code>view_item<\/code><\/li>\n\n\n\n<li>Click it \u2192 check the <code>ecommerce.items<\/code> values in the Data Layer tab<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"> Step 4: Send Event to GA4<\/h2>\n\n\n\n<p>In GTM:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Tag<\/strong>: GA4 Event \u2192 Name: <code>view_item<\/code><\/li>\n\n\n\n<li><strong>Parameter<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Name: <code>items<\/code><\/li>\n\n\n\n<li>Value: <code>{{DL - ecommerce.items}}<\/code> <em>(Data Layer Variable you create)<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Trigger<\/strong>: Custom Event \u2192 Event Name = <code>view_item<\/code><\/li>\n<\/ol>\n\n\n\n<p>Create the Data Layer Variable:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name: <code>DL - ecommerce.items<\/code><\/li>\n\n\n\n<li>Type: Data Layer Variable<\/li>\n\n\n\n<li>Variable Name: <code>ecommerce.items<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Confirm in GA4 DebugView<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to GA4 \u2192 Admin \u2192 DebugView<\/li>\n\n\n\n<li>Refresh your product page<\/li>\n\n\n\n<li>Look for <code>view_item<\/code><\/li>\n\n\n\n<li>Expand \u2192 confirm all item details (name, brand, price, etc.)<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"> Troubleshooting Tips<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Problem<\/th><th>Solution<\/th><\/tr><\/thead><tbody><tr><td>Event doesn\u2019t fire<\/td><td>Confirm JS is scoped to product pages only<\/td><\/tr><tr><td>Data missing in GA4<\/td><td>Ensure <code>items<\/code> parameter is set correctly<\/td><\/tr><tr><td>GTM Preview shows duplicate events<\/td><td>Check for multiple scripts firing <code>view_item<\/code><\/td><\/tr><tr><td>dataLayer shows nothing<\/td><td>Use <code>dataLayer.filter(...)<\/code> in Console to check<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"> Conclusion<\/h2>\n\n\n\n<p>By setting up <code>view_item<\/code> tracking with JavaScript and GTM, you\u2019re gaining clean, dynamic ecommerce insights without relying on server-side PHP. This method is flexible, client-side, and easy to debug \u2014 making it ideal for WooCommerce-based stores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus: What\u2019s Next?<\/h2>\n\n\n\n<p>In upcoming tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add to Cart Tracking with JS<\/li>\n\n\n\n<li>Checkout and Purchase events<\/li>\n\n\n\n<li>Building Looker Studio dashboards from GA4 ecommerce data<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udc49 Subscribe to <a href=\"https:\/\/www.youtube.com\/@Hisham_Ghanayem\" target=\"_blank\" rel=\"noopener\">Hisham Ghanyem<\/a> <\/p>\n\n\n\n<p>Register in full ecommerce measurment plan course for FREE <a href=\"https:\/\/courses.hishamghanayem.com\/courses\/ecommerce-measurement-plan\/\">here<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tracking ecommerce activity accurately is essential for understanding your customers. In this guide, you\u2019ll learn how to set up the view_item event for WooCommerce product pages using plain JavaScript and Google Tag Manager (GTM) \u2014 without needing PHP or extra plugins. This tutorial is ideal for: Let\u2019s dive in step by step. Tools You\u2019ll Need [&hellip;]<\/p>","protected":false},"author":1,"featured_media":7519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"categories":[7,37],"tags":[],"class_list":["post-7516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-data-analysis","category-tracking"],"_links":{"self":[{"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/posts\/7516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/comments?post=7516"}],"version-history":[{"count":5,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/posts\/7516\/revisions"}],"predecessor-version":[{"id":7661,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/posts\/7516\/revisions\/7661"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/media\/7519"}],"wp:attachment":[{"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/media?parent=7516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/categories?post=7516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hishamghanayem.com\/en\/wp-json\/wp\/v2\/tags?post=7516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}