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

Copy of Как подключить Яндекс.Метрику и 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.

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

Google Tag Manager (GTM)

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

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

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

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

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

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

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

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

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

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

  • перейди на https://tagmanager.google.com и авторизуйся в Google-аккаунте.
    • 💬
    Если у тебя нет Google-аккаунта, то его необходимо создать.

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

    image
  • На этой странице необходимо создать аккаунт в GTM. Для этого нужно нажать кнопку «Создать аккаунт»
💬
В рамках одного аккаунта Google Tag Manager ты можешь создавать несколько контейнеров. В Google Tag Manager следующая иерархия: 👉 Аккаунт 👉 Контейнер 👉 Теги (как раз на этом уровне ты и вставляешь все необходимые тебе скрипты)
  • Заполняешь все необходимые поля и в «Целевой платформе» выбираешь «Веб-сайт»
    • image
  • После этого соглашаешься с Условиями использования Google Tag Manager (там ничего интересного) и все, первый шаг пройден 🥳

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

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

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

image

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

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

⚠️
Обязательно вставляй 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
  3. Копируешь Facebook Pixel ID. Он выглядит примерно так: 847798479232536 (то есть просто цифры)
  4. Идешь в Google Tag Manager и создаешь там новый тег. Это можно сделать напрямую в модуле «Обзор» через кнопку «Добавить новый тег» или в модуле «Теги» через кнопку «Создать»
    • указываешь название тега, например, Facebook Pixel
    • нажимаешь на «Конфигурация тега» → Переходишь в «Галерею шаблонов» → Находишь Facebook Pixel (автор: facebookincubator) и выбираешь этот шаблон (кнопка «Выберите шаблон»)
      • image
      💬
      Есть также способ через «Пользовательский 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
При нажатии на Apple Podcasts (на мобайле, десктопе и планшетах) будет срабатывать событие Facebook Pixel

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

  1. Для нажала тебе нужно создать триггер. То есть это действие, на которое будет происходит определенное событие. Переходишь в «Триггеры» в Google Tag Manager → «Создать»
  2. Называешь триггер понятным именем, например, «Клик на Apple Podcasts» и нажимаешь «Настройки триггера»
  3. Выбираешь тип триггера «Клик» — «Все элементы»
  4. В «Условиях активации триггера» выбираешь «Некоторые клики»
  5. А чуть ниже выбираешь «Click Classes» → равно → platform apple-podcasts
image
⚠️
В данном случае 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. image
  6. С самой конфигурацией тега ты закончил. Теперь надо выбрать триггер, когда он будет срабатывать. Чуть ниже нажимаешь «Триггеры» и выбираешь триггер, который был создан на шагах 5-6. В нашем примере — это «Клик на Apple Podcasts»
    7. Так будут выглядеть итоговые настройки
    Так будут выглядеть итоговые настройки
  7. Нажимаешь «Сохранить» и потом нажимаешь «Отправить» ⚠️ Этот шаг важен, чтобы все, что ты настроил опубликовалось на сайте.

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

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

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

Читать дальше:

📝RSS Feed: что это и где искать

📝Дистрибуция подкаста

📝Обзор аналитики mave

📝Создание нового подкаста

📢
Что-то упустили? Можно написать нам в чатик или на help@mave.digital — все разрулим✌️

Обновлено 30.11.2021