У вас включен AdBlock или иной блокировщик рекламы.

Пожалуйста, отключите его, доход от рекламы помогает развитию сайта и появлению новых статей.

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Как добавить Google Tag Manager в приложение Angular 

Простое руководство по добавлению сервиса GTM в ваше Angular приложение

Google Tag Manager - это бесплатный инструмент от Google, который позволяет устанавливать и управлять тегами (сценариями, пикселями отслеживания, обработчиками файлов cookie и т.д.) на вашем веб-сайте без изменения кода. GTM - отличный инструмент, позволяющий специалистам по маркетингу работать над сайтом / приложением, не затрагивая кодовую базу, и развертывать новую версию сайта для каждого вмешательства по автоматизации маркетинга.

В этом руководстве мы объясним, как правильно включать сценарии GTM в ваше приложение Angular с помощью специальной библиотеки и как отправлять данные, которые GTM будет перенаправлять в Google Analytics .

Справочный репозиторий

Рабочий пример базового проекта Angular, который мы будем использовать в качестве примера, доступен по адресу: https://github.com/mzuccaroli/angular-google-tag-manager/tree/master/demo-application. Это простой проект Angular. генерируется с помощью Angular CLI с помощью команды «ng new».

Основной репозиторий - это библиотека, которую мы будем использовать в этом руководстве: https://github.com/mzuccaroli/angular-google-tag-manager.

Начнем

В этом руководстве мы будем использовать созданную мной библиотеку под названием angular-google-tag-manager, чтобы упростить настройку GTM и отправку пользовательских событий.

Установка и настройка

Прежде всего установите angular-google-tag-manager

npm install --save angular-google-tag-manager

После установки вам необходимо указать свой идентификатор GTM в 'src/app.module.ts'

providers: [
  …
  {provide: 'googleTagManagerId', useValue: YOUR_GTM_ID}
],

Рекомендуется поместить идентификатор в переменную среды: вы сможете подключать разные среды к разным учетным записям GTM, и это позволит вам проверить все ваши теги в защищенной среде.

Если вы не знаете, где найти свой идентификатор GTM, перейдите в аккаунт менеджера тегов Google, который вы хотите отслеживать, вы можете найти его там:

Вы можете внедрить службу в каждый контроллер приложения, которому нужно будет взаимодействовать с ним, и отправить пользовательское событие, это одноэлементный экземпляр, и настройка (добавление сценария GTM и iframe в DOM) будет обрабатываться автоматически при первом использовании.

Добавим gtmService в контроллере:

constructor(
  …
  private gtmService: GoogleTagManagerService,
) { }

События страницы

Если вы хотите отслеживать события страницы и отправлять их в Google Analytics, лучшим способом будет подписка на события навигации в контроллере, загруженном за пределы маршрутизатора (основное приложение или контроллер заголовка будет работать нормально)

this.router.events.forEach(item => {
  if (item instanceof NavigationEnd) {
    const gtmTag = {
      event: 'page',
      pageName: item.url
    };
    this.gtmService.pushTag(gtmTag);
  }
});

GtmTag в примере полностью готов для продакшена , вы можете отправить этот объект, всю информацию, необходимую для вашего анализа, например, как название страницы, страницы URL, статус авторизации пользователя, и так далее.

Пользовательские события

Если вы хотите отследить какое-либо конкретное событие, вызванное вашим приложением, очень просто отправить push-события: внедрить службу, а затем вызывать метод pushTag при каждом вызове функции, который необходимо отслеживать:

customEvent() {
  // push GTM data layer with a custom event
  const gtmTag = {
    event: 'button-click',
    data: 'my-custom-event',
  };
  this.gtmService.pushTag(gtmTag);
  alert('this is a custom event');
}

Проверьте свои теги и слой данных

Если вы хотите проверить, установку и настройку сценария GTM вы можете легко выполнить следующие действия

Проверьте сгенерированный HTML

Щелкните правой кнопкой мыши по приложению, затем нажмите «проверить», в отображаемом HTML вы сможете найти тег script в заголовке и iframe в теле:

Проверьте переменную dataLayer

В консоли браузера посмотрите на переменную dataLayer, она должна содержать массив с событиями, запускаемыми нашим сервисом: посмотрите переменную, затем посетите некоторые страницы и выполните некоторые действия, которые должны вызвать события, снова посмотрите на переменную, новые записи должны быть помещены в массив. Это массив событий, переданных в GTM.

Проверка отправки данных

Если ваша учетная запись GTM настроена с использованием некоторых пользовательских тегов (таких как аналитика, отслеживание пикселей, cookie-боты и т.д.), Вы можете проверить свой стек сетевых вызовов и найти вызовы, сделанные вашими пользовательскими тегами.

Используйте Google Tag Assistant

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

Пример правильной конфигурации:

Пример неверной конфигурации:

Конфигурация Google Tag Manager

Эта статья посвящена приложению и коду. Менеджер тегов Google - очень продвинутый инструмент, который нуждается в правильной настройке, и это нелегкая работа. Во многих компаниях GTM является основным инструментом для наведения мостов между разработчиками и «маркетологами» , если вы находитесь в такой ситуации, вам достаточно этой статьи, если ни у кого в вашей компании нет навыков для управления GTM, вам потребуется глубокое погружение в его конфигурации.

Источник:

#Angular

Присоеденяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать