Отслеживайте своих посетителей онлайн.
Сегодня в этой статье мы увидим, как мы можем добавить Google Analytics в наше приложение Next.js. Итак, без лишних слов, давайте сразу приступим к делу.
Шаг 1. Создание нового приложения Next.js
Во-первых, давайте создадим новое приложение Next.js, выполнив команду в терминале:
npx create-next-app demo-app
Этот шаг не требуется, если у вас уже есть приложение Next.js и вы хотите добавить Google Analytics.
Шаг 2. Создайте новый ресурс в Google Analytics.
Теперь переходим на сайт Google Analytics. Создайте учетную запись Google Analytics, если вы еще этого не сделали.
После создания учетной записи Google Analytics щелкните раздел «Администратор» в левом нижнем углу и нажмите «Создать ресурс». Дайте свойству имя и заполните все остальные данные, которые запрашивает форма.
Шаг 3. Создайте поток данных в Google Analytics.
Далее нам нужно настроить поток данных для нашего приложения Next.js. Здесь мы можем настроить потоки данных для трех типов платформ. Когда мы добавим аналитику в наше приложение Next.js, мы выберем «Интернет».
Затем мы должны указать URL нашего веб-сайта и имя потока. Когда вы это сделаете, нажмите «Создать поток».
Шаг 4. Добавьте скрипт Google Analytics в свое приложение Next.js.
После создания потока вы получаете страницу сведений о веб-потоке. Разверните «Глобальный тег сайта (gtag.js)», и вы должны увидеть код скрипта.
Теперь добавьте этот скрипт в _app.tsx вашего приложения Next.js.
Мы использовали компонент Script Next.js для рендеринга тега script. Мы добавили strategy=”lazyOnload” в компонент Script. Мы также помещаем код Google Analytics в нашу переменную среды (в файле .env) с именем NEXT_PUBLIC_GOOGLE_ANALYTICS_CODE. Остальное аналогично тому, что мы скопировали с сайта Google Analytics.
Шаг 5. Проверьте, правильно ли настроен Google Analytics в вашем веб-приложении.
Мы завершили настройку Google Analytics в нашем веб-приложении Next.js. Теперь нам нужно проверить, правильно ли настроен Google Analytics.
Давайте подключимся к нашему веб-приложению и откроем консоль из браузера. На консоли напишем dataLayer и нажмем Enter. Если Google Analytics правильно настроен в нашем веб-приложении, мы должны увидеть что-то похожее на нижнюю часть.
Заключение
Мы успешно интегрировали Google Analytics в наше веб-приложение Next.js. Теперь мы можем анализировать посетителей нашего веб-сайта с помощью диаграмм Google Analytics.
Свяжитесь со мной через Linkedin или мой веб-сайт.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
