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

Это позволить тебе еще лучше понимать, как именно слушатели взаимодействуют с твоим подкастом

info icon
Данная функция доступна только для пользователей mave+ 

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

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

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

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

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

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

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

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

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

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

  • заходишь на https://metrika.yandex.ru/ и авторизуешься/регистрируешь в Яндекс-аккаунте

  • нажимаешь «Добавить счетчик» и вводишь любое название для твоего счетчика

  • в поле «Адрес сайта» вводишь URL твоего сайта подкаста в mave, например, https://polusladky.mave.digital

  • выставляешь все «ползунки» на «Вкл», соглашаешься с условиями пользовательского соглашения и нажимаешь «Создать счетчик»

image

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

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

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

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

image

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

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

image

Вот и все 🥳 Видишь как просто. Метрика через минут 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.

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

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

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

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

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

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

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

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

    image
  • На этой странице необходимо создать аккаунт в GTM. Для этого нужно нажать кнопку «Создать аккаунт»

info icon
В рамках одного аккаунта Google Tag Manager ты можешь создавать несколько контейнеров.

В Google Tag Manager следующая иерархия:

👉 Аккаунт
👉 Контейнер
👉 Теги (как раз на этом уровне ты и вставляешь все необходимые тебе скрипты)
  • Заполняешь все необходимые поля и в «Целевой платформе» выбираешь «Веб-сайт»

  • После этого соглашаешься с Условиями использования Google Tag Manager (там ничего интересного) и все, первый шаг пройден 🥳

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

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

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

image

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

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

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

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

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

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

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

  • создается тег

  • настраиваются триггеры срабатывания

  • публикуется контейнер

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

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

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

  1. Переходишь в Events Manager

  2. Настраиваешь Facebook* Pixel по инструкции.

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

  4. Копируешь Facebook* Pixel ID. Он выглядит примерно так: 847798479232536 (то есть просто цифры)

  5. Идешь в Google Tag Manager и создаешь там новый тег. Это можно сделать напрямую в модуле «Обзор» через кнопку «Добавить новый тег» или в модуле «Теги» через кнопку «Создать»

    • указываешь название тега, например, Facebook* Pixel

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

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

    • в Event Name выбираешь — Standard — PageView. Все остальные настройки оставляй как есть. Таким образом ты сделаешь настройку, что пиксель отрабатывал просто при загрузке сайта подкаста. Это обязательно, ниже мы подробнее расскажем как настроить пиксель на определенные события, например, на нажатие кнопки.

    • В «Триггерах» выбираешь All Pages с типом «Просмотр страницы».

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

    • Нажимаешь «Сохранить».

    • После этого нажимаешь кнопку «Отправить» → «Опубликовать»

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

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

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

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

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

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

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

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

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

  1. Для нажала тебе нужно создать триггер. То есть это действие, на которое будет происходит определенное событие. Переходишь в «Триггеры» в Google Tag Manager → «Создать»

  2. Называешь триггер понятным именем, например, «Клик на Apple Podcasts» и нажимаешь «Настройки триггера»

  3. Выбираешь тип триггера «Клик» — «Все элементы»

  4. В «Условиях активации триггера» выбираешь «Некоторые клики»

  5. А чуть ниже выбираешь «Click Classes» → равно → platform apple-podcasts

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

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

  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 оставляем пустым, это нам сейчас не нужно.

  6. С самой конфигурацией тега ты закончил. Теперь надо выбрать триггер, когда он будет срабатывать. Чуть ниже нажимаешь «Триггеры» и выбираешь триггер, который был создан на шагах 5-6. В нашем примере — это «Клик на Apple Podcasts»

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

  8. Нажимаешь «Сохранить» и потом нажимаешь «Отправить»

    error icon
    Этот шаг важен, чтобы все, что ты настроил опубликовалось на сайте.

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

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

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

*Facebook принадлежит компании Meta признаной экстремистской на территории РФ и запрещена.

Был ли этот ответ полезен?
😞
😐
😁