Kako dodati Google Optimizirati A / B testiranje u svoju React aplikaciju u 10 linija koda

Bok ! Ja sam Faraz, softverski inženjer @ AdHawk.

Nisam uspio pronaći previše resursa o tome kako postaviti Google Optimize u aplikaciji React, pa sam odlučio podijeliti kako sam riješio taj problem.

Google Optimize alat je koji vam omogućuje provođenje A / B testiranja na vašoj web lokaciji, a može se konfigurirati s nadzorne ploče Google Optimize. To omogućuje ljudima koji nisu inženjering u vašoj tvrtki da samostalno postavljaju i pokreću eksperimente.

Google logotip za optimizaciju

Stvaranje vaše React aplikacije

U ovom će tutorialu kreirati novu aplikaciju React ispočetka koristeći create-react-aplikaciju i tome dodati Google Optimize. Pod pretpostavkom da imate instaliran npm, otvorite terminal i unesite sljedeće:

npx create-react-app optimizirati
CD optimizirati
npm start

npx omogućuje vam upotrebu create-react-aplikacije bez globalne instaliranja. Imate pristup npx s npm.

Sada biste trebali postaviti svoju React aplikaciju u svom pregledniku na localhost: 3000

To biste trebali vidjeti u svom pregledniku.

Postavljanje eksperimenta za optimiziranje Googlea

Nastavite i stvorite besplatni račun za optimizaciju Googlea na https://optimize.google.com.

Nakon što se prijavite, izradite novi spremnik i dodijelite mu naziv što god želite. Dajem naziv OptimizeExample.

Na sljedećoj stranici stvorite svoje prvo iskustvo i unesite sljedeće vrijednosti:

Naziv: Moj prvi eksperiment

Stranica uređivača: http://localhost.com:3000

Napomena: Optimizacija ne radi na localhostu. Morat ćete urediti datoteku domaćina na svom računalu i stvoriti pseudonim, kao što sam to učinio. Koristim localhost.com. Više informacija o uređivanju vaše datoteke računala (Mac, Windows i Linux) ovdje: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Zatim stvorite varijantu. Varijanta će prema zadanom biti nazvana Varijanta 1.

Naše dvije varijante.

Trebat će vam račun Google Analytics kako biste ga mogli povezati Optimizirajte. Nakon što eksperiment Optimize povežete sa svojim računom na usluzi Google Analytics, pojavit će se modal s oznakom