Подключить Google tag manager

Шаг 1. Авторизируемся на сайте https://tagmanager.google.com
Если нет аккаунта, необходимо зарегистрироваться.

Шаг 2. Нажимаем “Создать аккаунт” внутри сервиса Google Tag Manager.

Шаг 3. При создании аккаунта указываем “Название аккаунта” и “Название контейнера”, выбрав использование контейнера как “Веб-сайт”

Шаг 4. Необходимо ознакомиться с “Соглашением об Условиях использования Диспетчера тегов Google”.

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

Настройка целей (событий) в Гугл Аналитикс 4 через гугл менеджер тегов (GTM)

Шаг 6. Переходим в настройки нужной страницы.

Шаг 7. Открываем вкладку “Метрика и скрипты” и добавляем новый плагин “Google Tag Manager”.
Далее вставляем скопированный код идентификатора в поле “Идентификатор контейнера Google Tag Manager”.

Шаг 8. Сохраняем.

Готово! Мы подключили плагин “Google Tag Manager” к нашей страницы, и он уже работает, останется только настроить нужные теги в сервисе Google Tag Manager.

Источник: support.platformalp.ru

Как подключить Яндекс.Метрику и Google Tag Manager

Сайт подкаста является для многих подкастеров единой платформой агрегирования всех выпусков и площадок для прослушиваний в одном месте.

Многие подкастеры выбирают плейсментом именно сайт подкаста и ведут туда рекламный трафик. Но трафик без аналитических данных и ретаргетированных пикселей — плохой трафик.

Сейчас мы тебе расскажем как подключить Яндекс.Метрику и Google Tag Manager, чтобы собирать все полезные данные.

Google Tag Manager дает тебе полную свободу в управлении всеми необходимыми скриптами.

Яндекс.Метрика

Яндекс.Метрика — это бесплатный аналитический инструмент от компании Яндекс (логично, да?), который дает кучу полезных данных, вроде количества посещений, демографических данных пользователей и т.д.

Что такое Google Tag Manager. Установка Google Tag Manager и подключение Google Analytics

Если ты еще не знаком с этим инструментом, то рекомендуем ознакомиться с базой знаний Яндекса:

О сервисе — Метрика. Справка

Яндекс.Метрика — это инструмент веб-аналитики, который помогает получать наглядные отчеты, видеозаписи действий посетителей, отслеживать источники трафика и оценивать эффективность онлайн- и офлайн-рекламы.

Как подключить Яндекс.Метрику к сайту

Шаг 1: создай новый счетчик в Яндекс.Метрике

• заходишь на https://metrika.yandex.ru/ и авторизуешься/регистрируешь в Яндекс-аккаунте
• нажимаешь «Добавить счетчик» и вводишь любое название для твоего счетчика
• в поле «Адрес сайта» вводишь URL твоего сайта подкаста в mave, например, https://polusladky.mave.digital
• выставляешь все «ползунки» на «Вкл», соглашаешься с условиями пользовательского соглашения и нажимаешь «Создать счетчик»

После этого тебя перебросит на шаг «Установите код счетчика на сайт». Просто пролистай страницу до конца и нажми «Начать пользоваться». Никакой код счетчика копировать не надо

Шаг 2: скопируй ID счетчика и вставь в mave

Счетчик уже создан. Теперь надо перейти к нему и скопировать его ID .

Чтобы не рыться в настройках и т.п., можно просто скопировать его ID на главной странице тут:

После этого идем в mave:

• переходишь в модуль «Настройки» → «Настройки сайта» и в поле Яндекс.Метрика ID вставь скопированный ID.

Вот и все Видишь как просто. Метрика через минут 10 начнет работать и собирать данные.

Как настроить отслеживание конверсий в Яндекс.Метрике

Твоя Яндекс.Метрика установлена и собирает данные. Но ты, наверное, хочешь знать сколько людей нажали на кнопки связаться с тобой или, например, перешли слушать подкаст в Apple Podcasts.

Все это просто настроить и отслеживать. Для примера рассмотрим настройку отслеживания переходов с сайта в Apple Podcasts.

Как это сделать:

• переходишь в модуль «Цели» и создаешь новую цель через «Добавить цель»
• указываешь название, например, «Перешли в Apple Podcasts». Чек-бокс «Ретаргетинг» можно не выбирать. В данном случае это ни на что не влияет
• выбираешь «Клик по кнопке», вводишь в инпут домен сайта подкаста в mave, например, https://polusladky.mave.digital/ и нажимаешь «Перейти и выбрать кнопку»
• после этого в новой вкладке откроется виджет от Яндекс.Метрики и тебе всего лишь нужно выбрать кнопку, которую ты хочешь отслеживать (в нашем примере это кнопка Apple Podcasts) и нажать «Отслеживать клики»
• тебя вернет в Яндекс.Метрику с заполненным инпутом выбранном кнопки
• нажимаешь «Добавить цель»

Все готово! Теперь ты можешь видеть сколько людей перешло на Apple Podcasts.

Другие кнопки настраиваются по такому же алгоритму.

Google Tag Manager (GTM)

Google Tag Manager — это система управления тегами (TMS), при помощи которой можно с легкостью обновлять код отслеживания и другие фрагменты кода (теги) на сайте подкаста.

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

Благодаря Google Tag Manager ты можешь установить на сайт подкаста:

• Facebook Pixel
• VK Pixel
• Chatra / Jivosite или любой другой онлайн-чат
• любой скрипт, на который хватит фантазии

Более подробно про этот инструмент можно почитать в базе знаний Google:

Tag Manager Help

Official Google Tag Manager Help Center where you can find tips and tutorials on using Google Tag Manager and other answers to frequently asked questions.

Не подключай Яндекс.Метрику через Google Tag Manager, иначе произойдет конфликт и Яндекс.Метрика будет работать некорректно.

Как подключить Google Tag Manager к сайту

Это много сложнее, чем подключить Яндекс.Метрику, но все равно просто, благодаря нашей инструкции

Тебе нужно пройти всего лишь три простых шага.

Шаг 1: создай аккаунт в Google Tag Manager

• перейди на https://tagmanager.google.com и авторизуйся в Google-аккаунте.

Если у тебя нет Google-аккаунта, то его необходимо создать.

После этого ты попадешь на такую страницу:

В рамках одного аккаунта Google Tag Manager ты можешь создавать несколько контейнеров. В Google Tag Manager следующая иерархия: Аккаунт Контейнер Теги (как раз на этом уровне ты и вставляешь все необходимые тебе скрипты)

• Заполняешь все необходимые поля и в «Целевой платформе» выбираешь «Веб-сайт»

Шаг 2: установи Google Tag Manager ID на сайт

После создания аккаунта у тебя появится поп-ап со скриптами Google Tag Manager. Тебе не нужно ничего вставлять в и , мы уже сделали это за тебя.

Тебе нужно всего лишь скопировать GTM ID, который указан на картинке ниже, и нажать «ОК».

После этого скопированный ID надо поставить в mave.creators.

Для этого перейди в «Настройки» → «Настройки сайта» и в поле Google Tag Manager ID вставь скопированный ID.

Обязательно вставляй ID вместе с GTM.

Все готово, второй шаг также успешно пройден

Шаг 3: настрой нужные тебе теги

Теги в Google Tag Manager — это скрипты, которые тебе нужны. Например, Facebook Pixel в рамках Google Tag Manager называется тегом.

Любой тег устанавливается по единому алгоритму:

• создается тег
• настраиваются триггеры срабатывания
• публикуется контейнер

Как установить Facebook Pixel на сайт через Google Tag Manager

Это наиболее частый запрос у подкастеров, поэтому рассмотри этот кейс подробнее.

Как установить Facebook Pixel

1. Переходишь в Events Manager
2. Настраиваешь Facebook Pixel по инструкции:

Log in or sign up to view

See posts, photos and more on Facebook.

При подключении рекомендуем выбирать Conversions API and Facebook Pixel

• указываешь название тега, например, Facebook Pixel
• нажимаешь на «Конфигурация тега» → Переходишь в «Галерею шаблонов» → Находишь Facebook Pixel (автор: facebookincubator) и выбираешь этот шаблон (кнопка «Выберите шаблон»)

Есть также способ через «Пользовательский HTML», но через шаблон правильнее и удобнее для дальнейших шагов.

В итоге получится вот такая настройка.

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

На этапе с указанием конфигурации отправки можно ничего не заполнять. Этот шаг необходим, если ты вносишь много изменений в GTM и хочешь понимать какие и когда были сделаны изменения.

Все готово, самый простой шаг пройден Теперь на сайте твоего подкаста есть Facebook Pixel, который срабатывает при загрузке сайта подкаста и эти данные можно использовать при настройке кампаний в Facebook Ads.

Как настроить события Facebook Pixel

Ты уже установил Facebook Pixel, который собирает данные каждый раз, когда загрузился сайт подкаста в mave.

Но многие хотят сделать так, чтобы Pixel срабатывал только после нажатия на определенные события.

Для примера, рассмотрим вариант отработки Facebook Pixel при нажатии на кнопки платформ. Например, ты хочешь собирать в Pixel только тех людей, которые нажали на кнопку послушать в Apple Podcasts.

При нажатии на Apple Podcasts (на мобайле, десктопе и планшетах) будет срабатывать событие Facebook Pixel

Как это сделать:

1. Для нажала тебе нужно создать триггер. То есть это действие, на которое будет происходит определенное событие. Переходишь в «Триггеры» в Google Tag Manager → «Создать»
2. Называешь триггер понятным именем, например, «Клик на Apple Podcasts» и нажимаешь «Настройки триггера»
3. Выбираешь тип триггера «Клик» — «Все элементы»
4. В «Условиях активации триггера» выбираешь «Некоторые клики»
5. А чуть ниже выбираешь «Click Classes» → равно → platform apple-podcasts

В данном случае Click Classes равно « platform apple-podcasts », поскольку в примере мы рассматриваем нажатие на Apple Podcasts. Если ты хочешь отслеживать нажатие на другие платформы, то переменная Click Classes будет равно другому параметры. Ниже собран список переменных для всех стриминговых платформ.

Список переменных для стриминговых платформ

• Apple Podcasts: Click Classes равно platform apple-podcasts
• Google Podcasts: Click Classes равно platform google-podcasts
• Spotify: Click Classes равно platform spotify
• Яндекс.Музыка: Click Classes равно platform yandex-music
• VK: Click Classes равно platform vk-music
• Castbox: Click Classes равно platform castbox
• SoundStream: Click Classes равно platform soundstream
• Deezer: Click Classes равно platform deezer
• Pocket Casts: Click Classes равно platform pocket-casts
• Podcast Addict: Click Classes равно platform podcast-addict
• Overcast: Click Classes равно platform overcast
• YouTube: Click Classes равно platform youtube
• Soundcloud: Click Classes равно platform soundcloud
• RSS: Click Classes равно platform rss

1. Нажимаешь «Сохранить»
2. Теперь идешь в Google Tag Manager в «Теги» и создаешь новый тег с названием, например «Facebook Pixel – Apple Podcasts» . Название может быть любым, главное, чтобы ты понимал за что именно этот тег отвечает.
3. В «Конфигурации тега» снова выбираешь «Facebook Pixel» и снова вставляешь Facebook Pixel ID (например, 847798479232536)
4. В Event Name выбираешь Custom и вводишь свое название. Мы рекомендуем назвать этот ивент «StreamingPlatform»
5. В «Object Properties» вводишь в Property Name , например, «apple-podcasts» . Можешь назвать сущность и по другому, но главное на латинице и без пробелов (дефисы и нижние подчеркивания допускаются). Property Value оставляем пустым, это нам сейчас не нужно.

Так будут выглядеть итоговые настройки

Все готово Теперь у тебя в Pixel также будут собираться события по нажатию на Apple Podcasts.

Если ты хочешь отслеживать события Pixel и на другие платформы, то шаги выше (1-12) надо проделать и для других платформ, но надо только поменять переменные, которые описаны на шаге 5.

Также ты можешь протестировать события Facebook Pixel и убедиться, что все работает как надо, по инструкции от Facebook:

Log in or sign up to view

See posts, photos and more on Facebook.

Источник: help.mave.digital

Как добавить Google Tag Manager в приложение 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: [ … ],

Рекомендуется поместить идентификатор в переменную среды: вы сможете подключать разные среды к разным учетным записям 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, вам потребуется глубокое погружение в его конфигурации.

Источник:

Источник: dev-gang.ru