Dynamic text adds another avenue to your Testing and Deploy initiatives with VWO. It allows you to present content that is more engaging, concise, focused on improving conversions and enables visitors to get through your conversion funnel in a smooth and quick manner. All of this can be achieved with minimal to no dependency on your ability to write code.
What Dynamic Text?
Any text element on the page- be it headings, blocks of paragraphs or the text present in CTA buttons, is usually static. Attempts to improve and test them generally remain confined to static content. The example that follows can show you how using Dynamic Text can help add another dimension to a test.
Let us say you are trying to improve the messaging around your shipping policy, to understand its effect on the checkout process. If you offer free shipping for orders of above $200, an appropriate message can be shown to your customer based on the current value of their cart. If the cart value is say, $180, the message can convey that adding items worth $20 would give them free shipping, effectively making it an up-sell opportunity. By experimenting with different types of such messages which are based on the value of the cart, you can study the effect it has on the checkout process’ conversion rate and zero-in on what works the best.
Just to demonstrate how easy it is to generate Dynamic text using variables in VWO, check out another simple example where the name of the customer is fetched from a variable and simply used to greet them if they are logged in.
Why is this needed?
Website experiences are built with a lot of information about the visitor. This is usually a combination of general demographic data such as source, location, time of visit etc., and customer-specific information such as past purchases, past content engaged with, average order value, frequency of purchases and a lot of other things. All these factors add up to build a ‘profile’ of a visitor whose probable expectations are delivered with matching experiences.
These factors are used extensively to test and deliver great experiences for visitors in an overarching manner. The text copy on the page, on the other hand is usually worked on from a very static point of view. If made dynamic, the functional aspect of it can be made more engaging and direct and help test and optimise the website in interesting ways. This is achieved with the help of ‘variables’, similar to how templates are created for mail merge. Text generated for the website using such variables are generally to
- directly show the value of a variable; e.g. greeting the user with their name once they login. Here, the variable is the Name of the user, which is directly shown in a headline element.
- use the value of the variable as an evaluation criteria and show corresponding content; similar to the free shipping example described above. Here, the ‘cart value’ is evaluated to display a corresponding message.
You notice that using such ‘variables’ in text elements forms the crux of generating Dynamic Text. To get a detailed understanding of what variables you can use with VWO to generate dynamic text, do check out this article.
How does this work?
VWO uses Embedded Javascript (EJS) format to identify and perform Javascript operations that are ’embedded’ in HTML.
The following shows the difference between using plain HTML and one with dynamic text (variable) to show how they differ in syntax and how they function.
<h1> Hi firstName! </h1>
would render as plain static headline text: Hi firstName!
But in case of
<h1> Hi <%= firstName %>! </h1>
when John visits your website, the headline reads: Hi John!
As you notice, the magic lies in the <%= %>, which helps VWO identify that anything between them is to be evaluated dynamically.
You can even use advanced conditional statements like ‘If Else’ or loops like ‘Do while’ to create dynamic variations leveraging the power of data available on the page or from external sources.