Advent Calendar Teaser

How We Built An Interactive Holiday Calendar Using Justuno

Home » Holidays » How We Built An Interactive Holiday Calendar Using Justuno

If you haven’t already, take a minute to go sign up for the first-ever Justuno December holiday calendar. Starting on December 1st, we’ll have 24 days of marketing fun with exclusive discounts, animated promo templates, and more.

The best part? We built this interactive onsite experience using a basic landing page and Justuno’s platform! Our marketing team wanted to create something new that went beyond just a basic email collection promotion to show how advanced your onsite marketing strategy can be with Justuno.

Check out how we built this experience with advanced targeting rules, a little CSS knowledge, and holiday cheer.

The idea

The webpage was created using WordPress and Elementor to show a stylized calendar with 24 clickable “doors.” A full-page takeover promotion is used to gate the page for lead generation purposes. Once a visitor has opted in, though, they have access to the calendar all month long. The idea was to create a separate promotion for each day, 24 in total. As each day passes and a visitor returns, they will see only that day’s pop-up fire with their holiday treat. If they want to go back and click on another day they missed, that would refire the pop-up of the day.

How we made it work

With so many pop-ups at play, we knew it was critical to get the rules right. If we weren’t able to properly organize and target the pop-ups, we’d be creating a webpage with almost 30 different pop-ups firing on it and a guaranteed nightmare user experience.

For the landing page gate, if a visitor decides they don’t want to opt in after all, the close button will simply take them back to the home page. Every single visitor to the page needs to see this pop-up until they opted in since it is functioning as a page gate and it won’t fire again once they’ve opted in. To make this work we used the following advanced targeting rules:

  1. Their current URL is equal to the December Holiday Calendar URL
  2. They have not engaged with the form on the landing page promotion.
  3. They’ve spent less than 1 second on the current URL 

For the daily pop-ups we needed to create more complicated rules. We wanted these to fire daily but also remain available for visitors to engage with once their designated date had passed. 

These rules set up each pop-up to fire only on their corresponding day, as long as the visitor has engaged with the full-page landing gate and will fire only on the December Holiday Calendar URL.

For the daily firing rules we used the following:

  1. Their current URL is equal to the December Holiday Calendar URL
  2. Their local date is exactly the corresponding date
  3. They have ever engaged with the form on the land page gate

Next up we created the rules for re-firing the pop-up once its day has passed. To make this happen we assigned each “door” a div id to reference in the rule set for it to “open” and show the pop-up again. To do that we used an OR modifier between the first set of rules and added the following:

  1. Their local date is after the day before the corresponding date (ex. 12/1 for the 12/2 pop-up)
  2. They have ever engaged with the form on the landing page gate
  3. When they clicked the corresponding div id element
Targeting Rules

Once the rules were set up we duplicated the promotions to make them  mobile-specific. These mobile pop-ups have the same rules as the desktop/tablet versions but we resized them for smaller screen sizes.

It’s worth noting that technically these pop-ups aren’t in line with Google’s mobile best practices. There is a landing page gate that “interrupts” the mobile browsing experience and each pop-up isn’t set to fire after % scroll or pages clicked, and the daily pop-ups aren’t banners taking up 20% or less of the screen space.

Since this was designed as a temporary interactive site experience that visitors would be seeking out and engaging with, we decided that the lack of compliance with best practices was okay but we would not recommend this mobile strategy beyond a special campaign like this.

Offsite details

Once a visitor has opted into the December Holiday Calendar they will receive a welcome email  explaining how the calendar works and an option to select their email frequency, daily or weekly.

From there depending on their selection, they will receive daily reminders to claim their gift or weekly round-ups of the calendar content. By letting visitors self-select their email frequency, we are able to segment more engaged audiences from less engaged for more personalized communications.

Beyond the pop-up

There’s no limit to how Justuno can augment and improve your site experience, whether you want to primarily collect emails, suggest products, use in page promotions to change entire page layouts, and more.

Combining advanced targeting rules with exciting marketing ideas is all it takes to take your site experience to the next level with Justuno.

Figuring out the logic for how to make the targeting rules work to create the experience you want is the hardest part. Building advanced campaigns like this one is easy with Justuno and can take your brand experience to the next level.

Final thoughts

We had a blast creating this idea and making it a reality this month. If you haven’t signed up yet, don’t miss out on seeing this strategy in action.  

If you want to check out more examples of advanced use cases for Justuno, be sure to explore the Academy with courses covering how to increase ROI from Google ads to targeting perpetual window shoppers.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on email

This free and instant analysis of your website performance will show you what Justuno can do for your business.

Please enter a valid URL
Please enter a valid email address
Progress Bar
COMPILING YOUR REPORT
Report Ready
Justuno Visitors