This article covers the following: Overview Creating Variables using VWO Editor Javascript Variable Event-based Variable Applying Variables in VWO Inserting a Variable using the Edit Element Operation Inserting a Variable using the Edit HTML Operation Inserting a Function using the Edit HTML Operation Using Variables in Widget Triggers Using Variables in Pre-Segmentation

Overview

Before you start configuring Personalized Text on your Website using VWO, we recommend you go through these articles:

• Working with Personalized Text in VWO
• Advanced Personalization in VWO using Event-Driven Variables
• Variables Supported By VWO Editor for Personalized Text

In VWO, when you create a campaign using the Editor, the variables can be declared and introduced as part of the Edit element and Edit HTML operations. To declare a new variable using either of these operations, click on the (x) icon ( refer to the image below) and select the Declare a new variable to declare a new variable.

          UI for Edit Element                                                                 UI for Edit HTML

In the dialog box that appears, configure the required details. See the next section for more information.

Creating Variables using VWO Editor

Types of Variables

Javascript Variable

Variable Name

In this field, enter a unique variable you want to work with. Ensure that the casing of this variable matches the one present on your website. 

Label

In this field, enter a label that helps you quickly identify your variable. This is only for your reference and does not affect how the variable is used.

Default value

This is the fallback value used if the variable you declared is not available when the campaign executes, i.e.,  VWO will use this value instead of showing a blank value. For example, a website greets its visitors with their first name. Here, if the first name is not available, a default value of ‘there’ can help. So when the name is not available, it will simply read, ‘Hi there!’

As soon as you enter the default value, you will see a custom script in the Script section generated automatically.

Every variation of a campaign can have different default values and scripts for a variable. All you need to do is, edit the value from the sidebar. Click on View details for the variation in the variation dropdown, and switch to the Variables used tab. 

Editing the value will apply only to that variation. These latest values will be used as the default values for upcoming variations in the campaign. The existing or older variations will not be affected.

Script

If the variable is present in the window object, you do not have to provide any script; VWO will automatically generate the script to pick it up and use it to modify the text accordingly. However,  if the variable needs to be picked up from another location, such as a local object in the window or the cookie, you must add the script to get the variable.

For example, to get the status of whether a user has completed onboarding (with the key- ‘onboardingComplete from the local storage), you can use a script like the one that follows:

function() {
return window.localStorage.getItem(‘onboardingComplete’);
}

When a variable is declared, you can save the variable in the account to be reused in other campaigns. In VWO, you can manage all the declared variables from the Account > Campaign Settings section. Here, you can even declare new variables and modify the existing variables.

Global

A variable can be applied to different campaigns. However, any modification in the variable definition does not reflect in the existing campaigns that are using it. It can only be applied to new campaigns.

To have the changes reflected in all the existing campaigns, a global variable should be used. 

A global variable is one, where the modifications applied to the variable definition will reflect in all the campaigns that are using it, irrespective of their running state. To create a global variable, go to Account > Campaign Settings section, turn on the Global Variable toggle switch in the variable creation dialog.

Deleting a global variable will return a null value, wherever they are used in the existing campaigns.

Event-based Variable

Variable Name

In this field, enter a unique variable you want to work with. Ensure that the casing of this variable matches the one present on your website.

Label

In this field, enter a label that helps you quickly identify your variable. This is only for your reference and does not affect how the variable is used.

Visitors who performed

Click the dropdown. The My Events tab lists all the custom events created in your account. Select an event that will be used in the variable's calculation. Click + and where to specify the event property. Select the event property from the dropdown to filter the visitors. You can provide the property’s value in three different ways:

• Manual Input - This method can be used when you want to filter events for a hard-coded property value. For example, you created a variation to show the total unique visitors who purchased the Pro Personalize plan, you can create a variable for this metric and use Manual Input to enter the plan ID associated with that plan..
• On-page variable - Use this method when the same variable is applied across multiple pages, and its value needs to update based on the specific page being viewed.
  For example, if you’ve created a variable to track the number of unique visitors who purchased the plan shown on the current plan page, the system needs to identify the plan_id when the visitor lands on that page. With this option, you can reference a JavaScript variable available on the page that holds the plan_id value.
  
• Event - This use case is similar to using an on-page variable, but instead of referencing a JavaScript variable, you provide the plan_id from a custom event. You can use the same event that was used to create the variable or any other event that includes the plan_id property. For example, a planViewed event). Ensure that this event is triggered every time before the variation changes are applied.
  

In time period (days)

Specify the time window in days over which the event data should be aggregated.

Variable will return

Select the desired aggregation type from the dropdown based on your use case.

• Unique Visitors - Returns the total count of distinct visitors that fulfill the event criteria within the set time window. This ensures each unique visitor associated with the event is counted only once, regardless of how many times they performed the action.
• Event totals - Returns the absolute number of times the selected event was triggered, fulfilling the event criteria within the set time window.
• Value of an event property - Returns the summary value from a designated property found within your filtered event data. You can use this for those events that involve properties with numerical values. To apply this, you need to define the event property and its corresponding value type (Sum, Average, Max, Min, First value, and Last value). For instance, you could get the 'Total quantity of items purchased' using per visitor for property quantity. This will give the sum of quantity for every visitor.

Event-based variables are created at the account level and can be managed from the Account > Campaign Settings section. From this section, you can declare new variables or edit existing ones as needed.

Applying Variables in VWO

Inserting Variables in Text Elements Using the VWO Editor

For any text element present on your webpage, there are two ways by which you can insert variables:

1. Using the Edit Element operation
2. Using the Edit HTML operation

Inserting a Variable Using the Edit Element Operation

To insert a variable using the Edit Elements operation of VWO editor, perform this:

Procedure

1. Login to your VWO account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. In the VWO editor, click on the text element to insert the personalized text and choose the Edit Element option.
7. In the Text field, look for an icon represented by (x) and click on it.
   The list of variables that can be used in the element appears.
8. To insert a variable in the selected text, select any variable from the available options or declare a new variable. (Refer to the image below).

9. The image below shows that the text has been modified:

   • To show the value of the variable ‘firstName’ as a form of salutation to a logged-in user.

     

   • To show the value of the variable for displaying the total number of products purchased.
     

Inserting a Variable Using the Edit HTML Operation

To insert a variable using the Edit HTML operation of VWO editor, perform this:

Procedure

1. Login to your VWO account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. In the VWO editor, click on the text element to insert the personalized text and choose the Edit HTML option.
7. From the right top corner of the HTML dialog, click on the (x) icon to add a variable.
8. To insert a variable in the selected text, select any variable from the available options or declare a new variable. Similar to the Edit Element operation, this text is now modified:
   • To show the value of the ‘firstName’ variable when a logged-in visitor visits the homepage.
   • To show the value of the variable for displaying the total number of products purchased.
     

Inserting a Function Using the Edit HTML Operation

Using the Edit HTML operation of the VWO editor, you can insert some essential functions into the HTML directly. These include conditional statements like IF, ELSE IF, and loops like FOR, DO, and DO WHILE. To insert these functions, perform this:

Procedure

1. Login to your VWO account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. In the VWO editor, click on the text element to insert the personalized text and choose the Edit HTML option.
7. From the right top corner of the HTML dialog, click on the fx icon to view the list of functions.
8. Select between ‘Conditional’ statements and ‘Loops’ using the dropdown menu.
9. You can preview a function on hover.
10. Click on '+' to insert it at the cursor location in the HTML of the element.

Using Variables in Widget Triggers

Procedure

1. Log in to your VWO account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. In the VWO editor, add a widget on the page.
7. Go to Widget settings > Trigger Conditions > When is widget shown.
8. Under Custom Trigger, select Variable condition.
9. Select the variable with the minimum value to trigger the widget shown event.
   

Using Variables in Pre-Segmentation

Procedure

1. Log in to your VWO account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. Create the variation or experience.
7. Go to Audience and Traffic. If you are in a Personalize campaign, go to Targets.
8. Click Select Visitor Segment for the experience.
9. Select Custom Segment , click the drop-down, and navigate to the Variables section.
10. From the first dropdown, select the required Variable.
11. In the second dropdown, select the appropriate operator and enter the desired value in the field next to it. For example, you want to show the experience when productPurchase is greater than 1000.
12. Similarly, you can use the Variable in Testing campaigns under Audience and Traffic.

Need more help?

For further assistance or more information, contact VWO Support.