Отслеживание кнопок сайта в Google Tag Manager 2.0

/ Ruslan Konygin / 16 комментариев

На страницах любого веб-сайта можно встретить различные кнопки, статистику кликов по которым было бы полезно отправлять в Universal Analytics.

Например:

  • Кнопки плагинов социальных сетей;
  • Кнопка “Добавить в корзину”;
  • Смена языка(ru,en,es и т.д.) на мультиязычных сайтах;
  • Кнопка “Отправить форму”

    • и др.

Отслеживать подобные кнопки можно с помощью Google Tag Manager(v2) и Universal Analytics.

Отслеживание кликов по кнопкам

Возьмем простейший пример: клик на кнопку одной из социальных сетей в данном блоге:
Пример кнопок социальных сетей

В Universal Analytics клики на кнопки удобнее всего отслеживать с помощью событий(Event Tracking).

Каждое событие характеризуется с помощью четырех основных параметров:

  • Category* — категория;
  • Action* — действие;
  • Label — название, ярлык;
  • Value — значение/ценность(целое число).

*Category и Action являются обязательными параметрами для каждого события.

Например, мы хотим отслеживать количество кликов по кнопке Facebook.
Будем использовать событие со следующими параметрами:
Category: Buttons
Action: click
Label: Facebook
Value: 1

Обычно для создания тега я настраиваю сперва переменные(если необходимо), потом триггеры(если необходимо), а потом и сам тег.

1.Настроим переменные

Нажмем в меню слева “Variables”, найдем блок “Clicks” и выберем все или некоторые нужные нам встроенные переменные. Галочка означает, что теперь переменная доступна для использования в контейнере:
Настройки переменных в Google Tag Manager

2. Настроим триггеры

Теперь перейдем в левом меню в пункт “Triggers” и нажмем кнопку “New”.

2.1. Choose your event — выберем “Click”.

2.2. Add filters — выберем Some clicks и определим условия, при которых будет срабатывать триггер.
! Здесь нужно определить, при нажатии на какой элемент будет срабатывать данный триггер.
У меня кнопка “Facebook” — это HTML-тег <a>, у которого атрибут “class” равен “icon-facebook”:
Пример HTML-разметки
Таким образом, нам подходит такой фильтр:
[ Click classes ] [ contains ] [ icon-facebook ]*

*Если вы не можете выбрать переменную “Click classes”(или другую, подходящую под ваш случай), вернитесь в п.1 и проверьте, что она активирована(и возле нее стоит галочка).

2.3. Configure your trigger
В поле “Trigger name” дадим имя нашему триггеру. Я обычно называю их так, чтобы было понятно, когда он срабатывает. Например, “T — Buttons — Facebook click”.
А в поле “Trigger type” выберем “Click” (тип “Link click” рассмотрим ниже).

После настройки мой триггер выглядел так:
Пример настройки триггера в Google Tag Manager

3. Создадим тег

Для этого выберем вкладку “Tags” в меню слева и нажмем кнопку “ New”.

3.1. Choose your tag
Просто кликнем на иконку “Google Analytics”

3.2. Choose a tag type
Выберем “Universal Analytics” и нажмем кнопку “ Continue”.

3.3. What triggers this tag to fire?

  • Выберем “Click”;
  • Во всплывающем окне “Choose from existing Click Triggers” выберем триггер, который мы создали в п.2, и нажмем “Save”;
  • Нажмем “Continue”

3.4. Configure your tag
Tag name: имя тега, например, “UA — Buttons — Facebook click — Event”.
Tracking ID: здесь нужно ввести идентификатор отслеживания для счетчика Universal Analytics. Найти его можно в Google Analytics: Администратор > Ресурс > Настройки ресурса.
Enable Display Advertising Features: можно поставить галочку по своему усмотрению.

Ниже идут настройки конкретного события(Event), которое будет отправляться в Universal Analytics при нажатии кнопки.
Track Type: Event
Category: Buttons
Action: clicked
Label: Facebook
Value: 1

Non-iteraction hit: я оставил без изменений
Пример настройки тега в Google Tag Manager
Далее нажимем “Create Tag”.

4. Опубликуем контейнер

Перейдем во вкладку Overview, нажмем на “Publish” и во всплывающем окне нажмем “Publish now”.

5. Протестируем работу тега

Если все было настроено верно, то при нажатии на отслеживаемую кнопку будет отправлено событие в Universal Analytics.
В интерфейсе Google Analytics выберем “Real-Time -> Events”. Если тег был настроен корректно, то при нажатии кнопки “Facebook” через несколько секунд в статистике Universal Analytics можно увидеть данные о событии:
Результаты данных в Universal Analytics

Заключение

Если на вашем сайте установлен Google Tag Manager, таким простым способом можно отслеживать клики по ключевым кнопкам на страницах вашего сайта. Через несколько дней, когда наберется достаточное количество данных в Universal Analytics, можно сделать выводы, как много пользователей нажимают на те или иные кнопки(в отчете «Уникальные события») и как часто они это делают(«Всего событий»).

Ruslan Konygin
Digital analytics consultant.

Want to improve your website performance?
Contact me!

16 комментариев

  1. Спасибо за инструукцию! Все работает.

    Подскажите, как можно отследить откуда пришли пользователи, которые расшаривают посты в блоге с помощью кнопок “поделиться”?

  2. Спасибо за инструкцию! Все очень доступно и понятно.

    Подскажите, а как можно отследить откуда пришли пользователи, которые расшаривают посты в блоге с помощью кнопок “поделиться”?

    1. Добрый день,
      К сожалению, универсальной инструкции нет, так как разные плагины «поделиться» могут функционировать по-разному. Некоторые из них имеют встроенную возможность отправлять данные в Universal Analytics, а некоторые(внедренные с помощью iframe) — вообще невозможно отследить

  3. Подскажите а как настроить отслеживание составной цели из кликов? Чтобы фиксировалось 1 достижение цели при определенной последовательности кликов по кнопкам в Analytics через GTM v2?

    1. Если у вас цель-funnel, то я бы при каждом клик отправлял ивент с просмотром виртуальной страницы с помощью GTM. А затем уже в Google Analytics использовал эти просмотры для настройки цели-последовательности

  4. Большое спасибо, Руслан, за вашу статью. После нескольких дней неудачных попыток настроить Tag Manager я натолкнулась на ваше объяснение и все сработало! Не могли бы вы уточнить, если есть несколько кнопок с одним классом, но переходами на разные страницы как правильно их идентифицировать?

    1. Спасибо вам за отзыв, приятно знать, что статья оказалась полезной.

      Чтобы настроить отслеживание кликов для кнопок с одним классом и с разными URL, я бы попробовал использовать для первой кнопки фильтры:
      — {{Click Classes}} contains your-class
      — {{Click URL}} starts with /my-page1

      А для второй кнопки фильтры:
      — {{Click Classes}} contains your-class
      — {{Click URL}} starts with /my-page2

      И так далее. Так вы охватываете кнопки с одним классом, но разделяете клики по ним, в зависимости от URL.

    1. Может через текст, который содержится в кнопке, или через url кнопки?

  6. Добрый день.
    На сайте https://dengisend.ru/rt/ есть кнопка «Перевести»
    когда она не активна то имеет верстку


    Перевести

    А когда активна (все поля заполнены):


    Перевести

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

  7. Добрый день:) Вот пытаюсь уже некоторое время настроить отслеживание кнопок социальных сетей. Это мои только первые попытки работы с GTM, поэтому все дается не очень просто. В Вашем примере вроде все понятно, но, наверное, интерфейс GTM немного обновился и я не могу пойти дальше последних параметров настройки триггера:
    Есть два условия:
    — Enable this trigger when all of these conditions are true
    — Fire this trigger when an Event occurs and all of these conditions are true
    То что мы прописываем:
    [ Click classes ] [ contains ] [ название класса ссылки facebook ]*
    Это в первое или во второе условие?:) Они обязательно оба должны использоваться? Или есть приоритетное условие, которое указываем всегда?
    Буду очень благодарна за помощь…

    1. В качестве условия «Enable this trigger when all of these conditions are true» Вам нужно выбрать [{{Page Path}}] [matches RegEx] [.*].(В случае, если вы активировали «Wait for tags» или «Check Validation»). Это условие определяет, на какой странице будут отслеживаться клики(в вышеуказанном условии-это все страницы-для простоты, но можно и уточнить).

      А уже в качестве условия «This trigger fires on» нужно указывать, какую именно ссылку вы хотите отслеживать.

      1. Наконец-то все получилось:) Спасибо!
        И еще уточняющий вопрос – у Вас в примере кнопка Facebook. А если я хочу отслеживать много кнопок соц сетей. На каждую из них я создам свой триггер. И на каждую нужно создавать отдельный тег? Или тег один, где будут все триггеры?

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

          1. Спасибо!
            В одной из Ваших публикаций, я читала о том, что Вы настроили код отслеживания Google Analytics как переменную, чтобы не вводить его постоянно. А примера того, как это сделать, Вы случайно не размещали?:)
            Еще раз спасибо за помощь с кнопками соц сетей! Давно пробовала это сделать, но только Ваш пример у меня действительно получился.

Comments are closed.