После выполнения шаг за шагом контактной формы с Gatsby.js, Netlify и Mailgun я хотел продолжить серию статей о том, как шаг за шагом настроить классическую целевую страницу с Gatsby.js. Сегодняшняя статья будет посвящена настройке Google Analytics.

Подключение Google Analytics к вашей целевой странице очень важно. Действительно, это позволяет вам следить за использованием вашей страницы. Не так давно я разговаривал с одной предпринимательницей, которая не понимала, почему люди уходят с ее сайта, прежде чем что-либо покупать. После беглого просмотра ее аналитики я обнаружил, что 90% ее пользователей использовали мобильные устройства и что на странице прямо перед оформлением заказа было всплывающее окно, которое невозможно было закрыть, если вы использовали свои мобильные устройства. Итак, приступим к настройке:

Шаг 1. Создайте стартер Gatsby.js и разместите его на GitHub.

Если у вас уже есть целевая страница, вы можете сразу перейти к ШАГУ 2.

Как и раньше, мы собираемся начать с создания стартера Gatsby.js. Если вы еще не настроили среду разработки, вы можете выполнить эту процедуру.

Как только вы это сделаете, мы собираемся создать новый сайт gatsby и запустить его в первый раз, используя следующие команды.

gatsby new gatsby-site
gatsby develop

Оказавшись здесь, вы можете открыть браузер и перейти по адресу http: // localhost: 8000 /, чтобы увидеть свой веб-сайт в действии.

Затем мы собираемся опубликовать наш код на Github. После создания репозитория Github дает вам инструкции, которым нужно следовать, чтобы опубликовать репозиторий. Если вы решили создать новый репозиторий в командной строке, вам не нужно добавлять репозиторий "Читать меня", поскольку стартер Gatsby.js уже предоставляет его.

Мой репозиторий на Github будет доступен здесь, если вы хотите посмотреть.

Шаг 2. Создайте учетную запись Google Analytics.

Как только вы войдете в GoogleAnalytics, вам нужно будет создать учетную запись.

Это довольно просто, и вам просто нужно дать своему проекту имя.

Следующий шаг - сложная часть. Вы должны выбрать то, что хотите измерить. В нашем случае это «Веб-сайт». В первый раз, когда я настроил Google Analytics, я выбрал «Приложения и Интернет», и мне так и не удалось заставить его работать с Gatsby.js.

Последняя часть, вы должны заполнить данные о вашей собственности. Как вы можете видеть в URL-адресе веб-сайта, я поместил случайный URL-адрес. Мы изменим это, как только наш веб-сайт будет развернут на Netlify. Если вы уже знаете свой URL-адрес, можете сразу указать его.

Нажимаем создать, соглашаемся с условиями обслуживания и все в порядке! Google предоставит вам идентификатор отслеживания. Он должен быть на странице, открывающейся после того, как вы нажмете «Создать». Если это не так, вы можете найти его в панели администратора, в разделе «Информация для отслеживания», а затем «Код отслеживания». Вы можете увидеть это в фиолетовом квадрате:

Шаг 3. Установите плагин Google Analytics и настройте его.

Во-первых, нам нужно установить плагин Google Analytics:

npm install --save gatsby-plugin-google-analytics

Мы собираемся настроить его с минимальными потребностями:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // The property ID; the tracking code won't be generated without it
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
      },
    },
  ],
}

Как видите, есть место для размещения идентификатора отслеживания Google Analytics. Ваш идентификатор отслеживания Google Analytics является конфиденциальным, и его можно легко украсть, если вы не будете осторожны. Его никогда не следует предавать огласке. Так, например, не размещайте его на GitHub. Поэтому мы сохраним их в настройках.

Gatsby требует установки переменной окружения и нескольких строк кода (npm install dotenv) в нашем файле функции:

// In your gatsby-config.js
// Gatsby settings for the environment variables
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Затем вы можете добавить свою переменную среды:

Чтобы связать его с Google Analytics, вам нужно создать файл с именем .env.development в корневой папке. Вы должны быть осторожны с написанием этого файла, если он написан неправильно, он не будет работать. Этот файл не будет загружен на Github, поскольку эти типы файлов включены в игнорирование git, предоставляемое стартером Gatsby.js.

Ваш .env.development файл будет содержать только одну строку:

GA_TRACKING_ID="UA-163788217-1"

Теперь, если вы покинете свой сервер (CTRL + C) и запустите его снова (gatsby develop.

Шаг 4. Разверните на Netlify и обновите настройки Google Analytics.

Если вы еще не создали учетную запись Netlify, зарегистрируйтесь здесь и нажмите верхнюю правую кнопку Создать сайт из Git. Затем вы будете перенаправлены на новый экран, где сможете выбрать GitHub в качестве поставщика Git. Как только он будет связан с GitHub, выберите репозиторий, который вы создали ранее.

Как вы помните, ваш идентификатор отслеживания Google Analytics находится в настройках вашей среды. Итак, после развертывания на Netlify не забудьте добавить его в настройки развертывания.

Теперь пора добавить ваш идентификатор отслеживания Google Analytics в переменную развертывания.

Затем нажмите «развернуть сайт».

Если у вас уже есть развернутая целевая страница, вы можете сделать это, зайдя в «Настройки», щелкнув «Построить и развернуть» (фиолетовый квадрат) и «Среда» (красный квадрат). Затем в «редактировать переменные» (синий квадрат) вы сможете ввести комбинацию ключа и значения для каждой переменной.

Как только ваша сборка будет завершена, вы сможете увидеть URL своего сайта. Итак, теперь вы можете вернуться к панели инструментов Google Analytics, перейти к настройкам свойств (красный квадрат) и обновить URL-адрес по умолчанию (фиолетовый квадрат):

Когда закончите, не забудьте сохранить нижнюю часть страницы. Через несколько минут вы можете перейти к информации для отслеживания (фиолетовый квадрат) и нажать «Отправить запрос трафика» (красный квадрат).

Как только вы нажмете кнопку, ваш сайт откроется на новой странице. И как только вы перезагрузите Google Analytics, вы увидите, что кто-то (угадайте, кто?) Подключен к вашему сайту.

Поздравляю 🎉, все заработало, и ваш сайт подключен к Google Analytics. Если по дороге заблудились, мы оказались здесь.