Free Google Optimize Alternative – A/B Testing with JavaScript, ChatGPT and GA4

Did you like this post? Share it!

Since the sunset of Google Optimize, we’ve been unable to continue A/B testing for many clients. Simply put, alternative A/B testing tools are either too expensive or fall short of Google Optimize’s quality.

To address this, we created our own free A/B testing solution – costing only our time. Setting up a basic test takes under an hour, though hypothesis creation and interpreting results understandably take longer.

How It Works

The process is straightforward. We use custom JavaScript to modify elements on the website when the page loads. Essentially, this is the same principle on which Google Optimize operated.

For example, let’s say we want to experiment on our website, changing all button colors on our homepage.


Sample prompt for A/B Test

Hello, I have a website at https://marketingmakers.net. I want to launch a simple A/B test that changes the background color of all buttons on the page to #b22222. The source code looks like this:

<div class="elementor-element elementor-element-ac41847 elementor-mobile-align-center elementor-widget elementor-widget-button" data-id="ac41847" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-md" href="#sluzby">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<i aria-hidden="true" class="fas fa-arrow-down"></i>			</span>
									<span class="elementor-button-text">More</span>
					</span>
					</a>
		</div>
				</div>
				</div>

There are more buttons like this.

Please store the user’s variant preference in session storage. Always check if the user already has a variant; if so, do not overwrite it and apply the style according to the existing variant.

Distribute the test 50:50 with the original variant.

I will paste this script into Google Tag Manager, so it must be compatible with older JavaScript versions (pre-ES6).

Please use only pure JavaScript with no libraries. Avoid using functions in your script; just execute it directly. You may use a self-invoking function at the beginning.

This is the generated code – you may try it in JS console. It works:

(function() {
    // Retrieve the user's variant from sessionStorage
    var variant = sessionStorage.getItem('buttonColorTest');

    // If no variant exists, assign one without overwriting
    if (!variant) {
        variant = Math.random() < 0.5 ? 'original' : 'red';
        sessionStorage.setItem('buttonColorTest', variant);
    }

    // Apply style based on the assigned variant
    if (variant === 'red') {
        var buttons = document.querySelectorAll('.elementor-button.elementor-size-md');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].style.setProperty('background-color', '#b22222', 'important');
        }
    }
})();

Of course it may also select some other thing that you do not want to select. Ask ChatGPT for correction.

How to Set It Up

1. Create a Custom HTML Tag

Add a custom HTML tag specifically for the page you want to include in the test. I typically fire the test on DOM ready.

Experiment HTML code

2. Create a Custom JavaScript Variable

Set up a custom JavaScript variable to manage the variant assignment.

Session storage experiment

3. Add a New Experiment Variable

Include a new variable, experiment_variant, in your configuration parameters or as a shared event parameter. Apply this to all events you want to include in the experiment.

You can easily check the active variant on your screen by using preview mode or directly viewing it in session storage:

4. Test everything in GTM Preview Mode

5. Create a Custom Dimension in GA4

Define a custom dimension in GA4 to capture the experiment_variant value (Settings – Data Display – Custom definitions):

Custom definitions

6. Review the Results

Once the experiment runs, check your results in GA4’s Explore reports, BigQuery, or Looker Studio. I compare cta_click but I could compare form_sent or other event as well.

Can I trust the results of the experiment?

We only evaluate smaller experiments in GA4. However, as experienced specialist Adam Silhan mentioned in a LinkedIn comment, GA4 is absolutely inadequate for A/B testing because it does not provide precise data, but rather approximations. This is fine for day-to-day tasks but can be problematic for A/B testing. We fully agree with this statement. On the other hand, for most experiments where the result is not a close 55:45 but more significant, and if the GA4 account is set up with, for example, device-based reporting identity, the difference between GA4 and BigQuery is very small. Nevertheless, to be certain, before making any big decisions, you should verify the data in BigQuery.

Another advantage of BigQuery is that it includes unconsented hits, which can make a significant difference, especially if you use strict cookie bar settings.

How Do User Preferences Get Stored?

I use session storage intentionally, which remembers a user’s variant only for their current session. This approach doesn’t identify users or store long-term data, so it’s more privacy-friendly than other A/B testing solutions. However, consult your DPO if you have GDPR concerns.

What Can You Test with This Method?

This method is ideal for changes that are straightforward to execute with JavaScript. For example:

  • Button colors
  • Text or heading modifications
  • Banner image swaps
  • Adding or hiding elements, like CTAs or video descriptions
  • Color or background changes

Avoid complex tests (e.g., header redesigns or page redirects) since they may introduce issues across different devices.

Tips for Effective and Safe A/B Testing

1. Be Specific with Selectors
ChatGPT doesn’t “know” your site, so it might pick a selector that affects unintended elements. Specify exactly which elements to test. For example, if you only want to test CTA buttons on your homepage, you might consider having your developer add a custom class for them.

2. Avoid Script Interference with Multiple Tests
If running multiple experiments, ensure that your JavaScript snippets don’t interfere with each other.

3. Notify Developers
Inform your client’s developers about any experiments, so they don’t spend unnecessary time troubleshooting unexpected changes.

4. Regularly Check Experiment Results
Since your experiment relies on query selectors, verify that the selectors target the correct elements. If unexpected results occur, revisit the website setup.

5. Test on Both Mobile and Desktop
Website selectors may differ on mobile versions, so test across both views.

Experiment with Enthusiasm

Finally, while it might sound sentimental, A/B testing is about more than changing colors; it’s a mindset of curiosity and experimentation. Many clients love the process and even suggest ideas themselves – making the journey as enjoyable as the results.

(Cover image created by ChatGPT)

Subscribe to our newsletter
We send it 4 times a year.
Read more from our specialists