RudderStack – это конвейер данных о клиентах с открытым исходным кодом, который позволяет вам отслеживать события из ваших веб-, мобильных и серверных источников и отправлять их во все ваши данные о клиентах. стек в режиме реального времени. Мы также открыли исходный код нашего основного репозитория GitHub — rudder-server.
Этот блог представляет собой руководство, которое поможет вам легко интегрировать ваше приложение Nuxt.js с RudderStack с помощью нашего JavaScript SDK. Эта интеграция позволяет отслеживать пользовательские события в режиме реального времени и отправлять их в нужные места.
Вы можете инструментировать потоки событий в своем приложении Nuxt.js, выполнив следующие три ключевых шага:
- Интегрируйте приложение Nuxt.js с RudderStack JavaScript SDK и настройте код отслеживания.
- Настройте место назначения инструмента или хранилища в RudderStack для маршрутизации всех данных о событиях в режиме реального времени.
- Разверните приложение Nuxt.js и проверьте поток событий.
Предварительные условия
Мы предполагаем, что вы установили и настроили приложение Nuxt.js. Если нет, посетите официальную документацию Nuxt.js, чтобы начать.
Шаг 1. Интеграция вашего приложения Nuxt.js с RudderStack JavaScript SDK
Создание источника в RudderStack
Во-первых, вам нужно настроить источник JavaScript на панели инструментов RudderStack, который вы будете использовать для отслеживания событий из своего приложения Nuxt.js. Выполните следующие действия, чтобы настроить источник:
1. Войдите в свою панель управления RudderStack. (Если вы новичок в RudderStack, зарегистрируйтесь здесь)
2. При успешном входе в систему вы должны увидеть следующую панель инструментов:
3. Запишите URL-адрес плоскости данных. Этот URL-адрес понадобится вам для интеграции вашего приложения Nuxt.js с RudderStack.
4. Затем создайте источник, просто нажав кнопку Добавить источник. Вы также можете щелкнуть параметр Каталог на левой панели навигации и выбрать Потоки событий в разделе Источники, как показано на рисунке. Затем выберите JavaScript.
5. Назовите источник и нажмите Далее.
6. Теперь ваш источник JavaScript настроен и готов отслеживать события. Обратите внимание на ключ записи, связанный с этим источником. Он понадобится вам для настройки интеграции RudderStack с вашим приложением Nuxt.js.
Интеграция вашего приложения Nuxt.Js с RudderStack
Интегрируйте RudderStack с вашим приложением Nuxt.js и настройте код отслеживания, выполнив следующие шаги:
Измените файл nuxt.config.js в папке вашего приложения, включив в него следующий скрипт:
gist:Veenap/3626e9bac218dde5a66fc2583eb31bd1
Важно: вы можете обратиться к нашему образцу приложения Nuxt.js, представленному в нашем репозитории RudderStack Nuxt.js, для получения дополнительной информации об изменении этих файлов.
Шаг 2: Создание целевого инструмента в RudderStack для маршрутизации событий вашего приложения Nuxt.Js
RudderStack поддерживает более 80 сторонних инструментов и платформ, на которые вы можете безопасно отправлять отслеживаемые события. В этом руководстве мы направим события приложения Nuxt.js в Google Analytics. Чтобы добавить Google Analytics в качестве пункта назначения в RudderStack, выполните следующие действия:
1. На левой панели навигации панели управления Rudderstack нажмите Места назначения и выберите Добавить место назначения. Поскольку мы уже настроили источник, вы можете просто щелкнуть его и выбрать параметр Добавить место назначения, как показано ниже:
Примечание. Вы можете использовать параметр «Подключить места назначения», если вы уже настроили место назначения в RudderStack и хотите отправлять данные о событиях на эту платформу.
2. Затем выберите Google Analytics в качестве пункта назначения.
3. Добавьте название пункта назначения и нажмите Далее, как показано на рисунке:
4. Теперь подключите источник JavaScript, который мы уже настроили для этого руководства.
5. В Настройки подключения настройте пункт назначения Google Analytics с помощью идентификатора отслеживания Google Analytics и других дополнительных параметров, как показано ниже. Затем нажмите Далее.
6. Вы также можете преобразовать свои события перед их отправкой в Google Analytics. Для получения дополнительной информации об этой функции ознакомьтесь с нашей документацией в разделе Преобразования пользователей.
7. Вуаля! Google Analytics теперь настроен как пункт назначения. Теперь вы должны увидеть следующее соединение источник-назначение на панели инструментов:
(Альтернативный вариант) Шаг 2. Создайте в RudderStack пункт назначения хранилища для событий вашего приложения Nuxt.Js
Важно! Прежде чем настроить хранилище данных в качестве места назначения в RudderStack, вам необходимо настроить новый проект в хранилище данных. Кроме того, вам необходимо создать новую роль пользователя RudderStack с соответствующими разрешениями.
Следуйте нашим документам , чтобы получить подробные и пошаговые инструкции о том, как сделать это для предпочтительного хранилища данных.
В этом руководстве мы настроим Назначение хранилища Google BigQuery, чтобы перенаправлять все события из нашего приложения Nuxt.js. Вы можете настроить проект BigQuery с необходимыми разрешениями для сервисного аккаунта, следуя нашей документации.
После настройки проекта и назначения необходимых разрешений пользователя выполните следующие действия:
1. В Каталоге мест назначения выберите Google BigQuery:
2. Добавьте имя к месту назначения и нажмите Далее.
3. Подключитесь к источнику JavaScript, из которого мы будем отслеживать события нашего приложения Nuxt.js. Затем нажмите Далее.
4. Укажите Учетные данные для подключения. Введите Идентификатор проекта BigQuery и Имя промежуточного сегмента. Вы можете обратиться к этим инструкциям, чтобы получить эту информацию.
5. Наконец, скопируйте содержимое частного файла JSON. Подробнее о том, как это сделать, читайте в нашей документации.
Это все! Вы успешно настроили BigQuery в качестве хранилища в RudderStack.
Шаг 3. Развертывание приложения Nuxt.Js и проверка потока событий
Мы успешно настроили источник и место назначения события. Давайте проверим, правильно ли работает наш поток событий. Для этого давайте развернем наше приложение Nuxt.js и проверим, отслеживаются ли события JavaScript источником и доставляются ли они в нашу Google Analytics пункт назначения.
Выполните следующие действия, чтобы найти:
1. В терминале или cmd перейдите в папку, содержащую ваше приложение Nuxt.js.
2. Чтобы развернуть приложение, выполните команду npm run dev, как показано ниже:
3. Откройте приложение Nuxt.js, перейдя по URL-адресу http://localhost:3000 в браузере.
4. Чтобы убедиться, что rudder-analytics.js (SDK RudderStack для JavaScript) загружен правильно, откройте Инструменты разработчика в своем браузере и перейдите на вкладку Сеть. На следующем снимке экрана показана эта опция для Google Chrome:
5. Проверьте, может ли RudderStack отслеживать различные просмотры страниц и клики, нажав на вкладку Текущие события вашего источника JavaScript на странице панели управления RudderStack:
Примечание. После развертывания вашего приложения иногда может возникать задержка, прежде чем события начнут отправляться и будут видны на панели инструментов и в месте назначения. Не беспокойтесь. Все события фиксируются и отправляются; просто имейте в виду, что им может потребоваться несколько минут, чтобы появиться.
6. Гениально! RudderStack успешно отследил и зафиксировал события:
7. Далее давайте проверим, отправляются ли события в наш пункт назначения Google Analytics. Перейдите на панель управления Google Analytics и выберите параметр В реальном времени — События.
Мы видим одного активного пользователя в нашем приложении Nuxt.js, а также видно событие отслеживания. Это показывает, что событие было отслежено и успешно доставлено. Точно так же вы также должны получить событие в своем хранилище Google BigQuery.
Резюме
Мониторинг данных в приложении имеет решающее значение для понимания реальной производительности вашего приложения и поведения пользователей. Информация, которую вы получите в результате этого мониторинга, позволит вам обновить приложение в соответствии с потребностями ваших клиентов. Постоянная адаптация вашего приложения для поддержания привлекательности — важная черта успешного приложения. RudderStack поможет вам безопасно достичь этого.
В этом руководстве мы узнали, как обрабатывать данные о событиях в реальном времени в вашем приложении Nuxt.js с помощью RudderStack. Мы интегрировали приложение Nuxt.js с RudderStack JS SDK и узнали, как настроить код отслеживания. Мы также настроили Google Analytics в качестве места назначения в RudderStack для маршрутизации всех потоков событий в режиме реального времени, а также для проверки успешной доставки потоков событий.
Зарегистрируйтесь бесплатно и начните отправлять данные
Протестируйте наши конвейеры потока событий, ELT и обратного ETL. Используйте наш источник HTTP для отправки данных менее чем за 5 минут или установите один из наших 12 SDK на свой веб-сайт или в приложение. "Начать"
Первоначально этот блог был опубликован по адресу:
https://rudderstack.com/guides/how-to-event-stream-data-from-your-nuxtjs-app-using-rudderstack.
Дополнительные материалы на plainenglish.io
