Ødelægger en slide-in konverteringsraten?

Slide-ins er geniale. Altså sådan nogle som danske Sleeknote laver. Eller sagt på godt gammeldags dansk: En twami :)

De er geniale til at indsamle e-mail permission på et website. Og de er ikke så irriterende som pop-ups.

Eller er de?

Kan de være så irriterende at brugerne ikke konverterer og måske forlader sitet?

Det har jeg testet!

Indhold

• Byg en simpel slide-in
• HTML
• CSS
• JavaScript
• Hvornår skal den så vises?
• Vis på et tilfældigt tidspunkt
• Effekt på tilmelding til nyhedsbrev
• Effekt på læsning af blogindlæg
• Læst 33%
• Læst 66%
• Læst 100%
• Læst 100% + 1 minut
• Opsummering

Byg en simpel slide-in

Jeg lavede en simpel slide-in her på min blog.

HTML

Selve slide-in boxen er blot noget simpel HTML.

<div class="slide-in-box">
    <a href="#" class="slide-in-box-close"></a>
    <h3>Få gratis tips og tricks i din indbakke!</h3>
    <form action="" method="post">
    ... input felter ...
    </form>
</div>

CSS

Den kan styles på mange måder, men det vigtigste er at den har position: fixed så den er låst i bunden af skærmen og z-index: 99999 så den er “ovenpå” websitet. Derudover har den bottom: -100% som gør at den som standard er skjult “under” skærmen.

Når slide-in boxen skal vises, sætter jeg en .open class på den med JavaScript, som sætter bottom: 5px som gør at den bliver synlig 5px over bunden af skærmen.

transition: .5s bottom ease-in-out tilføjer en animation når værdien af bottom ændres, som gør at den “slider” op nedefra.

.slide-in-box  
  z-index: 99999  
  position: fixed 
  bottom: -100% 
  transition: .5s bottom ease-in-out

  &.open
    bottom: 5px

Dermed har jeg en simpel slide-in box.

Den færdige slide-in box.

JavaScript

Det sidste er et stykke JavaScript til at vise boxen.

Slide-in boxen skal kunne åbne på forskellige tidspunkter, så jeg har lavet en funktion, som jeg kan kalde til at åbne den, som gør følgende.

1. Funktionen tager en parameter randomPageState som er tidspunktet hvor den skal åbne. Det kommer vi tilbage til lige om lidt.
2. Hvis personen tidligere har set og lukket en slide-in box, bliver det gemt i localStorage. Jeg tjekker om det er sket, så jeg ikke viser boxen igen til samme bruger.
3. Jeg sætter en .open class på boxen så den åbner.
4. Til sidst tracker jeg et event med at boxen er åbnet og tidspunktet den åbnede på.

showSlideUpBox: function(randomPageState) {    
    var slideInOptOut = localStorage.getItem("slideInOptOut");
    var slideUpBox = document.querySelector(".slide-in-box");
    if (!slideInOptOut) {
      slideUpBox.classList.add("open");
      Tracking.trackSlideUpBox("open", randomPageState);
    }
}

Sådan ser det ud når slide-in boxen bliver synlig.

Slide-in boxen bliver synlig.

Hvornår skal den så vises?

Jeg tracker detaljeret hvor meget der bliver læst af mine blogindlæg ved at sende et event på følgende tidspunkter.

1. Når brugeren lander på et blogindlæg (detail view)
2. Når brugeren begynder at scrolle (add to cart).
3. Når brugeren har scrollet 33% af indlæggets længde (checkout step 1).
4. Når brugeren har scrollet 66% af indlæggets længde (checkout step 2).
5. Når brugeren har scrollet 100% af indlæggets længde (checkout step 3).
6. Når brugeren har scrollet 100% af indlæggets længde og været på siden mindst et minut (purchase).

Jeg tracker de events med Enhanced Ecommerce hvis du vil læse mere om det.

Jeg vil gerne tracke det optimale tidspunkt at vise en slide-in på af de 6 ovenstående tidspunkter. Både for at øge konverteringen og få flest mulige tilmeldinger til mit nyhedsbrev. Men også for at undgå at irritere brugeren, så de forlader siden uden at læse indlægget færdigt.

Vis på et tilfældigt tidspunkt

Ud af de 6 ovenstående tidspunkter jeg kan vise en slide-in på, vil jeg dog ikke vise den med det samme når brugeren lander på siden, så jeg vil teste de andre 5 tidspunkter.

Jeg har lavet et array med de 5 tidspunkter:

var randomPageStates = ["scroller","oneThird","twoThirds","endContent","purchase"];

Når brugeren lander på et blogindlæg bruger jeg JavaScript til at generere et tilfældigt tal mellem 0-4.

var randomPageState = Math.floor(Math.random() * 5);

Dette tal bruger jeg så til at vælge et af de 5 tidspunkter. Arrays i JavaScript er 0-indexeret, så den første plads er index 0, op til index 4.

Jeg bruger det tilfældige tal til at vælge et tilfældigt index i array’et, som styrer hvornår min slide-in vises på siden. Jeg tracker også værdien i en Hit-scoped custom dimension, så jeg kan sammenholde det med konvertering og frafald.

Lad os starte med konverteringer.

Effekt på tilmelding til nyhedsbrev

Okay, vi kan lige så godt tage den med det samme. Min slide-in konverterer ikke. Slet ikke.

22.161 visninger af slide-in og kun 29 tilmeldinger.

Slide-in boxen er i alt blevet vist 22.161 gange og den er blevet lukket 15.490 gange. Men den har kun fået 29 tilmeldinger.

29!

Det er en konverteringsrate på 0,13%.

Men det er også min egen skyld. Jeg sælger slet ikke den tilmelding godt nok. Det er ikke nok bare at give mulighed for at få en mail ved nye blogindlæg.

Det virker meget bedre med en Content Upgrade.

Nåh, men det var heller ikke det vi skulle snakke om!

Effekt på læsning af blogindlæg

Jeg vil gerne undersøge om brugerne er mere tilbøjelige til at forlade sitet når min slide-in bliver vist.

I det efterfølgende kigger jeg på konverteringsraten for de enkelte events ned gennem et blogindlæg sammenlignet med detail views som er det samme som sidevisninger på blogindlægget.

Det første jeg kigger på er Add to Cart konverteringsraten, dvs. hvor mange der begynder at scrolle.

Denne er lidt ligeyldig fordi min slide-in tidligst bliver vist på det tidspunkt hvor de rammer Add to Cart. Så den kan faktisk ikke nå at påvirke, men den er god at have med som kontrol.

De fem søjler er de fem tidspunkter slide-in boxen bliver vist på. Ikke overraskende er konverteringsraten næsten den samme for alle grupper.

Ikke overraskende er konverteringsraten næsten den samme for alle grupper.

Læst 33%

Det næste event er dem som har scrollet 33% af indlægget og her vil den første gruppe altså have set slide-in boxen, mens de andre ikke har set den endnu.

Ikke den store forskel på dem der har set slide-in boxen.

Add to Cart har en anelse lavere konverteringsrate end Læst 33% men forskellen er meget lille og med en p-værdi på 0,1572 er den ikke signifikant.

SurveyMonkey har en god signifikans test.

Man kan også se at Læst 100% har en konverteringsrate der er endnu lavere end Add to Cart og Læst 100% har altså ikke set slide-in boxen endnu, så det er bare naturlig varians.

Indtil videre påvirker det altså ikke konverteringsraten.

Læst 66%

Ved 66% læst er der heller ingen markant forskel og faktisk er det de to øverste grupper (som på dette tidspunkt har set slide-in boxen) der har den højeste konvertering.

Ved 66% læst er der heller ikke forskel.

Så stadig ingen påvirkning.

Læst 100%

Ved 100% læst er det dermed de øverste 3 grupper der har fået vist slide-in boxen – men det har stadig ingen betydning.

Samme billede ved 100% læst.

Videre til sidste event.

Læst 100% + 1 minut

Det sidste event er dem som har scrollet 100% og været på siden mindst 1 minut – det er dem hvor jeg antager at de faktisk har læst hele blogindlægget (og dem jeg tracker som et transaktion i Enhanced Ecommerce).

Heller ikke ved 100% læst + 1 minut på siden er der nogen entydig forskel.

Men heller ikke her er der nogen entydig forskel som skulle indikere at brugerne bliver irriteret af en slide-in og dermed er mere tilbøjelige til at forlade sitet eller mindre tilbøjelige til at læse blogindlægget færdig.

Konklusionen er derfor at min slide-in ikke er irriterende for brugerne – i hvert fald ikke så meget at de ikke gider læse blogindlægget færdigt.

Opsummering

I dette blogindlæg har jeg brugt Google Analytics og Google Tag Manager til at indsamle det nødvendige data til at teste hypotesen om at slide-ins ødelægger konverteringsraten. Min konklusion gælder ikke for alle sites og alle brancher – sådan noget skal altid testes på det enkelte site. Men jeg håber at ovenstående kan give noget inspiration til hvordan man kan opstille en hypotese, indsamle den nødvendige data og analysere det, så der kan træffes en beslutning på baggrund af data.

Tilbage er der blot at få lavet en ordentlig content upgrade, så jeg kan lave en slide-in der faktisk kan give nogle tilmeldinger til mit nyhedsbrev.