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

Pixel - это инструмент отслеживания от Facebook, который поможет вам отслеживать посетителей и их действия на вашем веб-сайте / в приложении. Это также помогает вам ориентироваться на этих посетителей, когда вы размещаете рекламу на Facebook.

Приложение Angular - это одностраничное приложение (SPA), поэтому Google Analytics и Facebook Pixel не будут работать с ним эффективно.

Предпосылки

  1. Angular CLI.
  2. Интерфейс командной строки Firebase.
  3. Проект Firebase (предположим, что пространство имен - sample-app-xxxx).
  4. Бизнес-аккаунт 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 и диспетчера событий.