How to create a countdown ad

For website owners seeking to boost engagement, countdown ads are an effective way to create a sense of urgency, often leading to a surge in conversions. These ads are viral during flash sales or events like Black Friday. They leverage the Fear of Missing Out (FOMO) to motivate users to take immediate action. 

This tutorial will walk you through creating a countdown ad and integrating it into your website’s sticky header bar. I will guide you in designing a template for such an ad and modifying the text, colors, and countdown. Moreover, it will consider the scheduling options of Advanced Ads to guarantee the ad’s timely appearance and disappearance following the countdown’s conclusion.

Create a new ad unit with custom code

To get started, ensure that your WordPress site has installed and activated Advanced Ads and the Sticky Ads add-on. This toolkit allows you to create appealing and engaging ads in your website’s sticky header or footer bar.

1. Navigate to Advanced Ads > Ads in your WordPress backend.
2. Create a new ad and select the “Plain Text and Code” ad type.
3. Then, paste the following code in the Parameter field.

<div id="sticky-banner">
    <p>Get a 50% discount on our products now! Offer ends in <span id="countdown"></span></p>
</div>

<script>
    // Set the end date (Year, Month, Day, Hour, Minute, Second)
    var endDate = new Date("Nov 30, 2024 23:59:59").getTime();

    // Update the countdown every 1 second
    var x = setInterval(function() {

        // Get the current time
        var now = new Date().getTime();
        
        // Calculate the remaining time
        var distance = endDate - now;

        // Calculate days, hours, minutes, and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result
        document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";

        // If the countdown is over
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>
Code language: HTML, XML (xml)

The above code creates a banner with a countdown timer. The timer calculates and displays the remaining time until a preset end date and time. Once the countdown ends, it displays the message “EXPIRED.”

Next, navigate to the Custom Code field and insert the following code:

<style>
#sticky-banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #003366; /* Dark blue background */
	color: white; /* White text */
	text-align: center;
	padding: 10px 0;
	font-size: 18px;
	z-index: 9999; /* Ensure the banner is always on top */
	box-shadow: 0 4px 2px -2px gray; /* Optional shadow for better visibility */
}

#sticky-banner p {
	margin: 0;
	font-weight: bold;
}
	
#countdown {
	font-weight: bold;
	color: #ffcc00; /* Countdown timer color */
}
</style>Code language: HTML, XML (xml)

This code styles your countdown ad. You can adjust its color, size, and position.

At this point, you have created your countdown ad. The next step is to deploy it by adding it to a sticky header bar on your website. In your WordPress backend, navigate to Advanced Ads > Placements, create a new placement, and select the Header Bar from the available placements.

Ensure to assign the ad you have just created and save the changes. You should now see your countdown ad in the sticky header bar on your website’s front end.

Schedule the countdown ad

Advanced Ads offers a scheduling feature that allows you to automate the start and end times of your countdown ads. Scheduling ensures your ad appears on time, showing up when your promotion begins and disappearing as soon as it ends. This strategy helps avoid wasting ad impressions and keeps your marketing messages up to date.

The date settings for scheduling your ads are in the top right corner of the ad edit screen, where you would typically publish your ad.

• Start Date: By default, this is the date you published the ad. Click “Edit” to change this date to a past or future one. The submit button’s label will reflect the changes.
• Expiry Date: To set an expiry date, you must first enable the “Set expiry date” checkbox. Then, you can determine the expiration date and time, after which the ad will no longer be loaded.

Remember, the purpose of scheduling your countdown ad is to ensure its visibility aligns with your promotional activities. This way, you don’t waste impressions on an out-of-date ad and can effectively create a sense of urgency, optimizing your conversions.

Conclusion on countdown ads

This tutorial has guided you in creating engaging countdown ads that drive urgency and boost conversions. While I focused on integrating them into the sticky header bar due to its high visibility, remember that you can effectively place these ads anywhere on your site, depending on your specific needs.

The crux of countdown advertising is stirring a sense of urgency among your site visitors and encouraging prompt action. Therefore, placing it strategically for maximum visibility and impact is crucial.