Configure Google Analytics 4 (GA4)
Use Google Analytics 4 (GA4) to capture and analyze traffic data across your websites and applications.
Note
This is a third-party integration and is not an Optimizely subprocessor. See Optimizely's Third-Party Add-Ons & Platform Integration Terms.
Note
Starting July 1, 2023, GA4 will replace standard Google Universal Analytics (UA), which will no longer process data. For more information, see Introducing Google Analytics 4 (GA4).
If you use Google Analytics to monitor your projectβs traffic, you can view the results of your Optimizely experiments alongside the rest of the data that Google Analytics collects.
Setting up GA4 in Feature Experimentation
You can use a custom notification listener to configure GA4 in Optimizely Feature Experimentation. Notification listeners let you programmatically observe and act on various events within the Optimizely Feature Experimentation SDKs.
For information on how to configure a notification listener in Optimizely Feature Experimentation, select the corresponding SDK to view the developer documentation:
- Android SDK
- C# SDK
- Flutter SDK
- Go SDK
- Java SDK
- JavaScript (Browser) SDK
- JavaScript (Node) SDK
- PHP SDK
- React SDK
- React Native SDK
- Ruby SDK
- Python SDK
- Swift SDK
Note
We will use the JavaScript (Browser) SDK in the following examples.
Example onDecision
listener:
const optimizelySdk = require('@optimizely/optimizely-sdk');
const optimizelyEnums = require('@optimizely/optimizely-sdk').enums;
const optimizely = optimizelySdk.createInstance({
sdkKey: '<YOUR_SDK_KEY>',
});
const onDecision = ({ type, userId, attributes, decisionInfo }) => {
// Add a DECISION Notification Listener for type FLAG
if (type === 'flag') {
// Access information about feature, for example, key and enabled status
console.log(decisionInfo['flagKey']);
console.log(decisionInfo['enabled']);
console.log(decisionInfo['decisionEventDispatched']);
if (decisionInfo['decisionEventDispatched']) {
// Send data to analytics provider here
}
}
}
const notificationId = optimizely.notificationCenter.addNotificationListener(
optimizelyEnums.NOTIFICATION_TYPES.DECISION,
onDecision
);
Note
The notification listener returns the decision. It is possible to update what is returned by editing the
onDecision
notification listener. Review the Decision notifications listeners developer documentation for more information.
Example of a targeted delivery decisionInfo
object:
Example of an experiment decisionInfo
object:
You can distinguish between a targeted rollout or an experiment based on decisionEventDispatched
. An experiment will have this value set to true
. A targeted delivery will return false
as there is no dispatched event for rollouts. View the decision event dispatched parameter developer documentation for more information.
Integrating with or without Google Tag Manager
You can congigure the integration between Optimizely Feature Experimentation and Google Analytics 4 (GA4) with or without Google Tag Manager (GTM). You should use GTM to track the data and variables sent by Optimizely Feature Experimentation, as it makes timing issues much more manageable.
GTM lets you push items to GTMβs data layer even while the integration end object is unavailable, such as the GA object. Using GTM is especially useful if you run a back-end experiment and pass that information to your front-end to send that information to Google Analytics.
Alternatively, setting up GA4 without GTM requires manually tracking the events and variables sent by Optimizely and verifying that they are sent after GA is initialized.
You can skip directly to each section using the following:
With Google Tag Manager:
Step 1. Push Optimizely data to Google Tag Manager
In your local code, push Optimizely Feature Experimentation data to the dataLayer
collection of GTM. In our JavaScript example, you could implement the following code:
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'optimizely-decision',
'optimizely-flagKey': decisionInfo.flagKey,
'optimizely-ruleKey': decisionInfo.ruleKey,
'optimizely-variationKey': decisionInfo.variationKey,
});
Step 2. Create User-defined Variables in Google Tag Manager
- Go to Workspace > Variables > New.
- Update the variable's name field from "Untitled Variable" to
Optimizely - flagKey
.
- Click Variable Configuration and select Data Layer Variable.
- In the Data Layer Variable Name field, enter
optimizely-flagKey
.
- Click Save.
- Repeat steps 1 through 5 to create a ruleKey and variationKey data layer variable.
Variable | Variable Name | Data Layer Variable Name |
---|---|---|
ruleKey | Optimzely - ruleKey | optimizely-ruleKey |
variationKey | Optimizely - variationKey | optimizely-variationKey |
When completed, you should have the following user-defined data layer variables:
Step 3. Set up the configuration tag in GTM
In Google Tag Manager, complete the following steps to set up a Google Analytics GA4 Configuration tag:
- Go to Workspace > Tags > New.
- Update the name field from "Untitled Tag" to
Google Analytics GA4 Configuration
. - Click Tag Configuration and select Google Analytics: GA4 Configuration.
Enter your Measurement ID. For information on where to find your Measurement ID, refer to the GA4 documentation.
- Click Triggering and select Initialization - All Pages.
- Click Save.
Step 4. Set up the event tag in GTM
In GTM, complete the following steps to set up a Google Analytics GA4 Event tag:
- Go to Workspace > Tags > New.
- Update the name field from "Untitled Tag" to
Optimizely - GA4 Event
. - Click Tag Configuration and select Google Analytics: GA4 Event.
Note
If you plan on creating both an Optimizely Web Experimentation experiment and an Optimizely Feature Experimentation experiment, you may want to differentiate between your projects.
As a best practice, name your event:
optimizely-decision-fs
for Feature Experimentation andoptimizely-decision-web
for Web.For instructions on setting up Optimizely Web Experimentation and GA4, please review the corresponding documentation:
- Enter
optimizely-decision-fs
in the Event Name field. - Select Google Analytics GA4 Configuration in the Configuration Tag drop-down menu.
- Expand Event Parameters
a) Select Add Row
b) EnterFlag
in the Parameter Name field.
c) In the Value field, select the Choose a Variable icon and select Optimizely - flagKey, which you created in Step 2.
d) Repeat steps a-c forRule
andVariation
, selecting the corresponding data layer variable for each.
When complete, your Tag Configuration should look like the following:
- Click Triggering and then click the New Trigger, + icon to create the following trigger:
a) Update the trigger name from "Untitled Trigger" toOptimizely - GA4 Trigger
b) Click Trigger Configuration, scroll down, and select Custom Event.
c) In the Event name field, enter optimizely-decision-fs
. Click Save.
d) Then click Save again on the overall tag setup page.
Step 5. Submit and Publish GA Workspace
Now submit and publish your workspace changes by going to Workspace > Submit > Publish (adding any details you would like to the Submission Configuration).
You will then be able to see results in the events being populated in Google Analytics:
With their sent values:
This can be verified by viewing the Realtime overview in the Reports tab of GA4.
Without using Google Tag Manager:
You can directly push events to GA4 without using GTM, but tracking the events and variables sent by Optimizely Feature Experimentation is significantly more complicated.
To send Optimizely Feature Experimentation data to GA4, you will use GA4βs Send events methods. For more information, refer to GA4βs complete documentation on their Send events methods:
For the JavaScript example in this article, you would use the GA4 Send events call. You would add the following sample call into your code base.
gtag("event", "optimizely-decision", {
Flag: decisionInfo.flagKey,
Rule: decisionInfo.ruleKey,
Variation: decisionInfo.variationKey
});
Within GA4, you can name your variables whatever you would like. You can remove or include any variables. But for a Flag rule, we recommend:
flagKey
ruleKey
variationKey
οΈ Warning
If you use the above code example, ensure that
gtag
is defined and that you have GA4 initialized and ready to interpret variables returned by Optimizely Feature Experimentation.
Conclusion
After successfully setting up and pushing events from Optimizely Feature Experimentation to GA4, the next step is to create segments in Google Analytics. Segments are a subset of your analytics data. Review the Create segments for Google Analytics 4 documentation for complete instructions.
Updated 3 months ago