Is there a way to track Webflow purchases in Google Analytics using Google Tag Manager and custom code?

Published on
September 22, 2023

Yes, there is a way to track Webflow purchases in Google Analytics using Google Tag Manager and custom code. Here's a step-by-step guide on how to set it up:

  1. Set up Google Analytics: First, you need to have Google Analytics set up for your Webflow website. If you haven't done this already, sign in to your Google Analytics account, create a new property for your Webflow website, and copy the tracking ID.

  2. Add Google Tag Manager code to Webflow: Go to your Webflow project settings, select the Custom Code tab, and paste your Google Tag Manager code in the Header Code section. Save the changes and publish your site.

  3. Set up a trigger in Google Tag Manager: Sign in to your Google Tag Manager account and navigate to your container. Click on "Triggers" in the left sidebar and create a new trigger. Choose the trigger type "Page View" and specify the conditions for when you want the trigger to fire. For example, you can set it to fire on a specific URL path or when a certain event occurs on your purchase confirmation page.

  4. Set up a tag in Google Tag Manager to send data to Google Analytics: Still in Google Tag Manager, click on "Tags" in the left sidebar and create a new tag. Choose the tag type "Google Analytics: Universal Analytics". In the Tag Configuration section, enter your Google Analytics tracking ID that you copied earlier. Under the Triggering section, select the trigger you created in step 3.

  5. Enable Enhanced Ecommerce in Google Analytics: To track purchases and other ecommerce-related data, you need to enable Enhanced Ecommerce in your Google Analytics settings. Sign in to your Google Analytics account, go to your Webflow property, and navigate to the Admin section. Under the View column, click on "Ecommerce Settings" and toggle the "Enable Ecommerce" and "Enable Enhanced Ecommerce Reporting" switches to ON. Save the changes.

  6. Set up custom code in Google Tag Manager: In Google Tag Manager, go to your container and click on "Tags". Edit the tag you created in step 4. Under "Tag Configuration", click on "Enable overriding settings in this tag" and enter the following custom code in the "Fields to Set" section:

  • For the field 'ecommerce', enter the value 'true'

  • For the field 'currencyCode', enter the currency code used in your ecommerce transactions (e.g., 'USD')

    Make sure to save your changes.

  1. Test and publish your changes: Test your setup by previewing and debugging your container in Google Tag Manager. Make a test purchase on your Webflow website and check if the data is being sent to Google Analytics correctly. Once you've confirmed that everything is working as expected, go ahead and publish your changes in Google Tag Manager.

By following these steps, you'll be able to track Webflow purchases in Google Analytics using Google Tag Manager and custom code. This will provide you with valuable insights into your ecommerce performance and help you optimize your online store.

Additional Questions:

  1. How do I set up Google Analytics for my Webflow website?
  2. What are the benefits of using Google Tag Manager?
  3. How can I track other events on my Webflow website using Google Tag Manager?