Что такое Google Tag Manager и зачем он нужен?
Google Tag Manager (GTM) – это система управления тегами, позволяющая быстро и легко обновлять коды отслеживания и фрагменты кода на веб-сайте или в мобильном приложении, не изменяя программный код. Это мощный инструмент для маркетологов и аналитиков, позволяющий отслеживать поведение пользователей, собирать данные и интегрировать их с различными аналитическими платформами и рекламными сетями.
Преимущества использования GTM с Angular 12
Интеграция GTM с Angular 12 предоставляет следующие преимущества:
- Централизованное управление тегами: Все теги управляются из одного интерфейса, что упрощает добавление, редактирование и удаление тегов.
- Гибкость и контроль: Можно легко настраивать триггеры и переменные для отслеживания конкретных событий и данных в приложении Angular.
- Быстрое развертывание: Изменения в тегах развертываются мгновенно, без необходимости повторного развертывания приложения.
- Интеграция с аналитическими платформами: GTM легко интегрируется с Google Analytics, Facebook Pixel и другими сервисами.
- Улучшенная производительность: Асинхронная загрузка тегов не блокирует загрузку остального контента.
Предварительные требования: Angular 12 и учетная запись Google Tag Manager
Прежде чем приступить к настройке GTM в Angular 12, убедитесь, что у вас есть:
- Установленный Angular 12 (или более поздняя версия).
- Созданная учетная запись Google Tag Manager и настроенный контейнер для вашего веб-сайта.
Установка и настройка Google Tag Manager в Angular 12
Установка пакета @ngx-gTag (или аналога) для интеграции с GTM
Для упрощения интеграции GTM с Angular можно использовать пакет @ngx-gTag. Установите его с помощью npm или yarn:
npm install @ngx-gTag
Или:
yarn add @ngx-gTag
Также есть альтернативные библиотеки, такие как angular-google-tag-manager, выбор зависит от ваших предпочтений и специфики проекта.
Добавление кода GTM в приложение Angular 12 (app.component.ts, index.html)
-
Добавьте код контейнера GTM в
index.html:Откройте файл
src/index.htmlи вставьте код контейнера GTM сразу после открывающего тега<body>. Код контейнера можно найти в интерфейсе GTM.<!-- Google Tag Manager --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- End Google Tag Manager -->Замените
GTM-XXXXXXXна ваш ID контейнера GTM. -
Инициализируйте GTM в
app.component.ts(или другом подходящем компоненте):Импортируйте
NgxGTagModuleвapp.module.ts:import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxGTagModule } from '@ngx-gTag'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxGTagModule.forRoot({ trackingId: 'GTM-XXXXXXX', trackPageviews: true }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Замените
GTM-XXXXXXXна ваш ID контейнера GTM.
Инициализация GTM контейнера в Angular приложении
Как показано выше, инициализация контейнера GTM происходит в app.module.ts при импорте NgxGTagModule. Параметр trackPageviews: true указывает на необходимость автоматического отслеживания просмотров страниц.
Настройка переменных, триггеров и тегов в Google Tag Manager
Создание переменных для отслеживания данных в Angular (dataLayer)
Для отслеживания данных в Angular необходимо использовать dataLayer. Вы можете передавать данные в dataLayer из компонентов Angular:
import { Component, OnInit } from '@angular/core';
import { NgxGTagService } from '@ngx-gTag';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private gtagService: NgxGTagService) { }
ngOnInit(): void {
}
trackEvent(category: string, action: string, label: string, value?: number): void {
/**
* Sends a custom event to the dataLayer.
* @param category The category of the event (e.g., 'button').
* @param action The action performed (e.g., 'click').
* @param label The label for the event (e.g., 'submit_button').
* @param value Optional numerical value associated with the event.
*/
this.gtagService.event(action, { // Action is event name
event_category: category, // Rename 'category' to 'event_category'
event_label: label, // Rename 'label' to 'event_label'
value: value // Keep 'value' as is
});
}
buttonClick(): void {
this.trackEvent('button', 'click', 'my_button', 10);
}
}
В GTM необходимо настроить определяемые пользователем переменные типа «Переменная уровня данных» для извлечения этих данных.
Настройка триггеров для отслеживания событий (например, просмотры страниц, клики)
В GTM создайте триггеры, которые будут срабатывать при определенных событиях. Например, для отслеживания кликов по кнопкам можно использовать триггер типа «Клик — Все элементы» или «Клик — Только ссылки» и настроить условия, при которых он должен срабатывать (например, по ID или классу кнопки).
Для пользовательских событий необходимо настроить триггер типа «Пользовательское событие» и указать имя события (например, click в примере выше).
Создание тегов для отправки данных в Google Analytics и другие сервисы
Создайте теги, которые будут отправлять данные в Google Analytics или другие сервисы при срабатывании триггеров. Например, для отправки данных в Google Analytics можно использовать тег типа «Google Analytics: Universal Analytics» и настроить его для отправки событий с соответствующими параметрами.
Тестирование и отладка настроек GTM в Angular приложении
Используйте режим предварительного просмотра в GTM для тестирования настроек. В этом режиме можно просматривать, какие теги срабатывают при различных действиях в приложении, и проверять правильность передачи данных. Также можно использовать консоль разработчика браузера для отладки dataLayer и проверки отправляемых событий.
Расширенные возможности и лучшие практики
Отслеживание пользовательских событий и взаимодействий
Для отслеживания сложных взаимодействий в Angular можно создавать пользовательские события и отправлять их в dataLayer. Например, можно отслеживать заполнение форм, просмотр видео, прокрутку страниц и т. д.
Интеграция с другими сервисами через GTM (например, Facebook Pixel)
GTM позволяет интегрироваться с различными сервисами, такими как Facebook Pixel, LinkedIn Insight Tag и другими. Для этого необходимо создать соответствующие теги и настроить триггеры для их срабатывания.
Управление версиями и развертывание изменений GTM
GTM автоматически создает версии всех изменений, что позволяет легко откатывать изменения в случае необходимости. Регулярно публикуйте новые версии контейнера GTM, чтобы развернуть изменения на вашем веб-сайте.
Устранение неполадок и часто задаваемые вопросы
Проблемы с установкой и инициализацией GTM
- Проблема: GTM не инициализируется.
- Решение: Убедитесь, что код контейнера GTM правильно добавлен в
index.htmlи чтоNgxGTagModuleправильно импортирован и настроен вapp.module.ts.
Ошибки в настройке переменных, триггеров и тегов
-
Проблема: Теги не срабатывают.
-
Решение: Проверьте, правильно ли настроены триггеры и переменные в GTM. Убедитесь, что условия срабатывания триггеров соответствуют событиям, происходящим в приложении.
-
Проблема: Неправильные данные передаются в Google Analytics.
-
Решение: Проверьте, правильно ли настроены переменные уровня данных и что они соответствуют именам параметров, ожидаемым в Google Analytics.
Отсутствие данных в Google Analytics и других сервисах
- Проблема: Данные не отображаются в Google Analytics.
- Решение: Убедитесь, что теги правильно настроены и срабатывают. Проверьте, правильно ли настроены фильтры в Google Analytics. Также убедитесь, что у вас нет блокировщиков рекламы, которые могут блокировать отправку данных.