Split-test WooCommerce med Google Optimize

Du vet at det er viktig å lede trafikk til WooCommerce-butikken din, siden en del av denne trafikken blir kunder. Men hvordan vet du om nettstedet ditt er effektivt til å gjøre besøkende om til kunder?

Antall besøkende som blir kunder kalles konverteringsraten. Konverteringsfrekvenser er viktig for enhver voksende WooCommerce-butikk å spore og jobbe med å optimalisere. En svært effektiv måte å optimalisere butikkkonverteringsfrekvenser på er ved å sette opp eksperimenter med Google Optimize for å se hva som får konverteringsfrekvensen til å forbedre seg.

Denne artikkelen hjelper deg med å konfigurere Google Optimize delt testing med WooCommerce-butikken din. Etter å ha fullført denne opplæringen, vil du forstå hvordan du kan teste designdeler og ordlyd for å øke konverteringsfrekvensen. Så følg med, du trenger ikke være utvikler eller koder! Jeg lover at jeg skal holde ting enkelt.

Jeg har delt opp denne artikkelen i tre deler:

  1. Slik setter du opp Google Optimize-kontoen din
  2. Integrer Google Optimize med WooCommerce-butikken din
  3. Konfigurer din første delte test i Google Optimize

Jeg oppfordrer alle WooCommerce-butikkeiere med en rimelig mengde trafikk (minst 5000 unike besøkende per måned) til å sette opp delte tester. De er et fantastisk verktøy for å finne ut hvilke deler av nettstedets struktur eller ordlyd som begrenser konverteringsfrekvensen. Du kan bruke Google Optimize til å sette opp disse testene gratis, noe som er perfekt til å begynne med. Eksempler på vanlige deltester er å teste hvilken farge “Legg i handlekurv”-knappen skal ha for å oppmuntre klikk til å skjule eller vise tillitsetiketter på betalingssiden, ordlyden til “Checkout”-knappen og andre viktige elementer på butikknettstedet ditt.

For dette eksemplet kjører vi et eksperiment på “Checkout”-knappen og sammenligner to forskjellige farger med hverandre. La oss komme i gang!

Sett opp Google Optimize-kontoen din

Det er enkelt å opprette en Google Optimize-konto, spesielt hvis du allerede bruker en Google. Gå over til https://marketingplatform.google.com/about/optimize/ og klikk på “Logg på for å optimalisere”-knappen øverst til høyre. Hvis du ikke har en Google-konto ennå, må du opprette en.

Etter at du har opprettet kontoen din, blir du møtt med en veiviser som leder deg gjennom konfigurasjonsprosessen. La oss gå gjennom det sammen.

Det første trinnet i veiviseren er at Google ber deg abonnere på deres ulike nyhetsbrev på e-post. Det er opp til deg om du vil ha flere e-poster i innboksen din – det gjør jeg absolutt ikke. Så jeg krysser av for “Nei” for alle disse boksene.

Å lese:  Din gratis guide for webutvikling med Python

Trinn 2 er å konfigurere din første Google Optimize-konto. Du vil bli stilt alle slags spørsmål knyttet til personvern og personvern GDPR, som i stor grad avhenger av den fysiske plasseringen til virksomheten din. I USA har du mindre strenge regler som gjelder enn i EU.

Siden jeg bor i Tyskland, må jeg godta bokser om GDPR. Jeg vil heller ikke at dataene mine skal deles med andre Google-tjenester som jeg ikke har koblet til kontoen min manuelt. Du vil at Google Analytics-kontoen din skal kobles til Google Optimize – for å få mest mulig ut av dataene dine. Men bortsett fra slike brukstilfeller ønsker jeg å holde dataene mine private.

Det er det! Kontoen din er nå konfigurert og du er klar til å lage ditt første delte testeksperiment.

Integrer Google Optimize med WordPress-installasjonen din

Etter å ha fullført kontooppsettet som beskrevet ovenfor, vil Google be deg om å lage din “første opplevelse”. Opplevelser er måten Google grupperer eksperimenter som kjører på ett enkelt nettsted. Så hvis du har flere nettsteder eller butikker og ønsker å integrere dem i Google Optimize, må du lage én opplevelse for hver av dem.

Som du kan se i delen til høyre, er vi 25 % ferdige med å lage den opplevelsen. I denne delen av opplæringen tilpasser vi navnet på beholderen vår, setter opp grunnlaget for deltesten din og kobler den til Google Analytics.

For å organisere beholdere liker jeg å bruke målnettstedets URL som navn. Du kan enkelt endre beholdernavnet ved å klikke på de tre vertikale prikkene rett ved siden av “Beholderinformasjon” i høyre sidefelt.

Klikk på “Rediger beholdernavn” og skriv inn det navnet som hjelper deg å gjenkjenne nettstedet denne beholderen er integrert med. For formålet med denne opplæringen, vil jeg gå med “Woo Google Optimize Demo.”

Konfigurer din første delte testopplevelse i Google Optimize

Nå som du har fått beholderen riktig navn, la oss gå gjennom konfigureringen av din første delte test for WooCommerce-butikken din. Først klikker du på den blå “La oss gå”-knappen, som åpner et nytt område til høyre på skjermen.

I det området kan du angi et navn for opplevelsen. Jeg kalte min “Checkout button color test” for dette eksemplet. Du må spesifisere nettadressen til siden du vil kjøre eksperimentet på, som vil være nettadressen til betalingssiden.

Å lese:  Hvordan øke den redaksjonelle prosessen i WordPress med Oasis Workflow

Du kan videre spesifisere hvilken type opplevelse du vil kjøre. Google Optimize tilbyr fire forskjellige typer:

  • A/B-test. Dette lar deg lage én variant av den opprinnelige siden og sammenligne dem med hverandre, ved å sende en del av trafikken til originalen og den andre delen til varianten.
  • Multivariat test. Dette lar deg lage flere varianter av den opprinnelige siden. Jeg vil bare bruke det når du har en seriøs mengde trafikk, ellers vil det ta lang tid å levere pålitelige resultater.
  • Omdirigeringstest. Du kan omdirigere en del av trafikken til en annen side enn den opprinnelige. Dette er flott hvis du vil sammenligne to helt forskjellige sideoppsett, eller hvis du vil lede en del av trafikken til et underdomene av deg.
  • Personalisering. Du kan bruke denne typen opplevelse til å tilpasse innholdet på nettstedet ditt, avhengig av visse regler. Du kan for eksempel målrette mot land og gi informasjon som er spesifikk for disse landene (som GDPR-avmerkingsbokser kun for EU-baserte kunder på Checkout).

For denne opplæringen setter vi opp en enkel A/B-test for å sammenligne to forskjellige betalingsknappfarger med hverandre.

Klikk på “Legg til variant” i neste skjermbilde og gi varianten et navn som vil hjelpe deg å gjenkjenne det du tester. I mitt tilfelle vil jeg bytte “Plasser bestilling”-knappen på betalingssiden til en rød bakgrunnsfarge – så “Rød bestillingsknapp” er fornuftig for denne opplæringen.

Klikk på “Ferdig” som tar deg tilbake til oversiktsskjermen. Før vi kan fortsette å konfigurere testen, må vi forsikre oss om at vi faktisk har et produkt i handlekurven slik at betalingssiden er tilgjengelig og vi kan gjøre endringen.

Google Optimize vil prøve å åpne Checkout-siden så snart du klikker på “Rediger” for å konfigurere varianten. Så du må sørge for at du har en fane åpen med WooCommerce-butikken din, og at du er på Checkout-siden.

I tillegg må du sørge for at du har Google Optimize-utvidelsen for Chrome installert. Her er lenken til Chrome Nettmarked (utvidelsen er gratis).

Ok, la oss fortsette og konfigurere A/B-testen ved å klikke på “Rediger”. Du vil se at Google Optimize vil lastes inn på nytt og nå åpner Checkout-siden. Det er derfor vi må ha et produkt i handlekurven slik at vi faktisk kan se den siden og ikke blir omdirigert til en tom handlekurvside.

Så snart du begynner å bevege musen over skjermen, vil du se at hver HTML-komponent på Checkout-siden blir uthevet. Naviger til “Legg inn bestilling”-knappen og klikk på den. Det åpner attributtvinduet du kan se i skjermbildet ovenfor.

Å lese:  Din komplette guide til nettsted QA (kvalitetssikring) med gratis QA-sjekkliste

Det er superenkelt å endre bakgrunnsfarge og tekstfarge. I attributtvinduet blar du ned til du ser feltene for tekstfarge og bakgrunnsfarge, og oppdaterer verdiene til de fargene du vil teste. I dette eksemplet har “Plasser bestilling”-knappen en svart bakgrunn med gråaktig tekst. Jeg har endret det til hvit tekst på rød bakgrunn i A/B-testen.

Når det er gjort, har jeg fullstendig konfigurert A/B-testvarianten og kan trykke “Lagre” øverst til høyre i variantredigeringsprogrammet.

Sidenote: ikke test mer enn ett element per variant. Når du tester mer enn én endring per variant, vil du ikke vite hvilken visuell endring som faktisk forårsaket en endring i besøksatferd på nettstedet ditt.

Når du går tilbake til oversiktsskjermen din, vil du nå se at Google Optimize-varianten vil si at vi tester to endringer – men ikke la det forvirre deg. Det er aldri anbefalt å teste mer enn ett element om gangen, og det er det vi gjør her. En endring har vært skriftfargen, og den andre endringen har vært bakgrunnsfargen på knappen. Det er fortsatt bare ett element vi tester.

Det neste trinnet er å koble Google Optimize-kontoen din til Analytics. Derfor må du klikke på “Koble til Analytics”-knappen i fremdriftslinjen eller bla ned til delen med tittelen “Måling og mål.”

Der kan du klikke på “Koble til Analytics”-knappen og velge riktig eiendom og visning. Sidenote: Sørg for at Google Analytics er det satt opp riktig på din WooCommerce-butikk før du fortsetter.

Du vil da bli presentert med en kodebit som du må sette inn på nettstedet ditt. Hvordan du implementerer dette nøyaktig, avhenger av Google Analytics-konfigurasjonen din (universell sporing vs. global nettstedstagg). For dette eksempelet bruker jeg integreringen av den globale nettstedstaggen, så alt jeg trenger å gjøre er å legge til én kodelinje på nettstedet mitt. Google Optimize gjør en god jobb med å forklare her, så les gjennom instruksjonene nøye.

Et siste trinn vi må gjøre er å sette opp en sporingshendelse for “Plasser bestilling”-knappen. Vi må fortelle Google Analytics å spore klikkene på knappen slik at Google Optimize kan bruke de sporede dataene som et tilpasset mål for deltesten. Uten den klikksporingen vil ikke Google Optimize kunne fastslå vinnervarianten fra testen vår – fordi den ikke har de riktige dataene for å gjøre det.

Det er flere måter å legge til klikksporing på WooCommerce-siden din; min favorittmåte er å bruke Google Tag Manager. Jeg vil ikke gå dypt inn i å sette opp hele sporingsprosessen her, da det ville vært et innlegg i seg selv. Jeg anbefaler imidlertid å lese gjennom denne artikkelen på Medium hvis du ikke har satt opp klikksporing før.

Å lese:  Bruke WordPress som en e-handelsplattform

Når du har satt opp Google Tag Manager med de riktige taggene og distribuert den på WooCommerce-siden din (f.eks. denne gratis plugin-en), er du klar til å sette opp et tilpasset mål i Google Optimize.

Klikk på «Legg til eksperimentmål» og velg «Opprett egendefinert». Det vil gi deg en skjerm der du definerer dine egne sporingsregler.

Vær oppmerksom på at «Event Label»-verdien må samsvare med etiketten du konfigurerte i Google Tag Manager. For at Google Optimize skal kunne spore denne egendefinerte hendelsen – klikk på «Legg inn bestilling»-knappen – må hendelsesetikettene samsvare i Google Optimize og Google Tag Manager. Du kan også bruke “Hendelseshandling”, “Hendelseskategori” eller “Hendelsesverdi” som regelparametere, men for denne opplæringen vil etiketten fungere.

Etter å ha lagret det egendefinerte målet ditt, kan du kjøre diagnostikkverktøyet for å validere at Google Optimize-eksperimentet ditt er riktig konfigurert. Husk at Optimize trenger Google Analytics for å laste inn på siden din. Så hvis du ekskluderte brukeren din fra å bli sporet (f.eks. blokkering av sporing for alle administratorer i WP), er det sannsynlig at denne valideringen vil mislykkes. Hvis det skjer, anbefaler jeg at du inkluderer brukeren din midlertidig i Google Analytics-sporingen. Alternativt kan du åpne WooCommerce-butikken din i et inkognitovindu og bekrefte at alle kodene for Google Tag Manager, Google Analytics og Google Optimize lastes inn i koden til butikken din.

På dette tidspunktet bør opplevelsen din være i orden. Du kan bruke Live Debug Mode fra Google Optimize og bla gjennom nettstedet ditt for å validere opplevelsen. Du vil se at Chrome viser deg et område under nettstedet som gir deg innsikt i hvordan Google Optimize fungerer på WooCommerce-siden din.

I dette skjermbildet kan du se at opplevelsen er tatt i bruk og litt tilleggsinformasjon, som varianten jeg ser og nettadressen som førte til at varianten ble utløst.

Til slutt er du klar til å samle inn testdata og optimalisere WooCommerce-nettstedet ditt for flere konverteringer og inntekter.

Ser du etter andre måter å optimalisere WooCommerce-siden din på? Bytte til administrert WooCommerce-hosting kan hjelpe deg med å skalere butikken din mer effektivt samtidig som du forbedrer nettstedets hastighet. Lær mer i dag.

Nye publikasjoner:

Anbefaling