Skip to main content

Running variant code without the Web Editor

Joshua Barnard
  • Updated

Sometimes code needs to live with developers instead of in a project managed by Evolv AI. This article describes how to update the context, listen for variant keys, and take the right action when required.

Table of Contents

The example below assumes you have the web snippet installed and can be adapted when implementing Evolv AI via the SDK.

We'll create a couple of variants in the Evolv AI Manager that pass a URL value when the variable key is active, with the website taking action using the value it receives.

Define the variable key and add variants

Evolv AI is responsible for allocating combinations to users. Those combinations contain variants that the Evolv Client knows about. You can use the client to identify variants, but first, you must create them.

  1. Open the Evolv AI Manager and create a new project or modify an existing project.
  2. From the Draft tab, select the Variants option in the side navigation.
  3. Add a new Group and Variable using the plus buttons when you hover over the existing rows. 
    • I created a "Landing Page" group with a variable called "Redirection." The landing page is a context that targets a specific web URL.
    • You might only need a variable. I added a group so I can demonstrate targeting using context values in the next section.
      mceclip0.png
  4. Click on the variable to open the side panel.
  5. Give the variable a name, enter a key, or click the keyboard icon to auto-generate a key.
    • You can decide whether you want to use a human-readable name or not. The same applies to the group.
    • The key is what we'll use to identify the variable when the page loads.
    • In this example, I used a generated key for the group and named my variable key "redirection" to make it easier for the developers to know what it does.
      mceclip1.png
  6. Click to edit the CONTROL variant.
    • Replace the JSON code with an empty object {} or add values if required.
  7. Click the NEW VARIANT button to add some variants.
  8. Click to edit each new variant and update the JSON code with the data you want to make available when the key is active.
    • In this example, I've added a URL to be used for the redirect.
      mceclip2.png
    • SAVE the changes and move the project live when ready.

Update the context for variable or audience targeting

Updating the context is required if you want to narrow your target audience. You can target visitors at any level, from the project right down to the variable.

Add the targeting criteria

Update the context

The project and variable audiences must match to activate the variable key we created earlier.

If you added a custom attribute in the previous step, this is how you activate the audience.

evolv.context.update({myKey: "myValue"})

Here's an example that uses a query parameter.

const params = new URLSearchParams(window.location.search);

evolv.context.update({
 search: Object.fromEntries(params)
 });

Access the context

Access to the stored context values is helpful when testing and troubleshooting.

You can request the entire remote context or a specific context item.

mceclip2.png

mceclip3.png

View the documentation for more information about using the EvolvContext.

Execute variant code

You only want to execute variant code when the correct key is active. Keys become active when the audience and variable targeting criteria are matched.

Use the EvolvClient to listen for active keys, then execute the variant code.

To make life easier, I've assigned the client to a constant.

const client = window.evolv.client;
  
 client.get("landingpage.redirection").listen((v) => {
  redirectVariant(v?.url);
 });

Here's a breakdown of what this code does:

  • Listen for active keys.
    • Keys are only active when they need to be. You don't want to execute code at the wrong time, so listening for keys is a vital step.
  • Loop through each of the active keys.
    • Get ready to "do something" with each of the active keys.
  • Find the key we want.
    • Execute the redirect code after finding the "Redirection" variable.

All of this code is bespoke. So long as you listen for the active keys and "do something" when you find them, the rest can be up to you.

The "redirectVariant" function in this example takes the URL value we created in the variant and changes the window's location.

function redirectVariant(url) {
  if (url && window.location.href !== url) {
   redirecting = true;
   window.location = url;
  }
 }

The complete code example is attached.

Video demonstration

Watch the video demonstration for an easy to understand view of implementing variants without the Evolv AI Web Editor.

Related articles