A/B Testing in Drupal Without the Enterprise Price Tag: A Practical Guide Using the A/B Test JS Module

Many organizations want to run A/B tests but either don’t know where to start or are discouraged by the high cost of enterprise-grade experimentation platforms like Optimizely or VWO. The good news: if your website runs on Drupal, there’s an approachable, flexible, and cost-effective alternative that can be built right into your existing Drupal instance.

But first—what is an A/B test?

A/B testing is a method for comparing two or more versions of a webpage or user experience to determine which performs better. Visitors are randomly assigned to different versions (variants), and their behavior is tracked to measure effectiveness against a goal; such as conversions, engagement, or navigation success.

In this post, I’ll share how we implemented A/B testing for Oberlin College & Conservatory to test two versions of a homepage design using the community-contributed A/B Test JS module and why it’s a powerful approach for teams that want accurate testing without engaging with another vendor or purchasing software.

Introducing the A/B Test JS Module

If your site is on Drupal, the A/B Test JS module is a lightweight, highly flexible tool for running front-end A/B tests. It does require writing or editing JavaScript (or knowing someone who does like cough cough Aten Design Group), but provides enormous flexibility.

The module has two core concepts:

1. Conditions – When a test should run.
2. Experiences – What happens for users assigned to each variant.

Let’s break them down. I've also included some example code if helpful for getting started.

Defining Conditions: When Should the Test Trigger?

Every test in A/B Test JS begins with a condition, a JavaScript function that returns true or false. A condition is simply the set of rules for when a user should be included in the experiment.

A condition can trigger based on:

• A specific URL or set of URLs
• A user action (e.g., clicking a button)
• A DOM state you can detect with JavaScript
• A device type or viewport size
• Query parameters or campaign codes
• API data (e.g., geolocation, persona attributes)
• Anything else JavaScript can evaluate

Client Example: Oberlin College

For our client, Oberlin, the requirement was to only run the A/B test for users who are off campus.

To accomplish this, we created a simple API endpoint that returned whether the user was on- or off-campus based on IP address. Our condition function queried this API and only ran the test when the user was off campus.

This let Oberlin’s marketing team measure external user behavior from prospective students without affecting on-campus experiences.

Defining Experiences: What Should Each Variant Do?

Once a condition is met, users are randomly placed into one of the test’s experiences. You can configure:

• As many experiences (variants) as needed
• What percentage of users get each experience
• The duration of the experience cookie

Experiences are written in JavaScript and can modify virtually anything on the page. Here are some powerful experience actions you can set up:

• Redirect users to a new landing page
• Swap navigation menus or reorganize IA
• Show or hide interface elements
• Insert new components such as alerts, CTAs, banners
• Modify DOM elements (copy, colors, layout)
• Reorder search results or featured items
• Change form field arrangements
• Send event data to analytics platforms
• Trigger personalization logic
• Load alternative content or templates

If you can do it in JavaScript, you can test it.

Client Example: Navigation and Homepage Variants

Oberlin wanted 50% of off-campus users to see:

• a redesigned navigation
• a refreshed homepage

And 50% of off-campus users to see (our control):

• the current navigation
• the current homepage

The A/B Test JS module assigns users, sets a cookie, and ensures their experience persists across sessions throughout the test window.

Tracking A/B Test Data in GA4 & Microsoft Clarity

For accurate experiment analysis, each variant triggers custom analytics events. Oberlin uses both Google Analytics 4 and Microsoft Clarity, which integrate easily with the A/B Test JS module.

// Send variant information to Microsoft Clarity
 
// Example: clarity("set", "ab_test", "variantA");
clarity("set", "ab_test", testVariant);
// Push A/B test event to Google Tag Manager / GA4
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "ab_test_view",
  test_name: "oberlin_nav_homepage_test",
  variant: testVariant,
  // Helpful for later analysis
  timestamp: new Date().toISOString()
});

Why This Structure Matters

• The consistent naming (ab_test_view) makes GA4 funneling much easier.
• Adding a test name helps compare multiple tests later.
• A timestamp enables deeper behavioral insights in BigQuery.
• Clarity’s set function lets you segment recordings by variant.

Turning Event Data Into Insight: Funnels, Heatmaps & Behavior Flows

With custom events firing, Oberlin can now analyze how real users respond to experience changes by tracking these metrics:

Google Analytics 4

• Funnel performance between variants
• Engagement time differences
• Scroll depth comparisons
• CTA performance
• Conversion rates and micro-conversions

Microsoft Clarity

• Heatmap differences between control and variant
• Rage-click or dead-click patterns
• Session recordings segmented by variant
• Layout friction areas

Conclusion: A/B Testing Makes Room for Data-Driven Decisions

The A/B Test JS module is a flexible, developer-friendly approach to A/B testing that avoids costly subscription tools while still offering the rigor teams need to make data-driven decisions.

For Oberlin College, it enabled:

• Targeted testing only for specific user groups
• Major layout and navigation experiments
• Accurate tracking in GA4 and Clarity
• Low overhead and no proprietary tooling

After a month of testing the two variables, their marketing team was able to make decisions about homepage content based on heatmap insights, clicks, scroll depth, and time on the page.

If you’re running Drupal and want to start experimenting, this module may be one of the most valuable additions to your stack. Reach out to us if you'd like help planning your next round of experiments.