Engage users with countdown
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 dynamic content 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 :. A counter.
Firstly, you will need to create an
id attribute to mark the container in which you
to display the counter. It might be on the
<p> element for an inline solution or
<div> element were you to create a more visual version.
Next, the spans. Add empty
<span> elements with the
change it as time passes. You can add just hours, or you can go for full spectrum.
For example, did you know there is only days hours minutes and seconds left till 50th 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
var days = (...)
'days': days, from the return statement).
The second function is responsible for finding the
id attribute and
elements we created in the HTML part and updating the countdown every second. Simple and only
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
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
var 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
example of an ISO 8601
var deadline = new Date("2019-07-20T20:17:00+00:00").getTime()
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.
var deadline = new Date("2019-01-31").getTime()
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.
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
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.
var deadline = new Date("<span class=eloquaemail> Date_Field_Merge1 </span>").getTime()
Wondering what will happen with visitors that don't have this date value? With just field merge such users will see the counter set to zero right from the start. Of course, we would rather not have it that way. Let's create a remedy with yet another marketing automation tool - dynamic content (that's Eloqua name for a content element that adapts to the visitor depending on the value in the data model). Just wrap the HTML part of a counter and set it to be visible only if the visitor has a date value in the field used in field merge (or even when it is also within the chosen timeframe).
And use it hard. Example? 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. 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.
<span elqid="001" elqtype="DynamicContent" class="remove-absolute" style="display: block"></span>
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.
Mateusz Dąbrowski — 21.07.2018 — Code Automation