Configuring Personalized Text for Your VWO Campaigns

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

• Working with Personalized Text in VWO
• 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, enter the variable, label, default value (this acts as a fallback value if the value is currently unavailable), and the script.

Variable

In this field, enter a unique variable you want to work with. Ensure that the casing of this variable must match 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.

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 below image depicts that the text has been modified to show the value of the variable ‘firstName’ as a form of salutation to a logged-in user.

   

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. (Refer to the image below).
   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.

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.

Managing Saved Variables in Your VWO Account and the Concept of Global Variables

To manage your saved variables in VWO, go to Settings > Campaign, and scroll down to the Saved variables section.

This section displays the list of all the available variables to use in your existing and upcoming campaigns. 

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.

Global Variable

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, turn on the Global Variable toggle switch in the variable creation dialog.

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