Integrate Optimizely Web Experimentation with Google Analytics 4 (GA4)

  • Updated

Use Google Analytics 4 (GA4) to capture and analyze traffic data across your websites and applications.

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).
This articles describes a custom GA4 integration option. We are working on building the GA4 integration option into Optimizely Web Experimentation (similar to the Google Universal Analytics integration).

If you use Google Analytics to monitor your project’s traffic, you can view the results of your Optimizely Experimentation experiments alongside the rest of the data that Google Analytics collects.

You can set up the integration between Optimizely Web Experimentation and Google Analytics 4 (GA4) both with and without Google Tag Manager (GTM). This article covers setting up the integration without using GTM. For instructions on setting up the GA4 integration using GTM, see this article.

Table of Contents

Configure GA4 in Optimizely Web Experimentation

Step 1. Add script in Optimizely Web Experimentation

Complete the following steps to add the script in Optimizely Web Experimentation:

    1. Go to Settings > Integrations.
    2. Expand the Create Analytics Integration.. drop-down list and select Using JSON.
      mceclip0.png
    3. Copy the following code and paste it in the JSON Code field: 
      {
         "plugin_type": "analytics_integration",
         "name": "Custom GA4 integration",
         "form_schema": [],
         "description": "",
         "options": {
            "track_layer_decision": "var state = window['optimizely'].get('state');\nvar campaignObject = state.getDecisionObject({'campaignId':campaignId});\n\nif(campaignObject !== null){\n var utils = window[\"optimizely\"].get(\"utils\");\n utils.waitUntil(function() {\n return typeof(gtag) === 'function';\n }).then(function() {\n console.log('gtag is finally a function. Sending now.');\n gtag(\"event\", \"optimizely_decision_web\", {\n optimizely_experiment: campaignObject.experiment,\n optimizely_variant: campaignObject.variation\n });\n });\n}\n"
         }
      }
    4. Click Create Extension.
The code above contains a console log that will write the following in the console of a browser: "gtag is finally a function. Sending now." Once you verify that this displays, you can remove this line of code or comment it out. To edit the code, go to Settings > Integrations > Custom GA4 integration > Edit.

 

Step 2. Install GA4 on your website

Install Google Analytics 4 (GA4) directly on your website. For help with this, complete the following steps in Google Analytics to find their data tagging instructions:

  1. Open Google Analytics.
  2. Go to Admin > Data Streams and open your website’s Web stream details page.
  3. Go to Tagging Instructions > Global site tag (gtag.js) to find the instructions for adding GA4 to your website.
    mceclip1.png

Now your Optimizely Web Experimentation data immediately starts syncing to GA4 (no further steps required).