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.