Posthog позволяет легко получить данные о трафике и использовании вашего Феникс проекты Интеграция POSTHOG в ваш сайт позволяет аналитике о поведении пользователей, захвате пользовательских событий, записях сеансов, флагах функций и многом другом.
Это руководство проводит вас через интеграцию Posthog в ваше приложение Phoenix, используя JavaScript Web SDK.
Вы также можете быть заинтересованы в нашей Elixir SDK для захвата событий с ваших серверов.
Перейдите в настройки своего проекта и скопируйте свой веб -фрагмент. Похоже, это:
С скопированным фрагментом JavaScript, добавьте его в свой основной файл макета, обычно расположенный в шаблонах lib // mayouts/app.html.eex в нижней части тега.
LiveView Installation
Posthog также поддерживает Phoenix LiveView с небольшим настроением к вашей конфигурации, поскольку фрагмент JavaScript не отслеживает навигацию LiveView по умолчанию.
Чтобы правильно захватить страницы LiveView/навигацию, вам необходимо добавить PHX: перейдите по прослушивателю события в нижнюю часть тега в вашем основном файле макета, обычно расположенном в шаблонах LIB // Mayouts/App.html.eex:
window.addeventlistener (“phx: vesigate”, ({detail: {href}}) =>
posthog.capture (‘$ pageview’, {
‘$ current_url’: href
})
)
Это отражает событие $ pageView в любое время, когда нанесение URL -адреса браузера программно изменяется Phoenix или пользователем. Вы можете узнать больше о событии PHX: навигация в Phoenix LiveView документацияПолем
Чтобы захватить пользовательские события, вы можете использовать Posthog.capture () в своем Liveview или обычных видах Phoenix. Вот несколько примеров:
Основной захват событий
// захватить простое событие
posthog.capture (‘button_clicked’)
Захват событий со свойствами
// захватить событие с дополнительными свойствами
posthog.capture (‘form_submitted’, {
form_name: ‘contact’,
form_fields: [‘name’, ’email’, ‘message’]В
Submission_time: New Date (). ToisoString ()
})
Захват событий в LiveView
В вашем Liveview вы можете захватить события в ответ на взаимодействие с пользователями:
// в ваших крючках JavaScript Liveview
Пусть крючны = {
Форма: {
MOUNTED () {
this.el.addeventlistener (‘отправить’, (e) => {
e.preventdefault ()
posthog.capture (‘form_submitted’, {
form_id: this.el.id,
form_data: new formdata (this.el)
})
// Обработка формы подачи
})
}
}
}
Let Livesocket = new LifeSocke (“/live”, Socket, {
Params: {_csrf_token: csrftoken},
Крюки: крючки
})
Захват событий в обычных видах Феникса
Для регулярных просмотров Phoenix вы можете добавить отслеживание событий в свои шаблоны:
Зарегистрироваться
кнопка>
document.addeventlistener (‘phx: click’, (e) => {
if (e.target.dataset.eventname) {
posthog.capture (e.target.dataset.eventname)
}
})
Установка JavaScript Web SDK или фрагмент означает, что вся его функциональность доступна в вашем проекте Phoenix. Чтобы узнать больше об этом, посмотрите на наши документы JavaScript Web SDK.
#Phoenix #Docs #Posthog
