Skip to main content

Personalization and A/B testing

The personalization and A/B testing capabilities are fully integrated within Canvas via Uniform Optimize, another pillar capability of the Uniform Platform. The best part is that once your application is enabled with Canvas, activating Personalization or A/B testing does not require further code changes and is a couple of clicks away.

Before we begin

  1. Ensure your Next.js or Nuxt application is wired up with both Canvas and Optimize SDKs.

    tip

    In case if you deployed one of the Uniform demos from onboarding, such setup has already been done within that app codebase.

  2. We recommend you install our Uniform Optimize extension for Chrome, which allows you to interact with the Uniform tracker and simulate various intents.

Personalization with Canvas

In order to start using Personalization:

  1. Ensure your Canvas slot is enabled for Personalization. The Personalization component must be among the allowed components within the slot where you would like to personalize: Canvas slot

  2. Create at least one intent, see this article for more info (skip step 3).

  3. Publish the newly created intents from the Personalization tab: Publish intents

  4. This will make it possible for the Personalize This button to appear. Click it. Personalize this

  5. After Personalize This is clicked, the component is converted to a container, allowing to add any number of personalization variants within it:

    Personalization container

  6. Tag this component with the intent you just created:

    Intent tagging

  7. Add another instance of the component by clicking on the green hairline with the plus icon around the existing Hero component, which will be a default variant. We won't associate any intent with this one.

    Default variant

  8. Finally, click on the parent Personalization container and provide a rememberable name inside Analytics tracking name. This name will be used in the personalization analytics reports, as it will be attached to each event fired after personalization takes place. This allows to track the most effective personalization variant.

    Analytics tracking name

Done!

That's it! After you publish this composition, the personalization will be running on your site.

A/B testing with Canvas

The A/B testing works in a very similar fashion to the way Personalization works. If your application is already enabled with Canvas and Optimize SDKs, no code changes are needed in order to start A/B testing. With Uniform, you can A/B test different components, different display variants of the same component, or different content copies using the same component for presentation.

To start using A/B testing:

  1. Ensure your Canvas slot is enabled for A/B testing. The A/B test component must be among the allowed components within the slot where you would like to apply it: A/B testing slot activation

  2. Create at least one test from the Tests tab by clicking the Plus button and entering the name of the test. Create A/B test

    Tip

    This name will be visible in analytics reports, so we recommend using a human-readable name here.

  3. Publish the newly created test from the Tests tab: Publish test

  4. This will make it possible for the A/B Test This button to appear. Click it.

    A/B Test This

  5. After A/B Test This is clicked, the component is converted to a container, allowing to add any number of test variants within it:

    A/B Test container

  6. Add another instance of the component by clicking on the green hairline with the plus icon around the existing Hero component, which will be a default variant A/B Test another instance

  7. Finally, click on the parent A/B Text container and select the test that we created during step 1: Select A/B Test

Done!

That's it! After you save and publish this composition, the A/B testing will be running on your site.

When you need to declare a winning variant, you can click the Declare Test Winner, and the A/B Test container will disappear, selecting the winning variant to stay in place of it.