Google Analytics - наиболее часто используемый инструмент аналитики сайтов. Он помогает разработчикам и администраторам сайтов отслеживать действия пользователей на их веб-сайтах, а также предлагает нам множество функций для оценки производительности нашего сайта.
Pixel - это инструмент отслеживания от Facebook, который поможет вам отслеживать посетителей и их действия на вашем веб-сайте / в приложении. Это также помогает вам ориентироваться на этих посетителей, когда вы размещаете рекламу на Facebook.
Приложение Angular - это одностраничное приложение (SPA), поэтому Google Analytics и Facebook Pixel не будут работать с ним эффективно.
Предпосылки
- Angular CLI.
- Интерфейс командной строки Firebase.
- Проект Firebase (предположим, что пространство имен - sample-app-xxxx).
- Бизнес-аккаунт Google Analytics и Facebook.
А теперь приступим.
Шаг 1. Создайте и настройте приложение Angular
Создайте приложение Angular, выполнив команду
ng новый SampleApp
Введите y, когда появится запрос о том, следует ли включить маршрутизацию, и выберите предпочтительный формат стиля.
Это создаст Angular-приложение SampleApp и установит в нем все зависимости.
Теперь давайте добавим несколько страниц и настроим маршрутизацию в нашем приложении. Мы создаем 2 компонента, home и test.
Введите следующую команду, чтобы создать 2 компонента
ng g c home && ng g c тест
Это создаст 2 компонента home и test, а также обновит app.module.ts.
Теперь внесем некоторые изменения в app-routing.module.ts
Откройте проект в редакторе и обновите содержимое app-routing.module.ts до следующего
Мы успешно создали приложение Angular, добавили 2 компонента и настроили маршрутизацию.
Шаг 2. Настройте хостинг Firebase
Выполните следующую команду для инициализации Firebase
firebase init
И выберите следующие варианты
Возможности интерфейса командной строки, которые вы хотите использовать: хостинг
Общедоступный каталог: dist / SampleApp
Настроить как одностраничное приложение: Да
Теперь мы инициализировали Firebase в нашем проекте.
Шаг 3. Создайте ресурс в Google Analytics
1. Перейдите на https://analytics.google.com и нажмите Администратор внизу на левой боковой панели.
2. Нажмите «Создать свойство», выберите «Интернет» и нажмите «Продолжить».
3. Заполните форму, скопируйте URL-адрес с панели управления firebase.
4. Нажмите «Создать» и скопируйте показанный там код.
Шаг 4. Создайте новый пиксель на Facebook
1. Перейдите на https://business.facebook.com/settings/pixels/ и нажмите Добавить пиксель.
2. Укажите имя и введите URL-адрес из панели управления Firebase.
3. Скопируйте идентификатор для дальнейшего использования.
Шаг 5. Добавьте код пикселя и аналитики в наше приложение
Вставьте код из шага 3, а также приведенный ниже код для пикселя в index.html нашего приложения.
! function (f, b, e, v, n, t, s) {if (f.fbq) return; n = f.fbq = function () {n.callMethod? n.callMethod.apply (n, аргументы): n.queue.push (arguments)}; если (! f._fbq) f._fbq = n; n.push = n; n.loaded =! 0; n.version = ’2.0 '; n.queue = []; t = b.createElement (e); t.async =! 0; t.src = v; s = b.getElementsByTagName (e) [0]; s.parentNode.insertBefore (t, s)} (окно, документ, 'сценарий', 'https://connect.facebook.net/en_US/fbevents.js'); fbq (‘init’, ‘{ваш-идентификатор-пикселя-идет-здесь}’);
Таким образом, наш index.html станет
Не забудьте заменить UA- {ID} своим идентификатором Google Analytics, а {your-pixel-id-go-here} своим идентификатором Pixel.
Поэтому мы добавили Google Analytics и Facebook Pixel в наше приложение Angular.
Так в чем проблема?
Angular - это одностраничное приложение. При переходе между маршрутами страница не перезагружается. Следовательно, Google Analytics и Pixel Script не обнаружат изменения и не отправят просмотр страницы.
Как это исправить?
Нам нужно программно отправлять просмотры страниц. Для этого нам нужно внести некоторые изменения в наш app.component.ts
Шаг 6. Настройка SPA для работы с Google Analytics
1. Импортируйте Router и NavigationEnd из @ angular / router
2. Объявите gtag и fbq как функцию. gtag - это функция, используемая Google Analytics, а определение функции загружается из удаленного скрипта, расположенного по адресу https://www.googletagmanager.com/gtag/js.
fbq - это функция, используемая Facebook Pixel, а определение функции загружается из https://connect.facebook.net/en_US/fbevents.js.
Машинопись не может его обнаружить. Поэтому нам нужно объявить его как функцию.
3. Подпишитесь на событие NavigationEnd Router и отправьте просмотр страницы в Google и Facebook.
Таким образом, содержимое app.component.ts станет
Шаг 7. Сборка и развертывание
Теперь соберите и разверните приложение в Firebase, выполнив следующую команду.
ng build --prod --aot && firebase deploy
Когда люди перемещаются по маршрутам, наше приложение отправляет событие просмотра страницы в Google и Facebook, и мы можем отслеживать их на панели инструментов Analytics и диспетчера событий.