Has anyone successfully set up Google Analytics Ecommerce Tracking with Webflow?

Published on
September 22, 2023

Yes, it is possible to set up Google Analytics Ecommerce Tracking with Webflow. Here's a step-by-step guide on how to do it:

  1. Set up Google Analytics: If you haven't already done so, create a Google Analytics account and set up a property for your Webflow site. Note down your Google Analytics Tracking ID (e.g., UA-12345678-1).

  2. Enable Ecommerce Tracking in Google Analytics: In your Google Analytics property settings, go to "Ecommerce Settings" and toggle the "Enable Ecommerce" button to ON.

  3. Add Google Analytics Tracking ID to your Webflow site: In your Webflow project settings, go to the "Custom Code" tab. Paste your Google Analytics Tracking ID in the "Head Code" section.

  4. Set up Google Analytics Enhanced Ecommerce in Webflow: Webflow includes built-in support for Google Analytics Enhanced Ecommerce, making it easier to track e-commerce events such as product views, add to cart, and purchases. To enable Enhanced Ecommerce tracking in Webflow:

  • Open the Webflow Designer for your site.
  • Select the page where you want to enable Enhanced Ecommerce tracking.
  • In the Settings panel, go to "Page Settings" > "Custom Code".
  • In the "Head Code" section, paste the following code:
<!-- Google Analytics Enhanced Ecommerce --><script>  window.dataLayer = window.dataLayer || [];  function gtag() {    dataLayer.push(arguments);  }  gtag("js", new Date());  gtag("config", "YOUR_GOOGLE_ANALYTICS_TRACKING_ID", {    "enhanced ecommerce": true,  });</script>

Make sure to replace "YOUR_GOOGLE_ANALYTICS_TRACKING_ID" with your actual Google Analytics Tracking ID.

  1. Set up Ecommerce events in Webflow: With Enhanced Ecommerce enabled, you can now track specific e-commerce events on your Webflow site.
  • Product Views: To track product views, add a custom code block to the page template where you want to track the product views. Inside the code block, use the following code:

    ```html

    ```

    Replace "PRODUCT_ID", "PRODUCT_NAME", "PRODUCT_PRICE", "PRODUCT_BRAND", "PRODUCT_CATEGORY", and "PRODUCT_VARIANT" with the actual data for each product view you want to track.

  • Add to Cart: To track when a product is added to the cart, add a custom code block to the page template where you want to track the add to cart event. Inside the code block, use the following code:

    ```html

    ```

    Replace "PRODUCT_ID", "PRODUCT_NAME", "PRODUCT_PRICE", "PRODUCT_BRAND", "PRODUCT_CATEGORY", and "PRODUCT_VARIANT" with the actual data for the product being added to the cart.

  • Purchase: To track a purchase, add a custom code block to the success/thank you page that users see after completing a purchase. Inside the code block, use the following code:

    ```html

    ```

    Replace "ORDER_ID", "STORE_NAME", "ORDER_TOTAL", "ORDER_TAX", "ORDER_SHIPPING", "PRODUCT_ID", "PRODUCT_NAME", "PRODUCT_BRAND", "PRODUCT_CATEGORY", "PRODUCT_VARIANT", and "PRODUCT_PRICE" with the actual data for the purchase and products.

  1. Test and verify: Once you have set up the tracking code and events on your Webflow site, it's important to test and verify that the Google Analytics Ecommerce Tracking is working correctly. Add sample products to the shopping cart and complete a test purchase to ensure that the data is being tracked accurately in Google Analytics.

Setting up Google Analytics Ecommerce Tracking with Webflow requires a combination of configuration in both Google Analytics and Webflow. By following the steps outlined above, you should be able to effectively track e-commerce events and gain valuable insights into your customers' behavior and purchasing patterns.

Additional questions:

  1. How do I enable Ecommerce Tracking in Google Analytics for my Webflow site?
  2. What are the benefits of using Google Analytics Ecommerce Tracking with Webflow?
  3. Can I track other custom events with Google Analytics in Webflow?