Kuidas lisada Google'i reaalajas optimeerimise A / B testimine kümne rea koodireale

Tere! Olen Faraz, tarkvarainsener @ AdHawk.

Ma ei suutnud leida liiga palju ressursse Google'i optimeerimise seadistamiseks rakenduses React, seetõttu otsustasin jagada, kuidas selle probleemi lahendasin.

Google Optimize on tööriist, mis võimaldab teil oma veebisaidil A / B-testimist läbi viia ja on seadistatav Google Optimize'i juhtpaneelilt. See võimaldab teie ettevõttel mitte-inseneridel luua ja iseseisvalt katseid korraldada.

Google'i optimeerimise logo

Rakenduse React loomine

Selles õpetuses loome uue rakenduse React nullist, kasutades loo-reageeri-rakendust ja lisades sellele rakenduse Google Optimize. Kui olete installinud npm, avage oma terminal ja sisestage järgmine teave:

npx optimeeri loo-reageeri-rakendus
CD optimeerimine
npm algus

npx võimaldab teil luua rakendust luua-reageerida ilma seda globaalselt installimata. Teil on juurdepääs npx-le koos npm-ga.

Nüüd peaks teie rakendus React olema installitud ja töötatud brauseris aadressil localhost: 3000

Te peaksite seda oma brauseris nägema.

Google'i optimeerimise katse seadistamine

Jätkake ja looge tasuta Google'i optimeerimise konto aadressil https://optimize.google.com.

Kui olete sisse loginud, looge uus konteiner ja pange sellele nimi, mis teile meeldib. Ma nimetan oma nime OptimizeExample.

Järgmisel lehel looge oma esimene kogemus ja sisestage järgmised väärtused:

Nimi: Minu esimene katse

Toimetaja leht: http://localhost.com:3000

Märkus. Optimeerimine ei tööta localhostis. Peate oma masinas hostide faili redigeerima ja looma varjunime, nagu ma tegin. Ma kasutan localhost.com. Lisateavet hostifaili (Mac, Windows ja Linux) redigeerimise kohta leiate siit: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Järgmisena looge variant. Vaikimisi saab vaikimisi nimeks Variant 1.

Meie kaks varianti.

Teil on vaja Google Analyticsi kontot, et saaksite selle optimeerimisega linkida. Pärast eksperimendi optimeerimise linkimist oma Google Analyticsi kontoga ilmub moodul sildiga window.dataLayer = window.dataLayer || []; funktsioon gtag () {dataLayer.push (argumendid);} gtag ('js', uus kuupäev ()); gtag ('config', 'YOUR_GA_ID', {'optimize_id': 'YOUR_OPTIMIZE_ID'});

Lisage rakenduses React tagasi siltide vahele oma skriptisilt oma index.html-faili.

Kui olete rakendusele React lisanud sildi