Sådan redigerer du HTML i din splittest

Se næste videoguide
Sådan ser du skærmoptagelser af dine split tests

Transskribering
Hej, mit navn er Mogens Møller.

Jeg vil i denne her video vise dig, hvordan du redigerer HTML i din splittest. I splittest-værktøjet Visual Website Optimizer.

Nogle gange når man laver splittest, er man nødt til at rette i selve HTML’en. Visual Website Optimizers visuelle editor er rigtig, rigtig god. Men den kan ikke alt, så nogen gange bliver man nødt til at gå ind og hive lidt i HTML’en.

Der er også en del CMS som ikke er lavet voldsomt godt, og som ikke er bygget op i den bedste HTML, og det gør også at editoren i Visual Website Optimizer har det lidt svært ved at pille de rigtige elementer ud, hvis ikke at koderne ligesom er lavet godt. Det er desværre ikke alle CMS, der er lavet lige godt.

Jeg vil prøve og give et eksempel her. Her har vi en webshop – Billigsport24.dk – som jeg faktisk har lavet noget splittest for. Nu vil jeg lige prøve at vise en af de splittests, som vi faktisk har været ved at lave til dem.

Dét vi skulle lave her, var, at vi i tjekud-flowet på denne her side gerne ville vise noget Trustpilot, og noget e-mærke i selve tjekud-flowet, for at se om det konverterer bedre.

Nu prøver jeg lige at se, om jeg kan finde et produkt, så vi kan komme ud til tjekud-flowet.

Jeg prøver at lægge denne her i kurven. I kan se, at der kører faktisk allerede nu en test her. Det jeg gerne vil nu her, er at jeg gerne vil ind og prøve at sætte det her ind – noget lignende det her – men ikke det her step, men faktisk i det næste step i tjekud-flowet. Og det er nogen gange en udfordring, og det er ikke lige noget sted, hvor man kan bare kan smække billeder ind som man ellers kunne normalt. Så det vil jeg prøve at vise.

Jeg går ind i Visual Website Optimizer, og så skal jeg lige have oprettet en test herinde. Jeg går ind i ”A/B Test” og så sætter jeg den URL ind som jeg gerne vil teste på. Den test jeg laver her, hvor det er i tjekud-flowet, der skal man lige lave et lille hypertrick for at komme ud i tjekud-flowet. Det har jeg beskrevet nærmere i en anden video her på siden.

Det vil jeg ikke gå så meget mere i dybden med her. Men jeg prøver lige at gå mere i dybden her. Jeg har valgt en produktside her som udgangspunkt, og for at jeg kan komme ind og teste selve tjekud-flowet, så er jeg nødt til at have noget i kurven. Derfor er vi nødt til at gå op og vælge ”Browse Mode”, og så sige ”Køb”. Og så var det den næste side jeg gerne ville teste på.

Så vi prøver at gå videre her. Så er vi på siden som jeg gerne vil lave noget test på, og hvor jeg gerne vil hive i noget HTML.

Det som jeg gerne vil teste her, er, at jeg faktisk her i bunden gerne vil indsætte noget Trustpilot-billede. Og hernede ved siden af godkende-knappen vil jeg gerne sætte et e-handelsmærke.

Som I kan se, når jeg kører musen hen over de her elementer, så er HTML’en her på siden ikke supergod. Så jeg kan ikke bare gå ind og sige – Bom! – her vil jeg gerne indsætte billede, og så spiller det med det samme, for så vil det komme til at ligge oveni, eller ved siden af denne her på en dum måde. Vi kan heller ikke bare gå herind og fjerne denne her og sætte et billede, for så ryger denne her bemærkningsboks væk. Så her er vi nødt til lige at lave noget HTML.

Nu er det som sagt en test jeg har lavet tidligere. Derfor har jeg lavet noget HTML i forvejen. Det vil jeg lige sætte ind. Men nu vil jeg lige vise, hvordan man sætter det ind.

Gå ind og vælg her. Sig ”Edit HTML”. Så får man denne her HTML-editor frem. Og jeg vil være ærlig at sige, at det ikke er verdens bedste HTML-editor de har lavet her. Men den fungerer.

Det jeg skal nu, er, at jeg skal ind og markere det her HTML jeg gerne vil have væk. Det er det der. Og så har jeg som sagt lidt i forvejen, som jeg har lavet, som jeg sætter ind.

Det ser vidst rigtig ud. Og så kan I jo også se her bagved, at så er HTML’en sat ind.

Lad os prøve at se ”Done” om det ikke ser rigtig ud, om det ikke ser OK ud?

Jo, det er faktisk sådan at jeg gerne vil have det her.

Yes. Det er den første HTML. Så vil jeg som sagt gerne lige have et e-handelsmærke ind her ved siden af til godkendelses-knappen.

Vi skal have lidt mere HTML sat ind – Jeg tager fat i denne her klump, og siger ”Edit HTML”. Så får vi igen denne her editor frem. Det, jeg gerne vil have væk, eller rettet, det er faktisk det HTML, vi har her.
Så har jeg lidt HTML jeg har lavet i forvejen, som jeg så sætter ind her.

Så har vi faktisk det vi skal have. Trustpilot-billede inde her, og e-handelsbillede inde. Og så kan vi selvfølgelig gå ned, og give vores variation et navn, og gå videre, og sætte mål og så videre. Det har jeg forklaret i nogle andre videoer.

Lige en enkelt ting inden jeg stopper videoen her, som også er godt at få med. Når du går ind og retter HTML, skal du være lidt forsigtig. Hvis du går ind og retter noget, hvor der er dynamisk indhold, kan Visual Website Optimizer faktisk gå ind og overskrive det. Lad mig give dig et eksempel. Jeg er inde på en side her, hvor jeg lige kan finde noget her.

Hvis jeg eksempelvis går ind og trykker på dét her. Her vil jeg rette HTML. Og jeg går ind og siger: Jeg vil egentlig gerne have et andet billede i stedet for det der pakkepost – det kan være GLS har et andet pakkepost – og jeg så retter i et eller andet og siger ”Done”. Nu gør jeg det ikke. Men hvis jeg gjorde det. Nu skete der faktisk dét at billedet forsvandt heroppe.

Men hvis jeg gjorde det, så har Visual Website Optimizer faktisk nu ligesom lagt mærke til, eller skrevet noget i koden sådan, at det jeg har rettet i al det her HTML jeg har markeret, det vil ligesom blive overskrevet, uanset hvad der ellers ligger af dynamik her på den rigtige side.

I dette tilfælde er det faktisk ikke supergodt, for her kan den besøgende faktisk indtaste et postnummer, og på den måde finde ud af hvor der ligger en pakkeshop henne. Men det vil ikke komme frem det her dynamiske, fordi jeg har været inde og overskrive det med det HTML jeg lige har været inde og redigere.

Så bare det at jeg går ind og gør sådan her og siger ”Edit HTML”. Så alt det HTML her vil så ellers overskrive alt det HTML som ellers kan genereres dynamisk her på siden. Derfor skal man være lidt forsigtig, når man retter det her HTML. Passe på med at rette det, når der er noget dynamisk. Det kan for eksempel også være på produktsider. Hvis du går ind, og du gerne vil have dine priser lidt mere tydelige på produktsider, og du så går ind og retter HTML på prisen, der hvor selve prisen står – skriver en spand eller div eller sådan noget, og dermed gør prisen større eller tydeligere. Så vil den også gå ind og overskrive det HTML, du har haft fat på, så prisen faktisk bliver den samme på alle dine produkter.

Så i dette tilfælde, hvis du gerne vil ind og rette prisen på produktet, så er det vigtigt, at du går ind og retter i CSS’en i stedet for. Sådan at det kun er stylene der bliver rettet, og ikke selve HTML’en.

Jeg håber, det giver mening. Hvis det ikke gør, så giv mig et kald, eller skriv en mail. Så skal jeg gerne forklare uddybende.

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
Sådan redigerer du HTML i din splittest, 10.0 out of 10 based on 2 ratings

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *