Create or edit a code-based audience

Updated

Define an audience with JavaScript to target subsets of your website visitors with variations.

Audiences are subsets of your site visitors that you can explicitly target or restrict from seeing variations. For instance, you might want to show specific messaging to visitors in New York, visitors who received a specific email campaign, or visitors who recently viewed a specific page on your site.

There are two types of audiences you can create. Rules-based audiences target visitors based on criteria you choose — traits (e.g., mobile device), behavior (e.g., viewed a webpage), or integration data (e.g., Marketo: company name). Learn how to create rules-based audiences. Code-based audiences let you target visitors based on custom JavaScript code that you write.

Important

JavaScript conditions must evaluate to true or false. A visitor matches if conditions evaluate to true.

How to create a code-based audience

To create a code-based audience:

  1. Go to the Insights panel
  2. Click Audiences
  3. Click New Audience
  4. Click Code Your Audience
  5. Enter a descriptive Audience name
  6. Enter your audience’s JavaScript code
  7. Click Save

How to edit a code-based audience

Important

If the audience is already in use through variations, editing the audience will impact who sees those variations.

Go to the Webflow Designer:

  1. Go to the Insights panel
  2. Click Audiences
  3. Choose an audience to modify
  4. Make your desired changes
  5. Click Save

Example of a code-based audience

You can use JavaScript to define the minimum screen height so that a large image in a variation is only shown to visitors who can see the full image on page load. In this example, the audience must have a screen height of 760px or more.

(function() {
  return window.innerHeight >= 760;
})();

Related articles