Recording Variations

wf.onVariationRecorded()

Registers a callback function that executes whenever a variation runs successfully on your page. This is useful for integrating Webflow Optimize’s experiment data with external analytics services.

Before using this method, make sure you’ve created and published at least one variation in Webflow.

Syntax

1wf.onVariationRecorded(function(result))

Parameters

  • function(result): function - A callback function that receives a result object containing information about the variation.

    The callback function will only trigger for variations that run after it has been registered on the page.

Example implementation

1// Call wf.ready() to ensure the Browser API is available
2wf.ready(function(){
3    // Register the callback function inside wf.ready()
4    wf.onVariationRecorded(function(result){
5      console.log(result) // Log the result to the console
6    })
7})

Returns

A success callback which includes the results of the successful variation.

Object properties

PropertyTypeDescription
experienceIdstringUnique identifier for the experience/experiment
experienceNamestringDisplay name of the experience/experiment
experienceType'ab' | 'rbp' | 'cc'Type of experience: A/B Test (ab), Rules-Based Personalization (rbp), or Content Configuration (cc)
variationIdstringUnique identifier for the specific variation
variationNamestringDisplay name of the variation
ccStatus'holdout' | 'optimized'For Content Configuration experiences only: indicates if the user is in the holdout group or receiving optimized content

Example

1{
2    "experienceId": "417228929",
3    "experienceName": "Hero Optimization",
4    "experienceType": "rbp",
5    "variationId": "617106113",
6    "variationName": "Desktop",
7    "ccStatus": "optimized"
8}

FAQs

To make sure your callback fires, call onVariationRecorded() as early as possible to guarantee it’s registered before Webflow returns any recorded variations. Preferably, before the DOM starts rendering. This prevents the callback from missing any variations. To illustrate:

Timing your script to run after a variation is recorded

We recommend adding the API call in before the closing </head> tag of your site or page using Webflow’s Custom Code feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag.

A variation is considered recorded when the page loads and the variation has been displayed to the user. You can review the full logic that leads up to a recorded variation in this help article. A simplified version of the logic is as follows:

  • A variation is selected by Webflow Optimize
  • That variation is applied to the page
  • Events, like the selected variation and integrated analytics, are sent asynchronously
  • Webflow Optimize records the variation

Each time a variation is recorded, the callback fires. You may have multiple variations on a page, so the callback will fire once for each variation.

Built with