Как подключить Яндекс.Метрику и Google Tag Manager
Сайт подкаста является для многих подкастеров единой платформой агрегирования всех выпусков и площадок для прослушиваний в одном месте.
Многие подкастеры выбирают плейсментом именно сайт подкаста и ведут туда рекламный трафик. Но трафик без аналитических данных и ретаргетированных пикселей — плохой трафик.
Сейчас мы тебе расскажем как подключить Яндекс.Метрику и Google Tag Manager, чтобы собирать все полезные данные.
Google Tag Manager дает тебе полную свободу в управлении всеми необходимыми скриптами.
Яндекс.Метрика
Яндекс.Метрика — это бесплатный аналитический инструмент от компании Яндекс (логично, да?), который дает кучу полезных данных, вроде количества посещений, демографических данных пользователей и т.д.
Если ты еще не знаком с этим инструментом, то рекомендуем ознакомиться с базой знаний Яндекса.
Как подключить Яндекс.Метрику к сайту
Шаг 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.
Как подключить Google Tag Manager к сайту
Это много сложнее, чем подключить Яндекс.Метрику, но все равно просто, благодаря нашей инструкции 🙂
Тебе нужно пройти всего лишь три простых шага.
Шаг 1: создай аккаунт в Google Tag Manager
перейди на https://tagmanager.google.com и авторизуйся в Google-аккаунте.
💬 Если у тебя нет Google-аккаунта, то его необходимо создать.
После этого ты попадешь на такую страницу:
На этой странице необходимо создать аккаунт в GTM. Для этого нужно нажать кнопку «Создать аккаунт»
В Google Tag Manager следующая иерархия:
👉 Аккаунт
👉 Контейнер
👉 Теги (как раз на этом уровне ты и вставляешь все необходимые тебе скрипты)
Заполняешь все необходимые поля и в «Целевой платформе» выбираешь «Веб-сайт»
После этого соглашаешься с Условиями использования Google Tag Manager (там ничего интересного) и все, первый шаг пройден 🥳
Шаг 2: установи Google Tag Manager ID на сайт
После создания аккаунта у тебя появится поп-ап со скриптами Google Tag Manager. Тебе не нужно ничего вставлять в <body> и <head>, мы уже сделали это за тебя.
Тебе нужно всего лишь скопировать GTM ID, который указан на картинке ниже, и нажать «ОК».
После этого скопированный ID надо поставить в mave.creators.
Для этого перейди в «Настройки» → «Настройки сайта» и в поле Google Tag Manager ID вставь скопированный ID.
Все готово, второй шаг также успешно пройден 💙
Шаг 3: настрой нужные тебе теги
Теги в Google Tag Manager — это скрипты, которые тебе нужны. Например, Facebook Pixel в рамках Google Tag Manager называется тегом.
Любой тег устанавливается по единому алгоритму:
создается тег
настраиваются триггеры срабатывания
публикуется контейнер
Как установить Facebook* Pixel на сайт через Google Tag Manager
Это наиболее частый запрос у подкастеров, поэтому рассмотри этот кейс подробнее.
Как установить Facebook* Pixel
Переходишь в Events Manager
Настраиваешь Facebook* Pixel по инструкции.
При подключении рекомендуем выбирать Conversions API and Facebook* Pixel
Копируешь Facebook* Pixel ID. Он выглядит примерно так: 847798479232536 (то есть просто цифры)
Идешь в Google Tag Manager и создаешь там новый тег. Это можно сделать напрямую в модуле «Обзор» через кнопку «Добавить новый тег» или в модуле «Теги» через кнопку «Создать»
указываешь название тега, например, Facebook* Pixel
нажимаешь на «Конфигурация тега» → Переходишь в «Галерею шаблонов» → Находишь Facebook Pixel (автор: facebookincubator) и выбираешь этот шаблон (кнопка «Выберите шаблон»)
Есть также способ через «Пользовательский HTML», но через шаблон правильнее и удобнее для дальнейших шагов.вставляешь свой Facebook Pixel ID в нужное поле
в Event Name выбираешь — Standard — PageView. Все остальные настройки оставляй как есть. Таким образом ты сделаешь настройку, что пиксель отрабатывал просто при загрузке сайта подкаста. Это обязательно, ниже мы подробнее расскажем как настроить пиксель на определенные события, например, на нажатие кнопки.
В «Триггерах» выбираешь All Pages с типом «Просмотр страницы».
В итоге получится вот такая настройка.
Нажимаешь «Сохранить».
После этого нажимаешь кнопку «Отправить» → «Опубликовать»
Этот шаг необходим, чтобы добавленный Facebook* Pixel опубликовался на сайте. Без этого шага ничего работать не будет.На этапе с указанием конфигурации отправки можно ничего не заполнять. Этот шаг необходим, если ты вносишь много изменений в GTM и хочешь понимать какие и когда были сделаны изменения.
Все готово, самый простой шаг пройден 🥳 Теперь на сайте твоего подкаста есть Facebook* Pixel, который срабатывает при загрузке сайта подкаста и эти данные можно использовать при настройке кампаний в Facebook* Ads.
Как настроить события Facebook* Pixel
Ты уже установил Facebook* Pixel, который собирает данные каждый раз, когда загрузился сайт подкаста в mave.
Но многие хотят сделать так, чтобы Pixel срабатывал только после нажатия на определенные события.
Для примера, рассмотрим вариант отработки Facebook* Pixel при нажатии на кнопки платформ. Например, ты хочешь собирать в Pixel только тех людей, которые нажали на кнопку послушать в Apple Podcasts.
При нажатии на Apple Podcasts (на мобайле, десктопе и планшетах) будет срабатывать событие Facebook Pixel
Как это сделать:
Для нажала тебе нужно создать триггер. То есть это действие, на которое будет происходит определенное событие. Переходишь в «Триггеры» в Google Tag Manager → «Создать»
Называешь триггер понятным именем, например, «Клик на Apple Podcasts» и нажимаешь «Настройки триггера»
Выбираешь тип триггера «Клик» — «Все элементы»
В «Условиях активации триггера» выбираешь «Некоторые клики»
А чуть ниже выбираешь «Click Classes» → равно → platform apple-podcasts
Список переменных для стриминговых платформ
Нажимаешь «Сохранить»
Теперь идешь в Google Tag Manager в «Теги» и создаешь новый тег с названием, например «Facebook* Pixel – Apple Podcasts». Название может быть любым, главное, чтобы ты понимал за что именно этот тег отвечает.
В «Конфигурации тега» снова выбираешь «Facebook* Pixel» и снова вставляешь Facebook Pixel ID (например, 847798479232536)
В Event Name выбираешь Custom и вводишь свое название. Мы рекомендуем назвать этот ивент «StreamingPlatform»
В «Object Properties» вводишь в Property Name, например, «apple-podcasts». Можешь назвать сущность и по другому, но главное на латинице и без пробелов (дефисы и нижние подчеркивания допускаются). Property Value оставляем пустым, это нам сейчас не нужно.
С самой конфигурацией тега ты закончил. Теперь надо выбрать триггер, когда он будет срабатывать. Чуть ниже нажимаешь «Триггеры» и выбираешь триггер, который был создан на шагах 5-6. В нашем примере — это «Клик на Apple Podcasts»
Так будут выглядеть итоговые настройки
Нажимаешь «Сохранить» и потом нажимаешь «Отправить»
Этот шаг важен, чтобы все, что ты настроил опубликовалось на сайте.
Все готово 🦄 Теперь у тебя в Pixel также будут собираться события по нажатию на Apple Podcasts.
Также ты можешь протестировать события Facebook* Pixel и убедиться, что все работает как надо, по инструкции от Facebook*.
*Facebook принадлежит компании Meta признаной экстремистской на территории РФ и запрещена.