Start boosting conversion rates right now! There are many ways to engage customers, and urgency is the king among them. Learn how to leverage it today.
- Learn how to implement the solution
- Adapt it to the story you are telling
- Leverage personalisation for even better results
Lured visitors to your landing page? Great! Now it is time to convert them to your cause. Whitepaper download, product purchase or enrollment, doesn't matter. In each case, you will fight for the attention of the user and drive him towards the goal set for him. It's not easy in the modern web environment, but even the basics might give you the upper hand.
Let's talk about a simple solution you can implement on your landing page in just 8 minutes and 0 seconds — a counter.
Firstly, you will need to create an
id attribute to mark the container in which you want to display the counter. It might be on the
<p> element for an inline solution or on
<div> element were you to create a more visual version.
Next, the spans. Add empty
<span> elements with the
For example, did you know there is only 1398 days, 13 hours, 30 minutes and 54 seconds left till 55th anniversary of the first moon landing?
The first function does the math behind countdown. With the deadline set for the counter and the current time took from visitor's hardware, it calculates the remaining values of each time unit.
Remember to keep there those and only those units that you actually use in your counter. The rest should be deleted (for example, if you want to get rid of the day unit, remove both the
const days = (...) line and
'days': days, from the return statement).
The second function is responsible for finding the
id attribute and
<span> elements we created in the HTML part and updating the countdown every second. Simple and only possible edit would be to delete the line with time unit that will not be used, just as mentioned above.
The job of the last one is to swap span elements targeted in
initializeClock to values calculated by
getTimeRemaining - and to stop counter refreshing after it gets to zero. Again - only edit needed would be to delete the unneeded unit.
To not leave you with “delete this, delete that” talk and empty hands, feel free to take a look at a simplified sample code that counts only days. As for the placement in your code - it will be best to put the
<script>(...)</script> part right before the closing
Time for the important part - the one you will always edit. The counter's deadline. You probably already noticed
const deadline in the sample and guessed it is the line we will focus on now. It might look a bit intimidating with the weird structure, but in this way, it actually gives you a lot of power. This date formatting is an example of an ISO 8601 standard.
To use it, insert date in a YYYY-MM-DDThh:mm:ss +hh:mm format. The T is just a delimiter between date and time, +hh:mm, on the other hand, allows you to add time variable (for example summertime change).
However, depending on the needs, you may want to use other available formats, for example, simplified only-date format perfect when you need to count days.
Another option is to calculate the amount of time to count down from instead of a static end date. It might be a much better solution if you want to create a feeling of pressure for a small task or engage visitor without a real deadline on your side.
To use this solution, you need to declare the starting value. In below example, it is set to 15 days. The code multiplies 1000 milliseconds times 60 seconds times 60 minutes times 24 hours. Want to count 5 minutes? Go for 1000 60 60 * 5.
Take advantage of dynamic content
Simple countdown on landing page already can make an enormous difference to your conversion rate. But, of course, you can get even more out of it by using the toolset of your marketing automation tool.
There are many cases where urgency is a perfect solution, however, not always all visitors should see the same timeframe. An example? Renewal notification that counts downtime before a subscription expires. Instead of a static product end date, implement the counter and put some pressure with seconds running out in real-time.
- Salesforce Marketing Cloud
- Oracle Eloqua
In Salesforce Marketing Cloud, you can use either AMPScript personalisation string or SSJS personalisation string:
Wondering what will happen with visitors that don't have this date value? With just personalisation string such users will see the counter set to zero right from the start. Of course, we would rather not have it that way. Thankfully SSJS personalisations strings allow us to add default value very easily:
You can also easily create a dynamic content block that will be visible only when the date from personalisation string is soon enough, by leveraging a simple
if/else logic of SSJS.
Use it hard. How? Put that renewal offer with a counter inside a dynamic content and insert it into every content landing page. Simple and quick solution to make sure your customers will be notified when they should. You can also put single dynamic content box related to events or webinars and push information with the counter about the nearest happening one. Just be sure to leverage dynamic content options to show different texts depending on visitor persona. And, of course, update that dynamic content after the event.
What next? Take the code, implement on a landing page, build an urgency fueled story and watch boosted engagement do its job. You can count on it.
You Should Know
Multiple solutions create dynamically changing .gifs that allows you to create a real-time timer in your email. I'm using Sendtric. A different approach, same engagement boosting value.