--- title: "WooCommerce Google Tag Manager integration" date: 2022-11-22 author: "GTM Kit" --- # WooCommerce Google Tag Manager integration WooCommerce is by far the most popular ecommerce plugin for WordPress and integrating it with Google Tag Manager and Google Analytics is easy. Click the activation switch then click save and you are well on your way. ![GTM WooCommerce integration](https://gtmkit.com/wp-content/uploads/2022/11/woocommerce-integration.png)## What the free plugin tracks When the WooCommerce integration is enabled, GTM Kit pushes these standard GA4 e-commerce events to the data layer: - `view_item_list` — visitor sees a list of products (shop, category, related products). - `select_item` — visitor clicks a product in a list. - `view_item` — visitor opens a product detail page. - `add_to_cart` — visitor adds a product. - `view_cart` — visitor opens the cart page. - `remove_from_cart` — visitor removes a product. - `begin_checkout` — visitor starts checkout. - `add_shipping_info` — visitor selects a shipping method (toggleable). - `add_payment_info` — visitor selects a payment method (toggleable). - `purchase` — order is placed and the thank-you page renders. The Woo Add-On adds `add_to_wishlist`, `refund`, and `order_paid`, plus reliability features and per-strategy purchase tracking. See [What you get with the Woo Add-On](https://gtmkit.com/documentation/what-you-get-with-the-woo-add-on/). ## Steps ### 1. Confirm WooCommerce is active Go to **Plugins** and check that WooCommerce is installed and active. The WooCommerce integration toggle in GTM Kit only appears when WooCommerce is active. ### 2. Open Integrations Go to **GTM Kit, Integrations**. The WooCommerce section is at the top. ### 3. Enable the integration Toggle **WooCommerce integration** on. ### 4. Pick optional event behavior - **Track shipping info** — fires `add_shipping_info` when the shipping method is selected. Default on. Turn off if your theme calls the shipping select handler in a non-standard way and produces noisy or duplicate events. - **Track payment info** — fires `add_payment_info` when a payment method is selected. Default on. - **Variable product tracking** — when enabled, the data layer is updated to reflect the selected variation as the visitor changes options. - **View-item-list limit** — for very long category pages, you can cap the number of items reported in `view_item_list`. Default 0 means no limit. Set to 25 to mirror Google’s recommended limit and avoid silently dropped events. The Woo Add-On includes a more sophisticated split-large-lists middleware that splits large lists into multiple events instead of truncating; the free plugin has the simple limit only. ### 5. Save The events fire from the next page view onward. ## Verify it worked In a normal browser tab, open a category page. In DevTools console: ``` window.dataLayer.filter(e => e.event === 'view_item_list') ``` You should see one entry per `view_item_list` push, with an `ecommerce.items` array. Click a product. After landing on the product page: ``` window.dataLayer.filter(e => e.event === 'view_item') ``` Add to cart, then check `add_to_cart`. Complete a test checkout and on the thank-you page check: ``` window.dataLayer.filter(e => e.event === 'purchase') ``` The `purchase` event includes `transaction_id`, `value`, `currency`, `tax`, `shipping`, and an `items` array. The most reliable end-to-end check is GTM’s Tag Assistant, see [Verify GTM is firing on your site](https://gtmkit.com/documentation/verify-gtm-is-firing-on-your-site/). ## WooCommerce Blocks support GTM Kit supports the modern WooCommerce Blocks Cart and Checkout. If your store uses block-based pages, events fire from the block component lifecycle instead of the classic shortcode templates. No extra configuration is needed. If you mix classic templates (shop archive) with block-based cart and checkout, both work side by side. ## WooCommerce integration options ### Product brand If you wish to include the product brand in the data layer you must select the product attribute which conatins the brand value. ![Brand option](https://gtmkit.com/wp-content/uploads/2023/01/brand-option.png)By default this attribute does not exist in WooCommerce so you must first create a new brand attribute and once you have done that you can select it in the brand option. ### Google Ads Remarketing I you wish to use Google Ads Remarketing you must select your business type from one on Google’s predefined business verticals: ![Google Ads Remarketing](https://gtmkit.com/wp-content/uploads/2023/01/google-ads-remarketing-opstions.png)If your product feed generator is adding a prefix to the product IDs, you can add the prefix to be included it in the Data Layer. ### Tax and shipping WooCommerce stores have several tax settings that interact with each other: whether prices are entered with or without tax, whether the cart shows prices with or without tax, and the underlying tax rate. The data layer GTM Kit emits to Google Tag Manager can mirror any of these, but mixing conventions makes GA4 revenue reports stop reconciling against WooCommerce orders. The “Exclude tax” toggle controls how GTM Kit reports tax in the e-commerce data layer: - **Off (default):** every event reports values **including** tax. `ecommerce.value`, per-item `price`, and the per-item `discount` field are all inc-tax. The `purchase` event’s `tax` field separately reports the tax amount. - **On:** every event reports values **excluding** tax. Same fields, all ex-tax. The `tax` field still reports the tax amount separately. The toggle is the single switch governing tax handling across the full WooCommerce data layer. It applies to `view_cart`, `begin_checkout`, `purchase`, variation prices on variable product pages, and the per-item coupon `discount` field. With the GTM Kit Woo Add-On or GTM Kit Premium installed, it also applies to `refund` and `order_paid` events. The toggle is independent of WooCommerce’s “Prices entered with tax” and “Display prices in cart and checkout” settings. You can run any combination of those WooCommerce settings; the data layer’s tax convention is determined by the GTM Kit toggle alone. The “Exclude shipping” toggle next to it controls whether shipping is included in the `ecommerce.value` figure on purchase and refund events. Default off. ![Tax and shipping](https://gtmkit.com/wp-content/uploads/2023/01/tax-and-shipping-options.png)## Events in checkout Google Analytics 4 has 2 new events in the checkout and they are called `add_shipping_info` and `add_payment_info`. These events may be usefull for tracking progress in the funnel but it depends entirely on you setup. Ideally you only want to fire these events once and the options are: - When the ‘Place order’ button is clicked - When a shipping/payment method is selected with fallback to the ‘Place order’ button. - Disable the event. Ideally you should fire the event when a method is selected but what happens if the user changes the method? In this case only event will be fired but the name of method will be the first chosen method. So the usefullness of these events depends on how you checkout page is structured. ![Events in checkout](https://gtmkit.com/wp-content/uploads/2023/01/checkout-events.png)### View\_item on variable products A variable product like a shirt has different sizes. Each size has it’s unique product number / SKU. All product variations has a master product where the user can select size. This is a problem with the `view_item` event. If you fire the event on both the master product and when a variation has been selected you will get a higher number of views than expected. If you only fire the event on the master product the will be a gap or missing link when the variation with a different product ID is addeed to the cart. Theere is no right or wrog here but you have to choose. ![View_item on variable products](https://gtmkit.com/wp-content/uploads/2023/01/variable-product-view.png)### Dequeue default JavaScript If you have customized you WooCommerce store to an extend where it is no longer compatible with the JavaScript included in GTM Kit you may dequeue the JavaScript and include your own. ![Dequeue default JavaScript](https://gtmkit.com/wp-content/uploads/2023/01/dequeue-default-js.png)## Common issues **`purchase` does not fire.** The customer never returns from the payment gateway. PayPal Standard, some bank gateways, and a small fraction of mobile users close the browser before redirecting back to the thank-you page. The free plugin only fires `purchase` on the thank-you page. The Woo Add-On’s “Multiple Purchase Tracking Strategies” feature solves this by allowing pre-redirect tracking and server-side delivery. See [What you get with the Woo Add-On](https://gtmkit.com/documentation/what-you-get-with-the-woo-add-on/). **`view_item_list` is missing on the shop page.** Some themes render the product loop with non-standard markup that bypasses WooCommerce’s `woocommerce_loop_*` hooks. GTM Kit relies on those hooks. Switch to a theme or theme setting that uses the standard loop, or add a hook bridge in your theme. **Variations do not change the data layer.** Variable product tracking is off by default. Turn it on in **Integrations**. **You see ecommerce events but no `purchase`, only on certain orders.** The Woo Add-On adds the `order_paid` event for orders that are paid asynchronously (BACS, COD with manual confirmation, etc.). On the free plugin, `purchase` only fires on the thank-you-page render of the order, so async-paid orders may not produce a tracking event. ## Related articles - [Verify GTM is firing on your site](https://gtmkit.com/documentation/verify-gtm-is-firing-on-your-site/) - [What you get with the Woo Add-On](https://gtmkit.com/documentation/what-you-get-with-the-woo-add-on/) - [Conflicts with cache and consent plugins](https://gtmkit.com/documentation/conflicts-with-cache-and-consent-plugins/)