Чувство, которое вы испытываете, когда ваш код, наконец, запускается, — это то, что заставляет вас продираться сквозь болото программирования. Поэтому, когда за последние пару недель у меня было несколько проектов, сломанных на разных стадиях разработки, было трудно чувствовать мотивацию продолжать устранение неполадок. Нет побед => (нет моджо) => Низкая производительность. Но я придерживаюсь минимального количества коммитов и поста в блоге в неделю, чтобы сохранить свой импульс. Мне также повезло найти наставника — моего бывшего руководителя группы электронного обучения, который является техническим магом, — и он подбадривал меня в моем путешествии по обучению технологиям. Под его руководством я работал над проектом Google Analytics, используя Vercel и Next.js. Для меня это был отличный практический проект. Я застрял в своем проекте, но безоценочные поощрительные проверки изменили все. И сегодня мне удалось запустить трекер Google Analytics в приложении.
Теперь вернемся к коду.
Куда делся файл index.html?
В своем последнем посте я закончил тем, что заявил, что после того, как я настроил свою учетную запись Google Analytics и получил свой идентификатор отслеживания, я не мог фактически скопировать код, предоставленный Google, и вставить его в файл index.html моего приложения, потому что там не было не один. Я работаю над приложением, которое я клонировал, поэтому я был очень удивлен, когда не нашел этот конкретный файл — я знал, что все мои приложения Reactjs работали. О чудо, приложения Next.js не имеют html-файла. Скорее, Next.js выполняет предварительную визуализацию html способами, над которыми я все еще работаю, но вы можете прочитать больше об этом в документации здесь.
Так куда же делся gtag?
Эта новая информация отлично объясняла, куда пропал index.html, но должен был быть способ включить трекер — и он, вероятно, будет выглядеть совсем по-другому. Войдите в Ютуб. К счастью, некто по имени Туомо Канкаанпаа создал руководство под названием Как добавить Google Analytics в ваше приложение Next.js, чтобы помочь новичкам в этом процессе.
двухэтапный процесс
ТК разбивает процесс на 2 относительно быстрых шага — я укажу, на что следует обратить внимание. На самом деле у него есть третий шаг для добавления пользовательских событий, но я приберегу его для другого поста.
- Инициализировать Google Аналитику
- Добавьте обработчики событий
Засучим рукава, а?
Шаг 1. Инициализируйте Google Analytics:
- Создайте учетную запись Google Analytics и создайте поток данных. По сути, вы создаете уникальный идентификатор отслеживания, который добавляете в свой код. Вы можете сделать это, подписавшись на мой последний пост или пропустив 2:11 в руководстве. Я был Обязательно обратите внимание на идентификатор потока. Вам нужно будет скопировать и вставить его для следующих шагов.
- Вам придется скопировать и вставить некоторый код, поэтому я рекомендую открыть репозиторий из учебника: https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics. .
- В своем приложении создайте файл gtag.js в папке lib. Затем из файла gtag.js в репозитории скопируйте и вставьте код в свой файл gtag.js. Установите GA_TRACKING_ID равным уникальному идентификатору измерения, который вы установили на странице Google Analytics.
Функция pageview() отправляет данные в Google Analytics. Функция event() отправляет пользовательское событие в Google Analytics.
Затем создайте файл _document.js в папке ваших страниц. Скопируйте и вставьте код из одноименного файла в мой репозиторий (почему-то он удален из репозитория туториала). Я скопировал большую часть кода из статьи Марии Старк Добавьте Google Analytics в ваше приложение Next.js за 5 простых шагов, скорректировав различия в моих файлах и настройках переменных.
На этом инициализация Google Analytics завершена.
Шаг 2. Добавьте обработчики событий
Удалите существующий код в файле _app.js и скопируйте и вставьте код из файла _app.js репозитория (или моего) в свой. Помните, что этот файл находится в папке ваших страниц вместе с файлом _document.js.
Обратите внимание, что эта функция использует ловушки для уведомления Google Analytics, когда пользователи перемещаются по приложению.
Теперь обновите свой локальный сервер. Затем перейдите на свою страницу Google Analytics и нажмите на отчеты. Нажмите «В реальном времени», и вы должны увидеть некоторые данные о пользовательском трафике, как показано ниже.
Вздох облегчения
Эта задача заняла у меня целую вечность и целый день, потому что страница Google Analytics была обновлена, а Next.js сильно отличается от React.js, с которым я работал до сих пор. Я так рада, что удержалась и все заработало. Я надеюсь, что этот пост был полезен для вас и что вы находите мотивацию в заслуженных успехах на пути к кодированию!
