Sådan tilføjes Google Optimer A / B-test til din React-app i 10 kodelinjer

Hej ! Jeg er Faraz, en softwareingeniør @ AdHawk.

Jeg kunne ikke finde for mange ressourcer til, hvordan man konfigurerer Google Optimize i en React-app, så jeg besluttede at dele, hvordan jeg løste dette problem.

Google Optimize er et værktøj, der giver dig mulighed for at udføre A / B-test på dit websted, og det kan konfigureres fra Google Optimize-instrumentbrættet. Dette tillader ikke-ingeniørfolk hos din virksomhed at konfigurere og køre eksperimenter på egen hånd.

Google Optimer logo

Oprettelse af din React-app

I denne tutorial vil vi oprette en ny React-app fra bunden ved hjælp af create-react-app og tilføje Google Optimize til den. Forudsat at du har installeret npm, skal du åbne din terminal og indtaste følgende:

npx create-react-app-optimering
cd optimere
npm start

npx giver dig mulighed for at bruge create-react-app uden at installere den globalt. Du har adgang til npx med npm.

Du skal nu have din React-app kørt i din browser på localhost: 3000

Du skal se dette i din browser.

Opsætning af dit Google Optimize-eksperiment

Gå videre og opret en gratis Google Optimize-konto på https://optimize.google.com.

Når du er logget ind, skal du oprette en ny container og navngive den, hvad du vil. Jeg navngiver min OptimizeExample.

Opret din første oplevelse på den næste side og indtast følgende værdier:

Navn: Mit første eksperiment

Editorside: http://localhost.com:3000

Bemærk: Optimering fungerer ikke på localhost. Du bliver nødt til at redigere din værtsfil på din maskine og oprette et alias, som jeg gjorde. Jeg bruger localhost.com. Mere info om redigering af din hosts-fil (Mac, Windows og Linux) her: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Opret derefter en variant. Som standard kaldes varianten Variant 1.

Vores to varianter.

Du har brug for en Google Analytics-konto, så du kan linke Optimer til den. Når du har linket dit Optimer-eksperiment til din Google Analytics-konto, vises der en modal med