Transskribering
Hej, mit navn er Mogens Møller.
Jeg vil i denne video vise dig, hvordan du retter CSS på et gentaget element i din splittest.
Jeg har i en af de tidligere videoer gået ind og forklaret, hvordan du rettet CSS’en på din splittest.
Dengang brugte jeg den indbyggede editor der var i Visual Website Optimizer.
Editoren kan en masse gode ting, men den har også et par begrænsninger.
Derfor har jeg lavet denne video, der er lidt mere udvidet, og går niveauet dybere, kan man sige.
Somme tider når du laver splittests har du brug for at rette et CSS på et element som er gentaget på din side. Det vil sige i eksempelvis en produktliste, hvor du måske har nogle forskellige produkter som kører gennem siden. Typisk vil de have den samme CSS. De er stylet på den samme måde. Og så er det træls, hvis du så skal ind med denne her editor og rette hvert eneste af de elementer. Det ville være rart for dig, hvis du kunne gå ind og rette en gang, og så tager det ligesom effekt på alle elementerne, alle produktlisterne uanset hvordan man har segmenteret og sorteret og så videre.
Herudover kan du bruge denne her video, hvis du bare gerne vil vide, hvordan du sådan helt i praksis kan gå ned og indsætte noget CSS-kode selv på en enkelt test-variant.
Er du webdesigner, eller har nørdede tendenser, kan det jo være rigtig fint, hvis du ved hvordan du lige går ind og gør det. Hvis du ikke går ind og gider bruge den indbyggede CSS-editor, der også er i Visual Website Optimizer.
Godt. Lad os komme i gang.
Jeg prøver at gå ind på en side her. I dette tilfælde vil jeg gerne køre en splittest på denne her side. Og denne her har lige præcis denne her udfordring jeg snakkede om.
Det er et rejsebureau. Der bliver vist forskellige hoteller på denne her liste. Og i dette tilfælde vil jeg gerne rette knappen der står herude. Den vil jeg gerne rette, så alle knapperne bliver ændret på en gang.
Uanset om man inde og kigge under Østrig eller man søger under destination eller land, så er det den samme knap der bliver vist. Den knap vil jeg gerne rette og se, om vi kan ændre i teksten på knappen, og så få nogle flere der klikker sig videre.
Godt. Jeg tager URL’en heroppe og kopierer. Går ind i Visual Website Optimizer. Sætter URL’en ind; ”Create Test”.
Yes. Så får jeg billedet af, hvordan siden ser ud.
Så vil jeg gerne rette i det her element her. Og hvis du ved noget om, hvordan du skriver CSS og den slags ting, så kender du garanteret også til de værktøjer man kan bruge til at kigge direkte i HTML-koderne i de her sider.
Der er et der hedder Firebuck, det kender du garanteret. Men nu vil jeg lige vise det for nogen, hvis ikke de kender det.
Hvis jeg for eksempel skal ind og se, hvad CSS-klassen er for dette her element, så kan jeg gå herind, når jeg har installeret det plug-in til Firefox der hedder Firebuck, og gå ind og sige ”inspect element with Firebuck”.
Så ryger man direkte ind i HTML-koden her, og kan så se at denne her knap er en ”div” og den har en klasse, der hedder ”btn_se_hotel”
Når jeg så trykker her, så kan jeg se herude, at CSS’en er på dette her element. Og så kan jeg på denne måde eksempelvis kopiere det, rette noget af det til, hvis jeg nu lægger en ny knap på. Så er det jo sådan set bare stien heroppe vi skal udskifte.
På denne måde kan du fat på CSS’en, rette dit eget til, og så kan vi så lægge det ind i Visual Website Optimizer.
Jeg prøver at gå ind i Visual Website Optimizer igen – og jeg har så snydt en lille smule foran. Jeg har lavet lidt CSS, som egentlig giver en ny knap. Den kopierer jeg lige herover fra et andet dokument.
Så går jeg ind på version 1 her, og siger Javascript/CSS. Jeg fjerner det her herinde. Så sætter jeg ellers mit CSS, som jeg selv har lavet, ind på siden. Og bare sådan lige for god ordens skyld. Det jeg har gjort her, er, at jeg bare har sat et nyt billede ind her, og så har jeg ændret lidt på bredden af knappen.
Jeg siger ”Done”. Så kan du faktisk se, at knappen har ændret sig herude.
Jeg går lige ind, for god ordens skyld, og skriver, at den nye variant hedder ”Bestil”.
Godt. Lad os lige sige at vi skal køre en test, hvor vi har to nye varianter. Så jeg laver lige en mere her. Jeg har igen lidt CSS-kode, det kopierer jeg lige. Går ind her. Sætter ind. Her har vi altså en knap som hedder ”Se hotel & bestil”.
Det skriver jeg selvfølgelig også på her. Sådan her.
Så har vi kontrollen, der bare hedder ”Se hotel”. Vi har en version der hedder ”Bestil” og vi har en funktion der hedder ”Se Hotel & Bestil”.
Så har vi faktisk fået lavet vores to nye varianter her med noget CSS på et gentaget element. Og så kan vi fint gå videre, sætte vores mål på, og alle de her ting jeg har forklaret i nogle af de andre videoer.
Godt. Jeg håber du fik noget ud af denne her video. Rigtig god fornøjelse med det.
Sådan retter du CSS på et gentaget element i din splittest,