Enable custom attributes in Webflow Optimize

Updated

Add custom attributes in your Optimize settings to filter results and/or target visitors with optimizations.

Attributes are characteristics associated with your visitors (e.g., demographics). You can use a Webflow API to set custom attributes for visitors that leverage data you’ve learned, collected, or acquired. In Optimize, you can then add custom attributes to leverage as optimization results filters or as optimization audiences to target visitors.

How to set custom attributes for each visitor

To set a custom attribute, you can use the wf.setAttributes() Browser API.

Note

Developer documentation for the Optimize APIs are coming soon. Details are provided below in the interim.

API details

wf.setAttributes() API:

var scope = 'user'; // or 'pageview'
var attributes = {
    myName: 'myValue'
};
wf.setAttributes(scope, attributes);

The API call must be wrapped in a wf.ready() callback:

wf.ready(function() {
  wf.setAttributes(scope, attributes);
});

API info

Set attributes (a JSON object literal with string names and string values) for either a user or pageview scope. The scope determines the lifetime of the attributes.

  • Attribute names must be less than 40 characters long and may not contain a “=” character
  • This function attempts to convert values from types like boolean and number into strings for convenience. Don't rely on this conversion and always pass in string values for attributes.
  • If some attribute name/value pairs fail to be stored because they are invalid, the valid attribute pairs will be stored

How to enable a custom attribute in Optimize

Open the site in Webflow, then:

  1. Go to the Insights tab
  2. Click Integrations
  3. Go to Custom JavaScript attributes
  4. Click Add JavaScript attribute (for the first entry) or Edit > New entry (for subsequent entries)
  5. Enter the attribute name you set with the API
  6. Click Save

How to delete a custom attribute from Optimize

Open the site in Webflow, then:

  1. Go to the Insights tab
  2. Click Integrations
  3. Go to Custom JavaScript attributes
  4. Click Edit
  5. Click the Delete icon to the right of the entry
  6. Click Save

How to leverage custom attributes in Optimize

Custom attributes added to Optimize are available as optimization results filters and as attributes for rules-based audiences.