Google Tag Manager GA4 for Webflow: Installation and User Guide

 

Google Tag Manager GA4 for Webflow makes it easy to connect a Webflow site to Google Tag Manager and configure tracking without manually editing your site's tracking code.

 

Installation

  • Open the Webflow App Marketplace.
  • Find Google Tag Manager GA4 for Webflow.
  • Click Install.
  • Select the Webflow site where you want to use the app.
  • Authorize the requested Webflow permissions.
  • Open the app from the Webflow Designer.

After installation, the app is available from the Webflow Designer for the selected site.

 

Requirements

You need:

  • A Webflow site.
  • Access to the Webflow Designer.
  • A Google Tag Manager account.
  • A Google Tag Manager web container.

You can create a Google Tag Manager account at tagmanager.google.com.

 

Configure Google Tag Manager

1. Create or select a GTM container

In Google Tag Manager, create a Web container or select an existing Web container.

Your container ID looks like:

GTM-XXXXXXX

You can find the container ID in the Google Tag Manager interface.

2. Open GTM for Webflow

Open your Webflow project in the Designer and launch GTM for Webflow.

Select the site you want to configure.

3. Enter your GTM Container ID

Enter your Google Tag Manager container ID:

GTM-XXXXXXX

Save the configuration.

4. Publish your Webflow site

After saving the configuration, publish your Webflow site. The GTM integration will become active on the published site.

 

Configure tracking in Google Tag Manager

Google Tag Manager GA4 for Webflow provides the connection between your Webflow site and Google Tag Manager. Your tracking configuration is managed in Google Tag Manager.

You can use GTM to configure:

  • Google Analytics 4
  • Meta Pixel
  • Custom HTML tags
  • Custom JavaScript tags
  • Other services supported by Google Tag Manager

For each service, configure the required tags, triggers, and variables in your GTM container. After making changes in Google Tag Manager, remember to Submit/Publish the container.

 

Data Layer

GTM for Webflow can be used together with a data-layer based tracking implementation. The data layer allows information about user interactions and ecommerce activity to be passed to Google Tag Manager.

For example:

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

window.dataLayer.push({
  event: "custom_event"
});

You can then create a corresponding trigger in Google Tag Manager:

Trigger type: Custom Event

Event name:

custom_event

For ecommerce tracking, configure your GTM container to consume the ecommerce events and parameters required by your analytics or advertising platforms.

 

Google Analytics 4

To configure GA4:

  • Create or select a GA4 property.
  • Create a GA4 web data stream.
  • Configure the GA4 measurement ID in Google Tag Manager.
  • Create the required GA4 tags and triggers.
  • Publish the GTM container.
  • Visit your Webflow site and verify the events using Google Analytics DebugView or Google Tag Assistant.
  • Google Ads

 

Testing your installation

After configuring the app, always test the published site.

Google Tag Assistant

Use Google Tag Assistant to verify that:

  • The GTM container loads.
  • The correct container ID is present.
  • Expected events are generated.
  • GTM tags fire when expected.
  • Variables contain the expected values.

You can use:

  • Google Tag Assistant
  • Browser developer tools

You can also inspect the browser's data layer from the developer console: window.dataLayer

To inspect individual events:

window.dataLayer.forEach(event => console.log(event));


Troubleshooting

a) Google Tag Manager does not load

Check the following:

  • Verify that the GTM container ID is correct.
  • Make sure the configuration was saved in GTM for Webflow.
  • Publish the Webflow site after changing the configuration.
  • Open the published site rather than the Designer preview.
  • Check Google Tag Assistant for the detected GTM container.
  • Tags are not firing

 

b) If GTM loads but a tag does not fire:

  • Open Google Tag Manager.
  • Use Preview mode.
  • Open the Webflow site.
  • Check the event timeline in Tag Assistant.
  • Verify the tag's trigger conditions.
  • Verify that required variables contain the expected values.
  • Make sure the GTM container containing the latest changes has been published.
  • Events are not appearing in the data layer

 

Open the browser developer console and inspect:

window.dataLayer

If the expected event is missing, check the site's implementation and the event configuration. If the event is present in the data layer but the GTM tag does not fire, check the corresponding GTM trigger.

d) Changes are not visible

Make sure both of the following have been published:

The Webflow site.
The Google Tag Manager container.

Browser caching can also affect testing. Try an incognito/private browser window if necessary.

Consent and privacy

GTM for Webflow provides the technical connection between the Webflow site and Google Tag Manager. The merchant is responsible for configuring tracking and consent according to the requirements applicable to their website and visitors.

If your site requires visitor consent before analytics or advertising technologies are loaded, configure your consent-management solution and Google Tag Manager accordingly.

Do not configure tracking tags to collect information that you are not permitted to collect.

 

Removing the app

If you no longer want to use GTM for Webflow:

  • Remove or disable the tracking configuration associated with the site.
  • Uninstall GTM for Webflow from Webflow.
  • Review the published site's tracking configuration to ensure that any tracking you no longer need has also been removed.
  • Support

If you need help with GTM for Webflow, contact Anowave through the support information provided on the Webflow App Marketplace listing.

When contacting support, include:

  • Your Webflow site/project.
  • The GTM container ID, if relevant.
  • A description of the problem.
  • Any relevant browser-console or Google Tag Assistant errors.
  • The steps required to reproduce the issue.

Author: Angel Kostadinov

Extensions for Magento

Anowave is an extension developer for Magento 1.x and Magento 2.x platforms. We provide a wide range of premium extensions for our in-house and public clients. The extensions we offer extend the capabilities of Magento and provide bespoke functionality. They also fill some gaps in the functionality provided by the base platform and help customers choose Magento as their preferred eCommerce platform.

The extensions we offer are part of our full-range Magento service, which also includes a Premium Helpdesk where customers can speak with actual software engineers and have their issues resolved without hassle. Premium-labeled modules also include free installation, configuration, testing, etc.