Solved

Rotating/Changing Sticky Bars

Z

Hello!

I’m not sure if this has already been asked elsewhere, so please forgive me if it has!

Is there a way to run multiple sticky bars simultaneously that rotate or change? For example, I could have two sticky bars. The first might say “Claim 35% off your next order now! Click here to learn more.” The second might say “Hot deals ending May 15, 2018!” The first sticky might display for 5 seconds then be replaced by the second, then the second sticky might display for 5 seconds then be replaced by the first, and so on.

Is this possible? These are just examples, but I thought it would be a cool feature.

Thank you for your time and support! 😀

Zach

icon

Best answer by Luis_Francisco 17 May 2018, 20:34

View original

7 replies

Nicholas
Userlevel 7
Badge +4

Hmm, great question. I’m not aware of an easy way to do this without a lot of custom coding. But you can create different A/B variants of your sticky bars. They wouldn’t rotate like you described though. Once a visitor sees a specific variant, they would keep seeing that same one. Would that work?

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
Z

Yeah, I have looked at A/B testing for single sticky bars. I was going for an increase in anxiousness to click with rotating sticky bars that would grab user’s attention while interchanging. Maybe it wouldn’t increase a conversion rate, but I figured it might. Maybe someone will end up coding it! 🤣

Luis_Francisco
Rank
Userlevel 3
Badge +1

@Zachary i wrote a script for you 😉

<script>

 //getRandom will pick a random number from min to max 
 function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}


 var w = window.location;

  if (w.search.indexOf("offer") == -1) {
    window.location = w + (w.search.indexOf("?") == -1 ? "?" : "&") + "offer=" + getRandom(1, 4); //Define here the amount of offers Eg. if 4 offers = getRandom(1, 4)
}
      
</script>

This will append “offer=X” to your url path every time the page loads, where X is a random number that you are gonna define by replacing getRandom(1, 4) with the range of different sticky bars you want.

After you add this script to the host page, it’s a matter of setting the targeting of each sticky bar to contains offer=1, offer=2, etc…

Let me know if this helps!

Luis_Francisco
Rank
Userlevel 3
Badge +1

oh i just noticed that i misunderstood what you wanted… but at least you can rotate based on each time the page loads and wont show the same one like on the A/B test.

Z

Hi @Luis_Francisco!

Thank you for this. So, rather than automatically rotating (after a few seconds), this code will produce one of the sticky bars randomly upon reloading the page? Is that right?

Zach

Luis_Francisco
Rank
Userlevel 3
Badge +1

Exactly @Zachary

Z

@Luis_Francisco awesome! Thank you for doing this, I really appreciate it 😀 😎

Reply


Terms & ConditionsCookie settings