Аналитика података је неопходна ако желите да пратите број посетилаца које ваша веб локација добија. Постоје различити начини на које можете да додате аналитику свом пројекту, укључујући Гоогле аналитику. То је бесплатна услуга и релативно је једноставна за подешавање.
Научите како да додате Гоогле аналитику на своју веб локацију користећи Нект.јс, Реацт оквир за прављење веб локација прилагођених СЕО-у.
Подешавање Гоогле аналитике
Гоогле аналитика пружа увид у понашање људи који посећују вашу веб локацију. Говори вам које странице добијају број прегледа и даје вам податке о публици као што су локација, старост, интересовање и уређај који користе. Ови подаци могу помоћи у доношењу одлука у ком правцу би ваше предузеће требало да иде да би било успешно.
Да бисте започели, посетите аналитичка контролна табла и направите нови налог пратећи ове кораке:
- Кликните Региструј се дугме на картици администратора да бисте креирали нови налог.
- Додајте назив налога у одељку Подешавање налога.
- Направите својство аналитике тако што ћете дати име.
- Додајте пословне детаље. Изаберите опције које се односе на вашу веб локацију.
- Кликните Креирај дугме да бисте завршили подешавање својства.
- Кликните на веб ток да бисте одредили ток података који Гоогле аналитика треба да прати.
- Наведите УРЛ до своје веб локације и дајте стриму података име.
- Кликните на упутства за означавање и преузмите скрипту коју ћете користити на својој веб локацији.
- Копирајте ИД мерења (код за праћење) да бисте га касније користили.
Када добијете код за праћење, можете да подесите Нект.јс пројекат.
Подешавање пројекта Нект.јс
Ако већ немате подешен Нект.јс пројекат, погледајте Нект.јс званични водич започети.
Када сте креирали својство глобалне ознаке сајта, добили сте скрипту попут ове:
<!-- Гоогле ознака (гтаг.јс) -->
<скрипт асинц срц="https://www.googletagmanager.com/gtag/js? ид=Г-КСКСКСКСКСКСКС"></script>
<скрипта>
прозор.датаЛаиер = прозор.датаЛаиер || [];
функцијагтаг(){датаЛаиер.пусх(аргументима);}
гтаг('јс', НоваДатум());
гтаг('цонфиг', 'Г-НХВВК8Л97Д');
</script>
Морате да додате ову скрипту у хеад ознаку своје веб локације. У Нект.јс користите компоненту Сцрипт из нект/сцрипт. Ова компонента је проширење ознаке ХТМЛ скрипте. Омогућава вам да укључите скрипте трећих страна на своју веб локацију Нект.јс и подесите њихову стратегију учитавања, побољшавајући перформансе.
Тхе Нект.јс Сцрипт компонента нуди различите стратегије учитавања. Стратегија „након интеракције“ је погодна за аналитичку скрипту. То значи да ће се учитати након што страница буде интерактивна.
увоз Скрипта из "следеће/скрипта"
<Скрипта срц="" стратегија="афтерИнтерацтиве" />
Отвори пагес/_апп.јс датотеку и увезите компоненту Сцрипт на врху.
увоз Скрипта из 'следеће/скрипта'
Затим измените повратну изјаву компоненте апликације да бисте укључили ознаку скрипте из Гоогле аналитике.
увоз '../стилес/глобалс.цсс'
увоз Лаиоут из '../цомпонентс/Лаиоут/Лаиоут'
увоз Скрипта из 'следеће/скрипта'функцијаМиАпп({ Компонента, пагеПропс }) {
повратак (
<>
<Стратегија скрипте="афтерИнтерацтиве" срц="https://www.googletagmanager.com/gtag/js? ид=Г-КСКСКСКСКСКСКС"/>
<Скрипта
ид='Гугл анализе'
стратегија="афтерИнтерацтиве"
опасноСетИннерХТМЛ={{
__хтмл: `
прозор.датаЛаиер = прозор.датаЛаиер || [];
функцијагтаг(){датаЛаиер.пусх(аргументима);}
гтаг('јс', НоваДатум());
гтаг('цонфиг', 'Г-КСКСКСКСКСКСКС', {
путања_странице: прозор.локација.патхнаме,
});
`,
}}
/>
<Лаиоут>
<Компонента {...пагеПропс} />
</Layout>
</>
)
}
извозУобичајено МиАпп
Имајте на уму да се ова ознака мало разликује од оне коју пружа Гоогле аналитика. Користи опасноСетИннерХТМЛ и укључује стратегију учитавања. Они, међутим, раде исто.
Не заборавите да замените Г-КСКСКСКСКСКСКС својим кодом за праћење. Такође је препоручљиво да сачувате код за праћење у .енв датотеци да бисте га чували у тајности.
Додавање Гоогле аналитике у апликацију за једну страницу
Можете користити горњу ознаку скрипте за обичну веб локацију и оставити је тако. Међутим, за апликацију на једној страници као што је Нект.јс веб локација, потребно је да предузмете неколико додатних корака.
А апликација на једној страници (СПА) је веб локација која учитава сав садржај унапред, као одговор на почетни захтев. Прегледач динамички учитава садржај док корисник кликне на везе да би се кретао по сајту. Не поставља захтев за страницу, мења се само УРЛ.
Ово је другачије за Нект.јс странице које користе гетСерверСидеПропс док их прегледач приказује на захтев.
Гоогле ознака функционише тако што бележи приказ странице када се нова страница учита. Дакле, за СПА, Гоогле ознака се извршава само једном, када се страница у почетку учита. Због тога морате ручно да снимите приказе док корисник прелази на различите странице.
Погледајте мерење на једној страници Водич за Гоогле аналитику да сазнате више.
Да бисте ручно снимили приказе страница у Нект.јс помоћу гтаг скрипте, направите нови директоријум под називомлиб и додајте нову датотеку, гтаг.јс.
извозконст ГА_МЕАСУРЕМЕНТ_ИД = процесс.енв. ГА_МЕАСУРЕМЕНТ_ИД;извозконст приказ странице = () => {
виндов.гтаг("цонфиг", ГА_МЕАСУРЕМЕНТ_ИД, {
путања_странице: урл,
});
};
извозконст догађај = ({ радња, категорија, ознака, вредност }) => {
виндов.гтаг("догађај", поступак, {
евент_цатегори: категорија,
евент_лабел: ознака,
вредност,
});
};
Затим модификујте /пагес/_апп.јс да користи ове функције и прати приказе страница у кукици усеЕффецт.
увоз '../стилес/глобалс.цсс'
увоз Лаиоут из '../цомпонентс/Лаиоут/Лаиоут'
увоз Скрипта из 'следеће/скрипта'
увоз { усеРоутер } из 'следећи/рутер';
увоз { усеЕффецт } из "реаговати";
увоз * као гтаг из „../либ/гтаг“функцијаМиАпп({ Цомпонент, пагеПропс }: АппПропс) {
конст рутер = усеРоутер();усеЕффецт(() => {
конст хандлеРоутеЦханге = (урл) => {
гтаг.страна поглед(урл);
};роутер.евентс.он("роутеЦхангеЦомплете", хандлеРоутеЦханге);
повратак () => {
роутер.евентс.офф("роутеЦхангеЦомплете", хандлеРоутеЦханге);
};
}, [роутер.евентс]);
повратак (
<>
<Стратегија скрипте="афтерИнтерацтиве" срц="https://www.googletagmanager.com/gtag/js? ид=Г-КСКСКСКСКСКС"></Script>
<Скрипта
ид='Гугл анализе'
стратегија="афтерИнтерацтиве"
опасноСетИннерХТМЛ={{
__хтмл: `
прозор.датаЛаиер = прозор.датаЛаиер || [];
функцијагтаг(){датаЛаиер.пусх(аргументима);}
гтаг('јс', НоваДатум());
гтаг('цонфиг', 'Г-КСКСКСКСКСКС', {
путања_странице: прозор.локација.патхнаме,
});
`,
}}
/>
<Лаиоут>
<Компонента {...пагеПропс} />
</Layout>
</>
)
}
извозУобичајено МиАпп
Овај пример користи кукице усеРоутер и усеЕффецт за снимање приказа странице сваки пут када корисник крене на другу страницу.
Позовите метод усеРоутер из нект/роутер и доделите га променљивој рутера. У куки усеЕффецт послушајте догађај роутеЦхангеЦомплете на рутеру. Када се догађај покрене, снимите приказ странице позивањем функције хандлеРоутеЦханге.
Наредба повратка куке усеЕффецт отказује претплату на догађај роутеЦхангеЦомплете помоћу методе „офф“.
Користите Гоогле аналитику за прикупљање корисничких података
Подаци су изузетно корисни за доношење добрих одлука, а додавање Гоогле аналитике на вашу веб локацију је један од начина да их прикупите.
Можете да додате Гоогле аналитику у Нект.јс пројекат помоћу кукица како бисте били сигурни да бележите све приказе странице чак и када страница користи рутирање на страни клијента. Сада можете да видите колико прегледа ваш сајт има на контролној табли Гоогле аналитике.
