Integrate Webflow Optimize with Google Analytics 4 (GA4)

Updated

Learn how to integrate Webflow Optimize with GA4 to send event info to Google Analytics.

You can integrate with Google Analytics 4 (GA4) to send Webflow Optimize view event info to Google Analytics for your GA4 reports. The integration offers automatic and manual configuration options.

How automatic configuration works

When a visitor arrives on your webpage, Webflow checks if the page has a GA configuration. If a dataLayer (created by Google) exists, Webflow checks the dataLayer for a Measurement ID. Webflow continues to check for up to three seconds or until at least one ID is found.

If a Measurement ID is found, Optimize event info will be sent to Google using that Measurement ID.

  • Event info is only sent when the page viewed contains a live variation/optimization
  • One event is sent for each variation/optimization combo that's applied to the page
  • If no variation/optimization exists on the page, no event info is sent

Good to know

If you have multiple GA properties/streams, you should not use the automatic configuration option because it can’t isolate specific properties/streams and it is not guaranteed that all properties/streams will receive data.

How to integrate with GA4 automatically

Go to your Webflow site, then:

  1. Go to the Insights tab
  2. Click Integrations
  3. Click Set up under Google Analytics 4 (GA4)
  4. Choose Automatically configure
  5. Click Save

How to integrate with GA4 manually

GA4 leverages Measurement IDs (e.g. G-12ABCDE3FG) to identify properties. You’ll need to find and copy the Measurement IDs that you want to receive Optimize event info in.

  1. Find and copy your Google Measurement IDs
  2. Go to your Webflow site
  3. Go to the Insights tab
  4. Click Integrations
  5. Click Set up under Google Analytics 4 (GA4)
  6. Choose Set up manually
  7. Click + New Measurement ID once for each ID you want to enter
  8. Enter your Measurement ID(s)
  9. Click Save

How to confirm the integration is working

Important

If you’ve defined dimensions, it takes 24-48hrs for Webflow Optimize data to populate in GA4.

Once the integration is configured, you can verify data are flowing using the "Realtime view." Note that it may take a few minutes or more for data to populate in GA depending on your site traffic. If it's not immediately present, try again / refresh in a few minutes.

From your Google Analytics dashboard:

  1. Choose your property/stream from the dropdown at the top
  2. Click Reports > Realtime
  3. Locate the "Event count by Event name" card
  4. Look for the event "variation_viewed"

If "variation_viewed" exists, the stream is successfully receiving Webflow Optimize data.

How to view Webflow Optimize events in GA4

Note

Conversion events are not sent to GA.

Create dimensions for Optimize events

First, create dimensions in GA for the following Webflow Optimize events. It takes 24-48 hours for dimensions to appear in GA after you create them.

Event Parameter Name Description
experienceName Optimization Name The optimization’s name
experienceType Optimization Type cc (AI-optimized)
ab (Test)
rbp (Personalization)
variationName Variation Name The variation’s name

Create a custom report to view Optimize events

Next, create a custom report in GA 24-48 hours after making your dimensions.

  • Add the dimensions you created (e.g., Optimization and variation name)
  • Add metrics you want to view (e.g., views and total users)
  • Optionally, add segments to refine the report (e.g., isolate metrics to visitors on mobile devices)

Related articles