A/B Testing

Create custom A/B tests to optimize the user experience on your site.

SOLO Armchair |

$330

Bring modern style and comfort to your living space.

What We Built


In this example, we built a widget that enables you to A/B test multiple variations of content on your site. Variations are automatically assigned to visitors, ensuring each person receives the same version of the test—no matter how often they visit your site. Additionally, the widget tracks events, like clicks per variation, and sends the data to analytic tools, like Google Analytics or Mixpanel. You can use this data to get a better understanding of visitor behaviors and optimize your site performance.

 

Note: Google Data Studios (GDS) supports Wix data sources only for domain-connected Premium sites. Find out more about using GDS with Wix.

How We Built It

Page Elements


We added a box slideshow element to our mediaBox. The slideshow works as a container for the variants we want to test. We used two slides for the A/B test, making minor changes to the design of each slide. Then we changed the slideshow settings, turning off “Autoplay on load”. This ensures visitors only see one variant of the test.

Properties


We added the following property to our widget:

  • tableName: This property sets the name that will appear in the Untitled Data Source page of GDS.

Code

 

  • Using the bucketify() function, assign a userID and testing variation for each visitor.

  • To track visitor actions, use the trackEvent method from the wix-window API. In this example, we tracked button clicks for each variant in the test.

  • Use the data from GDS to get a better understanding of which variants perform better and make necessary changes to your site.

Code Snippet

// Import the APIs that are used later in this code

import wixUsers from 'wix-users'

import wixWindow from 'wix-window'

 

/* Put the user in the "bucket" of users who are assigned a particular variant. Because the User ID is unique,

each user is always assigned to the same bucket.

This function uses modulo to determine which variant the user gets,

based on # of slides and User ID*/

function bucketify(userId, amountOfSlides) {

   const shortId = [...userId].reverse().slice(0, 10).reverse().join("")

   const userIdParts = shortId.split("-").map(x => parseInt(x, 16));

   const summed = userIdParts.reduce((a, b) => a + b);

   return summed % amountOfSlides

}

 

$w.onReady(function () {

   //Call bucketify with user ID and # of slides

   const slideToShow = bucketify(wixUsers.currentUser.id, $w('#variantSlideshow').slides.length)

   //Switch to slide assigned user by bucketify

   $w('#variantSlideshow').changeSlide(slideToShow)

   $w('#variantSlideshow').pause()

   getElementData()

})

 

//This function notes whether a button was clicked on the variant, so that you can track the clicks using GDS.

function getElementData() {

   $w("#variantSlideshow").slides.forEach(slide => {

       //Gets all of the elements, in this case, buttons, using getAll function

       const buttons = getAll("$w.Button", slide)

       buttons.forEach(button => {

           //Registers which element was clicked

           button.onClick(() => {

              wixWindow.trackEvent("CustomEvent", {

                   targetTable: $widget.props.tableName,

                   event: 'Custom event 1',

                   field1: 'field_value'

               });

           })

       })

   })

}

 

// getAll function gets all of the elements of the type elementType in the variant

function getAll(elementType, base) {

   if (!base.children) return base.type === elementType ? [base] : [];

   return base.children.reduce((acc, x) => acc.concat(getAll(elementType, x)), [])

}

Was this page helpful?

Any questions? Contact us or create a post in the App Builder Forum.

More Resources

Find all the information you need to get started on your next web component.

Learn how to get up and running with Wix App Builder fundamentals.

Learn more about the Wix App Builder and how it works.

Follow step-by-step guides to help you develop your next web component.

Take full control of your web components with Wix App Builder APIs.

Ask questions and get expert advice from Wix App Builder professionals.

Got questions? Find all your Wix App Builder answers here.