Аналитика данных необходима, если вы хотите отслеживать количество посетителей вашего сайта. Есть разные способы добавить аналитику в свой проект, включая Google Analytics. Это бесплатный сервис, и его относительно просто настроить.
Узнайте, как добавить Google Analytics на свой сайт с помощью Next.js — фреймворка React для создания оптимизированных для SEO веб-сайтов.
Настройка Google Аналитики
Google Analytics предоставляет информацию в поведении людей, посещающих ваш сайт. Он сообщает вам, какие страницы получают количество просмотров, и предоставляет данные об аудитории, такие как местоположение, возраст, интерес и устройство, которое они используют. Эти данные могут помочь принять решение о направлении, в котором ваш бизнес должен быть успешным.
Для начала посетите панель аналитики и создайте новую учетную запись, выполнив следующие действия:
- Нажмите на Зарегистрироваться кнопку на вкладке администратора, чтобы создать новую учетную запись.
- Добавьте имя учетной записи в разделе Настройка учетной записи.
- Создайте свойство аналитики, указав имя.
- Добавьте информацию о бизнесе. Выберите параметры, применимые к вашему веб-сайту.
- Нажмите на Создавать кнопку, чтобы завершить настройку свойства.
- Нажмите на веб-поток, чтобы указать поток данных, который должен отслеживать Google Analytics.
- Укажите URL-адрес своего веб-сайта и дайте имя потоку данных.
- Нажмите на инструкции по добавлению тегов и получите сценарий, который вы будете использовать на своем веб-сайте.
- Скопируйте идентификатор измерения (код отслеживания), чтобы использовать его позже.
Получив код отслеживания, вы можете настроить проект Next.js.
Настройка проекта Next.js
Если у вас еще нет настроенного проекта Next.js, см. Официальное руководство Next.js для начала.
Когда вы создали свойство Global site tag, вы получили такой скрипт:
<!-- Тег Google (gtag.js) -->
<скрипт асинхронный источник ="https://www.googletagmanager.com/gtag/js? идентификатор = G-XXXXXXX"></script>
<сценарий>
окно.данные Слой = окно.dataLayer || [];
функцияgtag(){dataLayer.push(аргументы);}
gtag('js', новыйДата());
гтег('конфигурация', 'G-NHVWK8L97D');
</script>
Вам нужно добавить этот скрипт в тег head вашего сайта. В Next.js вы используете компонент Script из next/script. Этот компонент является расширением тега сценария HTML. Это позволяет вам включать сторонние скрипты на ваш сайт Next.js и устанавливать их стратегию загрузки, повышая производительность.
Скрипт Next.js Компонент предлагает различные стратегии загрузки. Стратегия «афтеринтерактив» подходит для скрипта аналитики. Это означает, что он будет загружаться после того, как страница станет интерактивной.
Импортировать Скрипт от "следующий/скрипт"
<Источник сценария ="" стратегия="послеинтерактивный" />
Открой страницы/_app.js файл и импортируйте компонент Script вверху.
Импортировать Скрипт от 'следующий/скрипт'
Затем измените оператор возврата компонента приложения, чтобы включить тег скрипта из Google Analytics.
Импортировать '../стили/globals.css'
Импортировать Макет от '../компоненты/Макет/Макет'
Импортировать Скрипт от 'следующий/скрипт'функцияМое приложение({Компонент, pageProps}) {
возвращаться (
<>
<Стратегия скрипта="послеинтерактивный" источник="https://www.googletagmanager.com/gtag/js? идентификатор = G-XXXXXXX"/>
<Скрипт
идентификатор ='Гугл Аналитика'
стратегия="послеинтерактивный"
опасноSetInnerHTML={{
__html: `
окно.данные Слой = окно.dataLayer || [];
функцияgtag(){dataLayer.push(аргументы);}
gtag('js', новыйДата());
гтег('конфигурация', 'Г-ХХХХХХХ', {
page_path: окно.расположение.путь,
});
`,
}}
/>
<Макет>
<Компонент {...pageProps} />
</Layout>
</>
)
}
экспортпо умолчанию Мое приложение
Обратите внимание, что этот тег немного отличается от того, который предоставляет Google Analytics. Он использует опасноSetInnerHTML и включает стратегию загрузки. Однако работают они одинаково.
Не забудьте заменить G-XXXXXXX своим кодом отслеживания. Также рекомендуется хранить код отслеживания в файле .env, чтобы сохранить его в секрете.
Добавление Google Analytics в одностраничное приложение
Вы можете использовать приведенный выше тег script для обычного веб-сайта и оставить все как есть. Однако для одностраничного приложения, такого как веб-сайт Next.js, необходимо выполнить несколько дополнительных действий.
А одностраничное приложение (SPA) — это веб-сайт, который загружает весь контент заранее, в ответ на первоначальный запрос. Браузер загружает контент динамически, когда пользователь нажимает на ссылки для навигации по сайту. Он не делает запрос страницы, изменяется только URL-адрес.
Это отличается для страниц Next.js, которые используют getServerSideProps, поскольку браузер отображает их по запросу.
Тег Google работает, записывая просмотр страницы при загрузке новой страницы. Таким образом, для SPA тег Google выполняется только один раз, когда страница изначально загружается. Следовательно, вы должны вручную записывать просмотры, когда пользователь переходит на разные страницы.
См. измерение одной страницы Руководство по Google Аналитике Узнать больше.
Чтобы вручную записывать просмотры страниц в Next.js с помощью скрипта gtag, создайте новую папку с именембиблиотека и добавить новый файл, gtag.js.
экспортконстанта GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;экспортконстанта просмотр страницы = () => {
окно.gtag("конфигурация", GA_MEASUREMENT_ID, {
page_path: URL-адрес,
});
};
экспортконстанта событие = ({ действие, категория, метка, значение }) => {
окно.gtag("событие", действие, {
event_category: категория,
event_label: метка,
ценить,
});
};
Затем измените /pages/_app.js, чтобы использовать эти функции и отслеживать просмотры страниц в обработчике useEffect.
Импортировать '../стили/globals.css'
Импортировать Макет от '../компоненты/Макет/Макет'
Импортировать Скрипт от 'следующий/скрипт'
Импортировать {использовать маршрутизатор} от 'следующий/маршрутизатор';
Импортировать { использовать эффект } от "реагировать";
Импортировать * как gtag от "../lib/gtag"функцияМое приложение({Компонент, pageProps}: AppProps) {
константа маршрутизатор = использовать маршрутизатор ();использовать эффект (() => {
константа handleRouteChange = (url) => {
gtag.Вид страницы(URL);
};маршрутизатор.события.на("routeChangeComplete", обработатьRouteChange);
возвращаться () => {
роутер.события.выкл("routeChangeComplete", обработатьRouteChange);
};
}, [роутер.события]);
возвращаться (
<>
<Стратегия скрипта="послеинтерактивный" источник="https://www.googletagmanager.com/gtag/js? идентификатор = G-XXXXXX"></Script>
<Скрипт
идентификатор ='Гугл Аналитика'
стратегия="послеинтерактивный"
опасноSetInnerHTML={{
__html: `
окно.данные Слой = окно.dataLayer || [];
функцияgtag(){dataLayer.push(аргументы);}
gtag('js', новыйДата());
гтег('конфигурация', 'Г-ХХХХХХ', {
page_path: окно.расположение.путь,
});
`,
}}
/>
<Макет>
<Компонент {...pageProps} />
</Layout>
</>
)
}
экспортпо умолчанию Мое приложение
В этом примере используются обработчики useRouter и useEffect для записи просмотра страницы каждый раз, когда пользователь переходит на другую страницу.
Вызовите метод useRouter из next/router и назначьте его переменной router. В хуке useEffect прослушивайте событие routeChangeComplete на маршрутизаторе. При возникновении события запишите просмотр страницы, вызвав функцию handleRouteChange.
Оператор return хука useEffect отменяет подписку на событие routeChangeComplete с помощью метода off.
Используйте Google Analytics для сбора пользовательских данных
Данные чрезвычайно полезны для принятия правильных решений, и добавление Google Analytics на ваш веб-сайт — один из способов их сбора.
Вы можете добавить Google Analytics в проект Next.js, используя хуки, чтобы обеспечить запись всех просмотров страниц, даже если страница использует маршрутизацию на стороне клиента. Теперь вы можете увидеть, сколько просмотров ваш сайт получает на панели инструментов Google Analytics.
