Configuring Dynamic Text for Your VWO Campaigns

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

• Working with Dynamic Text in VWO
• Variables Supported By VWO Editor for Dynamic 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 in case the value is currently not available), 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 with one present on your website. 

NOTE: The variable should not have spaces, symbols, punctuation marks, 
and must start with a number.

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, which is 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 that 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.

NOTE: If the custom script is edited, the default value gets disabled. 
Ensure that the fallback is incorporated in the custom code itself if
required.

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 for 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’);
}

NOTE: Only synchronous functions are supported and the function must
return a value.

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.

NOTE: Any changes made to existing variables would be available 
in new campaigns only, and new variables would be available in 
all campaigns.

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 dynamic 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 dynamic 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 inserts 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 dynamic 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 the Saved Variables in Your VWO Account

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

This section displays the list of all the variables that are available to use in your existing and upcoming campaigns. Here, you have the option to add or modify the labels.

When a variable is modified, the change does not apply to the campaigns where it is already used, i.e., modifying a variable doesn't affect the existing campaigns. It only applies to the new campaigns or when the variable has not been used in the existing campaign.

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