Working with Dynamic Text in VWO

What if you could engage with your visitors by showing them exactly what they are looking for? Consider that you have a shoe store, and in the display window, you’ve placed football shoes. This interests few visitors, and they make a purchase; however, some are interested in golf shoes, and they do not make a purchase. Thus, if you place both the shoes in the display window, there’s a high possibility of more conversions.

Now consider if you could modify your website to show each potential customer exactly what they are looking for. This is what dynamic text does. 

Dynamic text on a webpage is the one that is different for different visitors on the website. For example, a website displaying the best restaurants around you based on your location or website displays air quality index data in real-time.  

These changes are typically based on visitor signals that include in-session behavior, visitor data, and other visitor characteristics. Employing dynamic text on your webpages helps create more relevant and tailored content for your website visitors such that there are more conversions on your website.

Benefits of Using Dynamic Text on your Website

• Make your webpages more interactive and intuitive
• Helps in eliminating the amount of unnecessary and redundant information shown to visitors
• Instead of creating a single landing page for your campaign, you can create one dynamic landing page and customize its content that fits specific visitor
• Enables you to create a personalized experience
• Increased conversion rates, bounce rates, and return visits
• Once the content is live, you don't have to maintain it often

Now, let’s have a look at how dynamic text works in VWO.

Dynamic Text in VWO

VWO enables you to configure and display dynamic text on your webpages with the help of capabilities present in the VWO editor. To do this, use variables in text or HTML to display their value directly or evaluate conditions based on their values to perform the required operations that result in output matching that condition. All this can be done in minutes without having to rely on your development team.

Before you configure the Dynamic Text in the VWO editor, ensure that the variables used in the operations are present on the page before the campaign gets executed.

Using the VWO editor, you can also use logical statements to display text based on a condition. For example, if a visitor is from location A, display “Congrats. We offer free shipping in your area” else display “Free shipping on orders above USD 99”.

Before using the Dynamic Text feature of VWO, we recommend you go through the list of Variables Supported By VWO Editor for Dynamic Text.

How Does Dynamic Text Work in VWO?

For displaying dynamic text on your websites, the VWO editor supports Embedded Javascript (EJS) syntax. This allows VWO to identify and perform Javascript operations that are embedded in HTML. The EJS code can be used for variables and run if statements, loops, etc.

Consider the following HTML statement:

<h1> Variable name: variable1 </h1>

Under normal circumstances, HTML would read ‘variable1’ as plain text and not as a variable. The compiler in the Editor converts this to a JavaScript function with adjustments made, which then renders this computed value on the page. This adjustment is typically in the form of <%= %> enclosing the script.

For example, <%= 5 + 5 %> would return the result 10 while regular HTML would read it as ‘5+5’. EJS allows you to write javascript embedded in the HTML code, which then needs to pass through a compiler to be executed.

In addition to performing mathematical operations and using variable values, EJS also allows us to perform control flows- such as ‘if’ statements and ‘for’ loops. To learn more about EJS, refer to this document.

Example Scenario-1: When a Variable Value is Displayed Directly

In an e-commerce website, welcome messages can be displayed to visitors for different product categories that can be obtained from the URL itself. 

For example, consider an e-commerce website abc.com, where a visitor, John, navigates to the ‘Shoes’ page - https://www.abc.com/shoe. A message can be shown to him along the lines of:

Welcome to our shoe store!

This can be achieved using the following HTML for the headline:

<h1> Welcome to our <%= location.pathname %> store! </h1>

Here, location.pathname refers to a global variable on the window that holds the data of the path name in the URL. In addition to this, you can also add the visitor name to make the message to make it more intuitive. The message may look something like this:

Hi John, welcome to our shoe store!

Here, the additional variable is the first name of the visitor. t can be used in this syntax:

<h1> Hi <%=  firstName %>, welcome to our <%= location.pathname %> store </h1>

Example scenario-2: When the Variable Value is Used as a Condition to Display the Corresponding Text

In the first example, the variables have been used to display the value directly. However, there are cases where a variable needs to be used to validate a condition. Let’s understand this with an example.

Consider an online business that offers same-day delivery. This might not be possible beyond a certain time in the evening, say 4 pm. Therefore,  if a visitor is shopping past 4 pm, the message should ideally talk about the ‘Next day delivery’.

To achieve this, declare a variable that fetches the current time from the window. This will use a conditional statement.

During runtime, ‘hour’ needs to be updated with the current hour value of the time of the visit. For this to be possible, the variable ‘hour’ can be populated with:

window.hour = (new Date()).getHours()

The date is a global function, and the getHours method is available on the date object created by the new Date(). Now in the headline (or any textual text element), add the following code:

<% if (hour<16) { %>
<h2> Same day delivery on orders placed before 4 pm </h2>
<%} else { %>
<h2> Next day delivery, assured! </h2>
<% } %>

These are simple ways by which variables can be used. The same example can be made more sophisticated to provide a more specific and personalized experience for your visitors. 

Using Conditional Statements in VWO

Let's understand how to use conditional statements in VWO.

IF statements in EJS

Let’s use the same example of a ‘variable1’ used in the above example. We can use the value of this variable as a condition to print specific output. Building towards that, consider the following snippet:

<% if( variable1 === "VWO") { %>
     <p> Great Tool </p> 
<% } %>

This typically adds the contents of the paragraph to the HTML only if the condition is true. So, if variable1 was not explicitly ‘VWO’, it would not provide set output.

Going back to the code block, we can see that every line is contained in the EJS  brackets. What is the difference between <%= %> and <% %>, you might ask. The answer is that when we include the =, whatever is in the space is returned to the HTML. While performing logic, the = does not need to be present since we do not want the logic to be added directly to the HTML.

To understand better, let’s have a look at another example:

<% if (age > 18) { %>
   <p> allowed</p>
   <%} else { %>
      <p> Not Allowed </p>
<% } %>

Here, the visitor's message is validated based on the ‘age’ of the visitor.

For loop in VWO

A ‘for’ loop to count numbers from 1 to 10 will look like this:

<% for(var i = 1; i <= 10; i++) { %>

   <%= i %>  

<%  } %>

Some Examples of Conditional Statements and Loops in VWO

To better understand the conditional statements and loops in VWO, let's look at some examples.

IF

Sample template

<% if (condition) { %>
Perform an operation if condition is true
<% } %>

Example:

IF ELSE

Sample template

<% if (condition) { %>
Perform an operation if condition is true
<%} else {%>
Perform an operation if condition is false
<% } %>

Example:

For more information around conditional statements and loops in Javascript, refer to this and its consecutive pages for detailed illustrations.

To learn how to configure Dynamic Text for your test campaigns, refer to Configuring Dynamic Text for Your VWO Campaigns.