RudderStack – это конвейер клиентских данных с открытым исходным кодом, который позволяет отслеживать и отправлять события в режиме реального времени из веб-, мобильных и серверных источников на все ваши стек данных о клиентах. Наш основной репозиторий — rudder-server — с открытым кодом на GitHub.

С помощью плагина Gatsby от RudderStack с открытым исходным кодом вы можете легко интегрировать свой сайт Gatsby с RudderStack, а также отслеживать и фиксировать события клиентов в режиме реального времени.

Чтобы настроить потоки событий в реальном времени на вашем веб-сайте Gatsby с помощью RudderStack, нам необходимо выполнить следующие четыре шага:

  1. Инструментируйте свой веб-сайт Gatsby с помощью RudderStack с помощью плагина Gatsby
  2. (Необязательно) Настройте код отслеживания RudderStack для своего веб-сайта.
  3. Создайте инструмент/склад в RudderStack для данных о событиях вашего сайта Gatsby.
  4. Разверните свой сайт Gatsby и проверьте поток событий

Предварительные требования

В этом посте предполагается, что вы уже установили и настроили свой веб-сайт Gatsby. Если вы еще этого не сделали, рекомендуем ознакомиться с официальной документацией по Gatsby, чтобы начать работу.

Шаг 1. Инструментируйте свой веб-сайт Gatsby с помощью RudderStack с помощью плагина Gatsby

Создайте источник в RudderStack

Прежде чем оснастить свой сайт Gatsby с помощью RudderStack, вам необходимо настроить источник JavaScript на панели управления RudderStack, который будет отслеживать и захватывать события с вашего сайта. Для этого выполните следующие действия:

  • Войдите в свою панель управления RudderStack. Если у вас нет учетной записи, пожалуйста, зарегистрируйтесь.
  • После того, как вы вошли в систему, вы должны увидеть следующую панель инструментов:

  • Обратите внимание на URL Data Plane, который необходим для оснащения вашего сайта Gatsby с помощью RudderStack.

  • Следующим шагом является создание источника. Для этого нажмите кнопку Добавить источник. При желании вы можете выбрать параметр Каталог на левой панели навигации и выбрать Потоки событий в разделе Источники.

Для подключаемого модуля Gatsby мы настроим простой источник JavaScript.

  • Присвойте источнику имя и нажмите Далее.

  • Теперь ваш источник событий настроен. Обратите внимание на ключ записи, связанный с этим источником. Это также необходимо для настройки интеграции RudderStack-Gatsby.

Инструментируйте свой сайт Gatsby с помощью RudderStack

Чтобы оснастить ваш веб-сайт Gatsby с помощью RudderStack, мы будем использовать плагин Gatsby с открытым исходным кодом для RudderStack. Следуй этим шагам:

  • Перейдите в корневой каталог, который содержит активы и ресурсы вашего сайта.
  • Введите следующую команду в зависимости от выбранного менеджера пакетов:

Для NPM: $ npm install --save gatsby-plugin-rudderstack

Для YARN: $ yarn add gatsby-plugin-rudderstack

  • Чтобы настроить подключаемый модуль, вам потребуется указать в файле gatsby-config.js исходный ключ записи и URL-адрес плоскости данных, которые вы получили из предыдущего раздела (Создание источника в RudderStack).
  • Варианты конфигурации такие, как показано:

plugins: [
{
resolve: `gatsby-plugin-rudderstack`,
options: {
prodKey: `RUDDERSTACK_PRODUCTION_WRITE_KEY`,
devKey: `RUDDERSTACK_DEV_WRITE_KEY`,
trackPage: false,
trackPageDelay: 50,
dataPlaneUrl: `https://override-rudderstack-endpoint`,
controlPlaneUrl: `https://override-control-plane-url`,
delayLoad: false,
delayLoadTime: 1000,
manualLoad: false,
}
}
];

Подробную информацию о каждом из вышеуказанных параметров см. в нашей документации.

Важные заметки

  • Назначьте исходный ключ записи параметру prodKey, если вы используете производственную среду. В противном случае назначьте его параметру devKey.
  • Если вы используете самостоятельную плоскость управления для управления конфигурациями потока событий, введите URL-адрес для файла controlPlaneUrl. В этом посте мы использовали бесплатную плоскость управления, размещенную на RudderStack, которая не требует настройки. Он также имеет больше функций, чем плоскость управления с открытым исходным кодом, например Прямые трансляции, которые позволяют вам просматривать прямые трансляции, полученные из вашего источника событий.

(Необязательно) Шаг 2. Настройте код отслеживания RudderStack для своего веб-сайта.

Примечание. В этом разделе описывается, как вручную отслеживать просмотры страниц с помощью приведенного ниже фрагмента кода JavaScript. Предпосылкой для этого является то, что вы установили trackPage в false в файле gatsby-config.js. (Шаг 4 в предыдущем разделе, Оборудуйте свой сайт Gatsby с помощью RudderStack).

Если вы хотите автоматически отслеживать просмотры страниц, задайте для trackPage значение true в файле gatsby-config.js. Дополнительные сведения об автоматическом отслеживании просмотров страниц см. в нашей документации.

Далее мы настроим код для RudderStack для отслеживания просмотров страниц с нашего сайта Gatsby. Это означает, что RudderStack будет фиксировать каждую активность просмотра страницы каждый раз, когда пользователь получает доступ/просматривает страницу на вашем веб-сайте.

Для этого выполните следующие действия:

  • Перейдите в репозиторий вашего локального сайта и перейдите в папку node_modules — gatsby-plugin-rudderstack.
  • Найдите и откройте файл gatsby-browser.js.
  • Добавьте следующий код в конец этого файла:

// gatsby-browser.js
exports.onRouteUpdate = () => {
window.rudderanalytics && window.rudderanalytics.page();
};

  • Сохраните файл.

Шаг 3. Создайте назначение инструмента в RudderStack для данных о событиях вашего сайта Gatsby.

RudderStack поддерживает более 80 инструментов, в которые вы можете надежно отправлять данные о событиях. В этом руководстве мы настроим назначение Google Analytics в RudderStack. Чтобы настроить это назначение в RudderStack, выполните следующие действия:

  • Выберите параметр Места назначения на левой панели навигации панели управления и нажмите кнопку Добавить место назначения. Поскольку вы уже настроили источник, вы также можете нажать кнопку Добавить место назначения, как показано ниже:

Примечание. Если вы уже настроили место назначения в RudderStack ранее и хотите отправлять данные о событиях на эту платформу, используйте параметр Подключить места назначения для подключения к источнику.

  • Выберите Google Analytics из списка направлений.

  • Присвойте имя месту назначения и нажмите Далее.

  • Выберите источник. Мы выберем источник JavaScript, который мы уже настроили для этого руководства.

  • Добавьте соответствующие Настройки подключения. Самое главное, вам потребуется ввести идентификатор отслеживания Google Analytics. Вы также можете настроить другие дополнительные параметры, как показано ниже, а затем нажать Далее.

  • RudderStack дает вам возможность преобразовать ваши события, прежде чем отправлять их в пункт назначения. Получите больше информации о функции трансформации пользователей RudderStack в нашей документации.
  • Ваш пункт назначения настроен. Теперь вы должны увидеть следующее соединение источник-назначение на панели инструментов:

(Альтернативный вариант) Шаг 3. Создайте хранилище в RudderStack для данных о событиях на сайте Gatsby.

Важно. Перед настройкой хранилища данных в качестве места назначения RudderStack вам необходимо настроить новый проект в своем хранилище. Кроме того, вам потребуется создать новую роль пользователя RudderStack с соответствующими разрешениями. Следуйте нашим документам, чтобы получить подробные пошаговые инструкции о том, как это сделать для выбранного вами хранилища данных.

Для этого руководства мы настроим хранилище Google BigQuery для маршрутизации всех событий с нашего веб-сайта Gatsby. Как упоминалось выше, настройте проект BigQuery с необходимыми разрешениями для сервисного аккаунта, следуя нашему документу.

После того, как вы настроили проект и необходимые разрешения пользователя, выполните следующие действия:

  • В списке мест назначения выберите Google BigQuery, как показано ниже:

  • Назначьте имя этому месту назначения и нажмите Далее.

  • Выберите источник, из которого вы хотите отправлять события. Для этого назначения мы выберем источник JavaScript, связанный с нашим веб-сайтом Gatsby.

  • Укажите Учетные данные для подключения. Введите Идентификатор проекта BigQuery и Имя промежуточного сегмента. Следуйте этим инструкциям, чтобы получить эту информацию.

Укажите параметры подключения

  • Скопируйте содержимое частного файла JSON. Подробнее о том, как это сделать, в нашем документе.

Вот и все! Вы успешно настроили BigQuery в качестве хранилища в RudderStack.

Шаг 4. Разверните свой сайт Gatsby и проверьте поток событий

Чтобы убедиться, что все работает правильно, давайте, наконец, развернем наш веб-сайт и проверим, доставляются ли события в пункт назначения. В этом посте мы протестируем поток событий для нашего назначения Google Analytics, которое мы настроили на шаге 3 (Инструментальное назначение инструмента в RudderStack).

Следуй этим шагам:

  • Перейдите в папку вашего локального сайта, как показано ниже:

  • Запустите команду gatsby build, если вы используете производственную среду. Если вы используете среду разработки, выполните команду gatsby develop.

  • Поскольку мы используем производственную среду, давайте развернем наш сайт с помощью gatsby serve. Будет обслуживаться URL-адрес локального хоста, который мы затем можем использовать для доступа к нашему сайту:

  • Просматривайте свой веб-сайт, нажимая на разные сообщения или страницы.
  • Посмотрите, может ли RudderStack отслеживать различные просмотры страниц, перейдя в раздел Текущие события на исходной странице панели инструментов:

Примечание.После развертывания рабочего сайта может возникнуть задержка перед началом отправки событий. Не беспокойтесь. Все события фиксируются и отправляются; просто имейте в виду, что их отображение в средстве просмотра прямых трансляций и в последующих целевых приложениях после развертывания в рабочей среде может занять несколько минут.

  • RudderStack может успешно отслеживать и фиксировать события просмотра страниц, как показано ниже:

  • Теперь давайте проверим, отправляются ли события в Google Analytics. Для этого перейдите на панель инструментов Google Analytics и выберите В реальном времени — События.

Мы видим одного активного пользователя на нашем веб-сайте Gatsby, что означает, что событие просмотра страницы было доставлено успешно. Точно так же вы также должны иметь возможность видеть событие, полученное в вашем хранилище Google BigQuery.

Зарегистрируйтесь бесплатно и начните отправлять данные

Протестируйте наши конвейеры потока событий, ELT и обратного ETL. Используйте наш источник HTTP для отправки данных менее чем за 5 минут или установите один из наших 12 SDK на свой веб-сайт или в приложение. Начать.

Этот блог изначально был опубликован по адресу
https://rudderstack.com/guides/how-to-event-stream-from-your-gatsby-website-using-open-source-rudderstack.

Дополнительные материалы на plainenglish.io