События в Google Tag Manager

В новой версии Google Tag Manager несколько изменился принцип работы с событиями, теперь нет стандартных тегов прослушивания кликов и других событий. Как же решить задачу по фиксации подобных действий?

В прошлом материале я описал некоторые обновления в Google Tag Manager. Сегодня предлагаю рассмотреть типичную ситуацию — фиксацию кликов.

На самом деле все достаточно просто, однако немного отличается от ранее используемой схемы. Напомню, в первой версии Google Tag Manager при настройке для фиксации событий использовались стандартные теги прослушивания событий и при их выполнении макрос {{event}} принимал одно из стандартных значений, например, gtm.click.

В новой версии Google Tag Manager нет необходимости добавлять теги прослушивания событий, достаточно при создании триггеров (ранее — правила) указать нужный тип события и задать правила сопоставления, например, с элементом, по которому выполнен клик.

Рассмотрим несколько примеров:

• клик по элементу, с указанным идентификатором;
• клик по ссылке, которая уводит посетителя с сайта.

Эти примеры служат только для демонстрации нового принципа работы, но поняв принцип их работы вы сможете создавать свои триггеры для активации нужных правил.

Посмотрим на фрагмент исходного кода страницы сайта:

Пример кода страницы

Для работы нам понадобятся стандартные переменные, которые по умолчанию отключены. Перейдем к списку переменных:

Переход к переменным

И укажем те из них, которые понадобятся нам:

Переменные по умолчанию в Google Tag Manager

Первая переменная будет содержать ID элемента, по которому выполнен клик, вторая URL, по которому будет выполнен переход.

Теперь все готово для начала работы по созданию триггеров фиксирующих клики, приступим.

Первый пример: клик по элементу, с указанным идентификатором.

Перейдем к созданию нового тега:

Меню работы с тегом

выбираем тип пользовательский HTML:

Создание нового тега

Нажимаем синюю кнопку — продолжить. На втором этапе нам предлагают указать, при каких условиях будет активирован тег. Ранее такие условия назывались правилами, теперь это триггеры.

Создадим нужный нам триггер. Т.к. мы фиксируем клик, то тип события указываем как Click:

Создание триггера в Google Tag Manager

Отображается окно создания нового триггера типа Click. Первый шаг уже считается завершенным, т.к. мы выбрали тип нашего события — это клик.

На втором шаге нам предлагают выбрать один из вариантов — это все клики или использовать фильтр. Нам нужно фиксировать клик только по определенному элементу, по этому выбираем Some Clicks:

Выбор типа клика

После этого нам предлагают указать условия. Вернемся к исходному коду страницы и посмотрим, что нас интересует элемент, у которого ID равен demo_id. Укажем это условие:

Условие клика по определенному элементу с id

Первое поле — стандартная переменная, второе — условие сопоставление, третье — шаблон для сопоставления.

Нажимаем синюю кнопку Продолжить и завершаем создание триггера. Т.к. нам нужен клик по элементу, который не является ссылкой, выбираем тип триггера Click, в поле Название — указываем понятное название триггера:

Завершение создания триггера

Сохраняем выполненные настройки и возвращаемся к форме настройки тега. Теперь необходимо указать содержимое тега:

Содержимое тега

Нажимаем кнопку — создать тег. Если вы все сделали правильно, то вновь созданный тег появится в списке тегов:

Список тегов в Google Tag Manager

Теперь проверим работу наших настроек, перейдем в режим просмотра версии контейнера.

Режим просмотра в Google Tag Manager

В новой версии Google Tag Manager в режиме просмотра активируется режим отладчика, дополнительных инструментов нам не понадобится. Проверяем:

Результат настройки Google Tag Manager

Работает, как нужно, посмотрим в отладчике:

Информация в отладчике Google Tag Manager

Проверим через отладчик активацию тега:

Активация тега в отладчике

Вывод — выполненная настройка работает, мы фиксируем клик по нужному нам элементу.

Второй пример: клик по ссылке, которая уводит посетителя с сайта.

Действия аналогичные, создаем тег пользовательский HTML и указываем для него триггер активации, но при создании триггера задаем немного другие условия.

Итак, вы дошли до этапа создания триггера, выбрали тип Click и находитесь на втором этапе создания триггера:

Второй этап создания триггера Google Tag Manager

Выберите Some Clicks и в условиях укажите, что URL элемента по которому выполнен клик не должен содержать имя вашего домена, пример:

Переход с сайта prometriki.ru

На следующем шаге укажите тип триггера как Link Click, и задайте дополнительное правило:

Дополнительное правило активации

после чего можно проверить работу триггера.

Смотрим информацию в отладчике:

Активация тега по клику на ссылке

Клик по ссылке в отладчике

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

Не уверен, что подобное может быть у вас, но у меня фиксация кликов в новой версии Google Tag Manager не работала на сайте, где установлена первая версия. Код первой версии шел выше кода новой, вероятно это замечание будет кому-то полезно.

Не забывайте нажать кнопку любой социальной сети ниже поста!

Настройка отслеживания событий Google Analytics в Google Tag Manager

Продолжая тему настройки Google Analytics без внесения изменений в исходный код страниц предлагаю вам описание процесса настройки фиксации событий Google Analytics в Google Tag Manager.

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

Для начала определим, какие события мы можем фиксировать:

1. клики по ссылкам
2. клики на любых объектах страницы
3. таймеры
4. отправка формы

Обратите внимание, что каждый элемент на странице, событие по которому вы хотите зафиксировать, должен быть снабжен уникальным идентификатором, например, <div id=»button»></div>.

В связи с тем, что в настоящее время актуальной версией Google Tag Manager является версия 2, рекомендую ознакомиться с этим материалом, описывающим фиксацию кликов в новой версии.

Давайте остановимся на первых двух вариантах, поскольку это наиболее часто используемые варианты использования возможностей отслеживания событий Google Analytics. Если вы еще не используете их, обязательно настройте на своем сайте. Событиями на сайте могут быть различные «точки» взаимодействия между вашим сайтом и пользователем. Например, клик по кнопке «Подписка на новости», загрузка файла с прайс-листом или коммерческого предложения, ссылка для печати купонов предоставляющих возможность получить услуги или приобрести товар, или приглашений на мероприятия. Немного отступая от темы хочу порекомендовать вам, если вы этого еще не сделали, настроить фиксацию целей на своем сайте, где в качестве цели будут использоваться события. Это позволит вам более объективно оценить эффективность вашего сайта.

Итак, приступим к настройке отслеживания событий Google Analytics в Google Tag Manager. Разберем подробно первые два варианта.

Первый вариант — фиксация кликов по ссылкам

Перейдите к списку имеющихся у вас тегов и добавьте новый, нажатием на соответствующую кнопку в панели инструментов:

Создание нового тега

Укажите имя тега, к примеру «События — клики на ссылках» и тип тега «Блок прослушивания событий -> Прослушивание кликов по ссылке». После выбора типа тега необходимо добавить правила его активации, т.е. условия при которых данный тег будет исполнятся. Нам для решения задачи необходимо добавить два правила, для этого нажмите на кнопку «Добавить правило активации тега»:

Добавление правила активации тега

Выбираем правило под именем «Все страницы» из списка существующих и нажимаем кнопку «Сохранить».

Выбор из существующих правил

После этого еще раз нажимаем на кнопку «Добавить правило активации тега», в появившемся окне необходимо выбрать пункт «Создать новое правило» (у вас может не быть такого пункта если вы до этого уже использовали в теге все ранее созданные вами и предустановленные правила, ничего страшного), указать название правила, например, «Клик по ссылке О компании» и задать параметры условий, при которых это правило будет активироваться. Нам необходимо указать два условия, первое это событие «клик по ссылке» и второе, определить по какой ссылке произведен клик, используя для этого ID элемента.

Из первого выпадающего списка выберите макрос «{{event}}», следующий выпадающий список задает условия сопоставления, выберите «равно» и в поле введите значение «gtm.linkClick». На этом создание первого условия завершено.

Создадим второе условие в текущем правиле. Нажмите «+» справа от поля с текстом «gtm.linkClick», ниже появится строка настройки второго условия. Выберите макрос «{{element id}}», условие сопоставления «равно», в поле введите ваше значение ID ссылки. Узнать его можно просмотрев исходный код страницы или используя популярный плагин Firebug.

Как узнать ID элемента на странице

Если вы сделали все как описано выше у вас должно получится следующее:

Создание сложного правила активации тега

Нажмите на кнопку «Сохранить», окно добавления правил для тега закроется. На этом настройка тега завершена, необходимо сохранить изменения в теге нажатием на кнопку «Сохранить» внизу страницы:

Настроенный тег

Следующим действием необходимо передать информацию о фиксации клика на ссылке в Google Analytics. Для этого создайте новый тег, введите его имя, например, «Event Tracking UA — Клик по ссылке О компании», тип тега укажите как «Google Analytics» или «Universal Analytics», в зависимости от того, какой вариант вы выбрали создавая профиль в Google Analytics, также необходимо указать «Идентификатор отслеживания» в формате UA-XXXXXXXX-XX.

Тип отслеживания выберите «Событие». Вам предложат ввести информацию «Параметры отслеживания событий», укажите нужные вам значения. Для этих целей, если не использовать Google Tag Manager используются функции _trackEvent(category, action, opt_label, opt_value, opt_noninteraction) в Google Analytics и ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value) в Universal Analytics.

После ввода значений необходимо указать правила активации тега, нажмите «Добавить правило активации тега» выберите из списка существующих правил созданное ранее «Клик по ссылке О компании». Внимание! Нужно выбрать только одно правило! Сохраните изменения.

Настройка тега для передачи данных в Google Analytics

На этом создание тега для передачи данных в Google Analytics завершено, сохраните изменения нажатием на кнопку «Сохранить» в нижней части страницы. В итоге у вас должно получится примерно следующее:

Список необходимых тегов

В списке тегов должны присутствовать как минимум три тега:

1. тег с подключением кода отслеживания Google Analytics;
2. тег для фиксации кликов на ссылке;
3. тег для передачи данных о клике в Google Analytics.

Создайте версию контейнера Google Tag Manager нажав на кнопку «Создать версию» в правом верхнем углу, после чего опубликуйте изменения в контейнере нажав кнопку «Опубликовать», также в правом верхнем углу.

Публикация версии контейнера

Теперь вы можете проверить результаты работы перейдя в отчеты Google Analytics группы «В режиме реального времени» и выполнив необходимое вам действие. Обратите внимание, что в официальной документации, в примере отслеживания кликов по ссылкам, приводится немного отличный от предложенного мной вариант условия активации тега.

Вместо сопоставления во втором условии по ID элемента, предлагается использовать URL ссылки или его часть, для этого используется макрос {{element url}}. Какой вариант использовать, решать вам. Узнать больше о макросах вы можете в официальной документации, а также посмотрев их список в панели управления тегами:

Предустановленные макросы в Google Tag Manager

Второй вариант — фиксация события на любом элементе страницы

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

Если в случае с ссылками мы фиксировали в макросе «{{event}}» событие «gtm.linkClick», то для произвольных элементов нужно использовать «gtm.click». Для тега мы выбирали значение «Блок прослушивания событий -> Прослушивание кликов по ссылке» то теперь нужно выбрать «Блок прослушивания событий -> Прослушивание кликов».

Весь остальной алгоритм остается прежним. Добавляем два тега, в первом прослушиванием все нужные нам события, во втором передаем значения в Google Analytics. При этом не забываем правильно указывать правила активации тегов. Работа с таймером и отправкой форм схожа с описанными вариантами, примеры настройки приведены в официальной документации Google Tag Manager.

Как отслеживать события с помощью Диспетчера тегов Google [Руководство по установке]

Каждый цифровой маркетолог хотел бы знать точную цифру эффективности своего веб-сайта. Маркетологам с небольшими техническими знаниями непросто разобраться в этом самостоятельно. Маркетологу часто требуется помощь разработчика для технических работ, например, при использовании инструментов отслеживания, таких как Google Analytics, и при редактировании исходных кодов.

Настройка события/цели в Google Analytics также является одним из них. Если вы хотите отслеживать определенное поведение посетителей вашего сайта, вам нужно немного отредактировать исходный код HTML, что обычно и делают разработчики.

Если вы не разработчик, но хотите сделать это самостоятельно, вам поможет Диспетчер тегов Google (GTM). GTM позволяет развертывать простые теги для установки целей или отслеживания событий без дополнительных технических знаний или разработчика. Давайте более подробно рассмотрим, как настроить теги событий и отслеживать их.

Что такое Диспетчер тегов Google (GTM)?

Диспетчер тегов Google (GTM) — это бесплатный инструмент, позволяющий эффективно управлять кодами отслеживания, известными как теги, на вашем веб-сайте или в мобильном приложении. Вы можете легко управлять тегами и размещать их на своем веб-сайте без помощи разработчика. Узнайте больше о Диспетчере тегов Google в нашей предыдущей публикации: Что такое Диспетчер тегов Google? Нужно ли мне это для моего сайта?

Зачем нужен Диспетчер тегов Google?

Многие маркетологи используют Google Analytics для измерения эффективности своих веб-сайтов, потому что они могут получать информацию о трафике на свои веб-сайты без необходимости настраивать дополнительные конфигурации. Даже базовая информация, которую предоставляет Google Analytics, такая как источники/среда трафика, продолжительность и показатель отказов, будет достаточно значимой, чтобы помочь вам улучшить свой веб-сайт. Его отчеты о потоке поведения также помогут вам получить общее представление о том, какой путь ведет к конверсии.

А что, если вы хотите измерить и оценить более конкретные цели? Давайте будем более конкретными. Что делать, если вы хотите измерить количество нажатий на определенную кнопку? В Google Analytics есть такие функции, как анализ событий и настройка целей с использованием события. Но для анализа события необходимо редактировать исходный HTML-код. Здесь вам на помощь приходят разработчики. Вместо этого теперь у вас есть Диспетчер тегов Google, который будет развертывать теги отслеживания событий для анализа события и установки целей.

Если вам нужна информация об определенном событии из Google Analytics, обратитесь к отчетам о событиях. Чтобы увидеть данные отчета или сделать их отслеживаемыми Google Analytics, вам необходимо изменить исходные коды для параметра определенного события. Параметр события отображается в отчетах о событиях Google Analytics. Необходимо настроить параметр для категории события и действия по событию. Метка события и значение являются необязательными, но доступны для более точного отслеживания.

Отчет о событиях Google Analytics — отображается статистика каждого параметра, включая категорию события и действие события.

Если вы собираетесь настраивать теги отслеживания для каждого события без использования Диспетчера тегов Google, вам необходимо вручную вставить приведенные ниже коды. (Дополнительные примеры кодов см. в справке по примерам кода Google Analytics). Маркетологам требуется много времени и усилий для редактирования исходных кодов один за другим. Именно тогда Google Tag Manager становится удобным, поскольку он может создавать и развертывать теги отслеживания событий для вас, чтобы Google Analytics мог их отслеживать.

Теги событий Google Tag Manager и отслеживание событий Google Analytics.

Прежде чем настраивать теги событий с помощью Диспетчера тегов Google, важно понять, как работает GTM и как Google Analytics отслеживает эти теги. Мы рекомендуем вам прочитать нашу предыдущую публикацию Что такое Диспетчер тегов Google? Нужно ли мне это для моего сайта? , чтобы понять, как работает GTM. Есть много событий, которые вы можете настроить, но мы начнем с самого простого и часто используемого: событие щелчка. Чтобы заставить GTM работать на вашем веб-сайте, обратитесь к официальному руководству Google Tag Manager.

В этом руководстве мы развернем теги с помощью GTM и настроим цели, а также проверим данные в Google Analytics. Вот как мы собираемся это сделать. Допустим, вы хотите узнать количество кликов по кнопке «Свяжитесь с нами» на глобальной панели навигации (GNB) вашего веб-сайта и зарабатываете три доллара за клик.

1. Настройка триггера

Во-первых, необходимо уточнить, при каких условиях должен срабатывать тег. Другими словами, вам нужен триггер, чтобы сообщить GTM, когда и как активировать тег. Триггер клика — это базовая функция, предлагаемая GTM. Давайте настроим отслеживание событий, чтобы активировать тег при любых кликах на всех страницах.

Войдите в свою учетную запись GTM и нажмите «Триггеры», а затем «НОВОЕ». Появится окно для настройки нового триггера. Нажмите «Конфигурация триггера», и вы увидите поле для выбора типа триггера, как на изображении ниже.

Тип триггера позволяет выбрать типы событий для срабатывания триггера. Вы можете использовать базовые триггеры или специальные триггеры, написав код JavaScript самостоятельно.

Чтобы теги отслеживали клики, вам нужен триггер, который срабатывает при кликах посетителей. Выберите один из двух типов, как показано на изображении выше, в категории «Click». Выберите «Все элементы», так как мы собираемся отслеживать события кликов в меню GNB.

Теперь пришло время для более детальной настройки. Поскольку мы хотим, чтобы триггер срабатывал при нажатии посетителями определенной кнопки, мы хотим «Некоторые клики», а не «Все клики». Затем нам нужно более конкретно указать клики, по которым мы хотим, чтобы триггер срабатывал. Есть много способов сделать это, но давайте возьмем в качестве примера веб-сайт Twinword и назначим селектор CSS ID для срабатывания триггера.

Вы можете проверить селектор в соответствующем исходном коде.

Кнопка «Связаться с нами» в GNB Twinword имеет идентификатор, обозначенный как пункт меню-10332. Используя назначенный селектор CSS, вы можете настроить условие триггера. Настройте его, как показано ниже, чтобы триггер срабатывал только при нажатии кнопки «Связаться с нами».

Мы настроили его так, чтобы триггер срабатывал только тогда, когда посетители нажимают кнопку с тем же селектором идентификатора CSS, которым является пункт меню-10332. Поэтому теперь триггер срабатывает не на все клики, а только на клики по элементу, который имеет тот же ID, что и кнопка «Связаться с нами», пункт меню-10332.

Затем нажмите «Сохранить», чтобы сохранить все настройки. Вот как вы настраиваете триггер для событий кликов. Существуют и другие способы настройки триггеров, например использование содержимого ссылок или текстов, на которые нажимают посетители. Итак, выберите способ, который лучше всего соответствует вашей цели.

2. Настройка тега события

После того, как вы закончите настройку триггера, пришло время создать теги. Прежде чем создавать теги кликов, мы должны проверить, какие данные нам нужны для отслеживания событий в Google Analytics. Как упоминалось ранее, для отслеживания событий существует два значения: категория события и действие по событию. Наряду с этими двумя базовыми значениями обычно также используется метка события. В Диспетчере тегов Google вы можете легко ввести эти три типа информации.

По сути, они сообщают Google Analytics, как отличить событие, которое мы хотим отслеживать, от других событий. Как и в нашем сценарии, мы хотим отслеживать событие нажатия на кнопку «Связаться с нами». Вы можете ввести необходимые данные, как показано на снимке экрана ниже, чтобы создать тег для этого события.

В отличие от категории события или действия, мы использовали {{Page Path}} для метки, одной из основных переменных, предлагаемых Диспетчером тегов Google. Многие базовые переменные действительно полезны для маркетологов, у которых мало технических знаний. Если вы укажете Page Path в качестве переменной для метки события, вы можете легко узнать, на какой странице произошло событие, без необходимости вручную писать коды JavaScript.

Для триггера назначьте триггер GNB Click — Contact, который мы уже сделали, чтобы тег мог быть доставлен в Google Analytics всякий раз, когда посетитель нажимает на контакт. Это становится большой проблемой, если триггер не срабатывает должным образом или используются другие триггеры. Поэтому важно сделать имя тега и триггера простым, чтобы четко указать, какой тег соответствует какому триггеру.

После развертывания тега отчет о событиях Google Analytics покажет вам количество событий для каждой категории событий, действий и меток. В отличие от категории события и действия, значение которых было задано заранее, метка события, назначенная переменной {{Page Path}}, покажет вам, где произошло событие.

3. Настройка целей с помощью Google Analytics.

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

Вы получите более подробную и точную статистику, развернув отслеживание событий для определенного поведения посетителей вашего веб-сайта и предоставив различные значения в соответствии с каждым поведением. Чтобы настроить цели Google Analytics, перейдите на Admin > View > Goals и создайте новую цель. Среди нескольких способов настройки обычно делается запись конверсии цели при обнаружении тега события, который вы изначально установили в GTM. Предположим, что один клик по кнопке «Связаться с нами» стоит 3 доллара, и на основе этого настроим цель.

Во-первых, вам нужно определиться с типами новой цели. Google Analytics предоставляет шаблоны, которые вы можете применять в соответствии с целью и назначением вашего веб-сайта. Но поскольку событие клика не включено в шаблоны, вам нужно выбрать «Пользовательский».

В описании цели предоставьте информацию о цели для удобного управления вашей целью. Название должно ясно и интуитивно отражать цель. Выберите «Событие» для типа, потому что мы уже внедрили тег события в Диспетчере тегов Google.

Если вы перейдете к сведениям о цели, поместите информацию о теге, который вы ранее развернули в GTM, в условии события. Как видно на снимке экрана ниже, я ввел значения в категорию и действие в качестве того, что я ввел в GTM, и оставил метку пустой, поскольку она является переменной. Я назначил 3 доллара за конверсию, но вы можете назначить любую сумму по вашему выбору.

Когда все будет сделано, нажмите «Подтвердить эту цель», чтобы узнать, как часто эта цель конвертировалась на основе ваших данных за последние 7 дней. Если коэффициент конверсии равен 0, проверьте еще раз, не было ли ошибки в предыдущем процессе. В противном случае нажмите «Сохранить», чтобы применить создание новой цели.

В этой публикации мы рассмотрели, как развертывать теги с помощью Диспетчера тегов Google для отслеживания событий на вашем веб-сайте и измерения производительности без помощи разработчика. Кроме того, мы узнали, как настроить цель в Google Analytics, чтобы получить более глубокое представление о теге события, который мы установили в Диспетчере тегов Google. Если у вас возникли проблемы с настройкой целей или отслеживанием конверсий, ознакомьтесь с нашей предыдущей публикацией в блоге «Руководство по настройке целей Google Analytics».

Надеюсь, что это руководство было полезным, и дайте нам знать, если у вас есть дополнительные вопросы в разделе комментариев ниже!

Как отслеживать события на вашем сайте с помощью Диспетчера тегов Google | Билл Су | Analytics for Humans

Пошаговое руководство, кодирование не требуется

В предыдущей статье мы рассказали вам, как настроить Google Analytics с помощью Диспетчера тегов Google для отслеживания всех посещений страниц пользователями на вашем веб-сайте ( просмотры страниц).

Как правильно настроить Google Analytics

Пошаговое руководство

medium.com

Однако во многих ситуациях вам нужно отслеживать поведение пользователей на ваших страницах, например, нажатие кнопки «Добавить в корзину». клики, отправка форм или просмотры видео.

Все эти действия называются «событиями», и сегодня мы собираемся показать вам, как отправлять эти события в Google Analytics через Диспетчер тегов Google.

ПРЕДУПРЕЖДЕНИЕ. В этом руководстве предполагается, что на вашем веб-ресурсе настроены Диспетчер тегов Google и Google Analytics. Если вы еще этого не сделали, ознакомьтесь с нашей последней статьей, указанной в начале этого поста, чтобы настроить их.

Как обычно, давайте начнем с плана сражения, чтобы мы точно знали, во что ввязываемся:

• Сначала мы составим список событий, которые хотим отслеживать.
• Во-вторых, мы настроим триггеры событий для каждого события, которое вы хотите отслеживать на своем веб-сайте, с помощью инструмента под названием «Селекторы элементов CSS».
• В-третьих, мы будем настраивать теги для каждого события, чтобы отправлять данные, связанные с этими событиями, в Google Analytics.
• Наконец-то мы используйте функцию «предварительного просмотра» в Диспетчере тегов Google , чтобы убедиться, что все события отслеживаются правильно.

В этом руководстве мы рекомендуем использовать Диспетчер тегов Google для отслеживания событий по трем причинам:

• Этот подход не требует добавления какого-либо кода на ваш веб-сайт , что значительно упрощает внедрение, если вы этого не сделаете. иметь технического человека в вашей команде.
• Google постоянно меняет свой механизм отслеживания , и они выпустят свою новую библиотеку кодов отслеживания под названием gtag.js в ближайшие пару месяцев. Использование Диспетчера тегов Google поможет вам избежать хлопот, связанных с повторным входом в базу кода и изменением механизма отслеживания каждый раз, когда у них появляется обновление.
• Диспетчер тегов Google предоставляет более простой интерфейс для просмотра отслеживаемых событий. Этот интерфейс поможет вам оставаться организованным, если вы отслеживаете много событий на своем сайте.

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

Раньше я был большим поклонником подхода «отслеживать все», который выступает за отслеживание каждого отдельного события, происходящего на вашем веб-сайте.

Преимущество этого подхода заключается в том, что он помогает вам понять полную картину пользовательского опыта на вашем веб-сайте. Как человек, имеющий опыт работы с данными, я обожаю идею иметь все данные.

Однако недостатком этого подхода является то, что его очень легко перегрузить объемом данных и переоценить фактическую ценность для бизнеса затрат вашего (или вашего аналитика) времени на анализ каждого отдельного элемента на вашей странице.

Для малого и среднего бизнеса я бы не рекомендовал этот подход при отслеживании ваших событий. Для более крупных компаний я бы по-прежнему рекомендовал инвестировать в более сложные инструменты отслеживания поведения, такие как Hotjar (для теплового картирования событий) и Heap Analytics (для отслеживания воронки событий), вместо использования Google Analytics.

В последнее время я стал большим поклонником подхода «макро- и микроконверсии», который выступает за отслеживание только макро- и микроконверсий на вашем веб-сайте.

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

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

Составьте краткий список событий макро- и микроконверсии для вашего веб-сайта (в идеале не более десяти) на основе приведенного выше описания. Затем мы будем готовы перейти к следующему шагу по фактической настройке отслеживания событий.

Давайте начнем с краткого обзора того, что мы обсуждали о триггерах на прошлой неделе.

По умолчанию Диспетчер тегов Google автоматически отслеживает все события и посещения страниц вашего веб-ресурса. Однако он не записывает какие-либо из этих данных, если вы не скажете ему об этом. Триггеры — это способ, с помощью которого вы можете указать GTM отслеживать определенные события и просмотры страниц, которые вы хотите отправить в Google Analytics или другие службы.

Поэтому нам нужно сообщить Диспетчеру тегов Google, что мы хотим отправить события, которые мы скомпилировали на предыдущем шаге, в Google Analytics. Для этого мы воспользуемся так называемым селектором элементов CSS.

Краткое руководство по выбору событий

Чтобы определить события, которые вы хотите отслеживать, полезно понимать, как эти кнопки закодированы на вашем веб-сайте и как мы будем выбирать эти элементы.

На вашем веб-сайте все элементы кодируются тегами HTML со структурой, показанной ниже:

Тег HTML состоит из нескольких ключевых компонентов:

• Имя тега , определяющее функцию этого конкретного тега в общем контексте вашего веб-сайта. В данном случае «h2» означает «первый заголовок».
• Имя атрибута , определяющее дополнительную информацию о заголовке, такую ​​как его класс (используется для группировки тегов с похожими атрибутами), id (используется как уникальный идентификатор тегов) и стили .
• Затронутое содержимое — это текст, который будет отображаться на веб-сайте либо в виде кнопки, либо в абзаце.

Учитывая эти компоненты тега, селектор элементов CSS представляет собой язык поисковых запросов, с помощью которого вы можете систематически идентифицировать определенные теги HTML на своем веб-сайте.

Например, тег HTML, показанный на рисунке, можно выбрать с помощью следующего простого запроса «h2.primary».

Чтобы узнать больше о синтаксисе селектора CSS, воспользуйтесь ссылкой ниже.

Справочник по селекторам CSS

Хорошо организованные и простые для понимания руководства по созданию веб-сайтов с большим количеством примеров использования HTML, CSS, JavaScript… Менеджер

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

Диспетчер тегов Google позволяет идентифицировать события на вашем веб-сайте на основе различных атрибутов событий (они называют эти атрибуты «переменными»). Вы можете получить список всех его встроенных переменных с помощью кнопки «переменная -> настроить» в Диспетчере тегов Google.

Как видно из приведенного выше снимка экрана, Диспетчер тегов Google предлагает очень полный список встроенных переменных для идентификации событий, от щелчка элемента до отправки формы.

В этом уроке мы сосредоточимся на одном из самых основных событий — нажатии.

Для этого мы будем использовать переменную «Click Element». Вы можете включить его на экране выше, установив флажок рядом с «Элемент щелчка» (вы также можете включить другие поля в категории «Щелки», чтобы включить дополнительные параметры во время выбора события).

Определите селектор CSS ваших событий

Теперь нам нужно определить уникальный селектор CSS каждого из наших событий.

Для этого мы обратимся за помощью к инструменту веб-разработки Google Chrome, набору инструментов, к которым вы автоматически получаете доступ, если у вас есть Google Chrome.

В качестве примера мы будем использовать Google Merchandise Store.

В Google Merchandise Store, когда пользователь нажимает кнопку добавления в корзину определенного продукта, действие добавления в корзину выполняется на странице, а не направляет пользователей на отдельную страницу. Поэтому этот клик необходимо отслеживать как событие микроконверсии.

Находясь на этом конкретном экране (вы можете следить за ним, перейдя по этой ссылке), щелкните правой кнопкой мыши и выберите «проверить» в раскрывающемся меню. В правой части экрана откроется боковая панель консоли, как показано на скриншоте ниже.

Как поясняют инструкции на снимке экрана, сначала следует щелкнуть значок выбора элемента в левом верхнем углу консоли. Затем следует навести курсор на интересующий элемент, щелкнуть по нему, и ваш CSS-идентификатор можно будет найти в правой части консоли.

Наконец, используйте консольный запрос document.querySelectorAll, чтобы убедиться, что возвращается только один результат, поэтому селектор CSS уникален (обычно так и бывает). Здесь у вас есть селектор CSS.

П.С. Если ваш селектор CSS не уникален, попробуйте сделать его длиннее, добавив дополнительные параметры на шаге 3 (они остаются слева от овального аннотатора). Если это по-прежнему не решает проблему, вам нужно определить перекрывающийся элемент и исключить его из срабатывания Диспетчера тегов Google (позже мы покажем, как это сделать).

Настройка триггера

Теперь мы готовы создать триггер.

Перейдите в раздел «Триггер» Google Tag Manager и выберите «Новый».

Щелкните поле «Конфигурация триггера» и выберите «Щелкнуть >> Все элементы».

На следующем экране настройки выберите «Некоторые клики», что означает, что вы хотите отслеживать только определенные клики, происходящие на вашем веб-сайте.

В следующих параметрах настройки выберите «Щелкнуть элемент», «Соответствует селектору CSS» и введите уникальный селектор CSS, указанный на предыдущем шаге.

Если ваш селектор CSS не был уникальным, несмотря на расширение параметров, вам следует указать события, которые вы не хотите отслеживать, и создать еще одно правило на этом экране с параметром «не включает селектор CSS».

Когда все настроено, это должно выглядеть так, как показано на экране ниже.

Наконец, сохраните все конфигурации. Теперь мы готовы установить тег!

Хорошие новости, самая сложная часть этого процесса завершена. Теперь все нетехническое плавное плавание отсюда!

На этом шаге мы настроим тег, который отправляет триггер события в Google Analytics.

Как я показал в нашем посте на прошлой неделе, перейдите в раздел «Тег» Диспетчера тегов Google, используя правую панель навигации, и нажмите красную кнопку «Создать» в верхней части экрана.

Настройте тег

Настройте тег с теми же настройками Google Analytics, что и в публикации на прошлой неделе, но на этот раз вместо этого выберите «События».

При выборе событий вы получите еще несколько параметров, позволяющих указать Google Analytics, что это за событие. Вот мой рекомендуемый способ организации ваших мероприятий, но не стесняйтесь придумывать свою собственную структуру:

• Категория: Это общая категория события, будь то выездное мероприятие, помолвка и т. д.
• Действие: Это действие, которое произошло во время этого события, например «click_add_to_cart» или «click_video».
• Метка: Здесь вы размещаете дополнительную информацию о событии, например, какой продукт был выбран, какое видео просматривается и т. д.
• Значение: I вашего конвейера аналитики, вы можете присвоить значение этому событию. В противном случае я рекомендую пока оставить это поле пустым.

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

Соедините тег с триггером

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

Технически все ваши события должны быть правильно настроены и запускаться в Google Analytics. Однако, как и в случае с любой другой технологией, это почти никогда не происходит с первой попытки.

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

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

Затем, открыв вкладку Диспетчера тегов Google, откройте новую вкладку для своего веб-сайта. Вы найдете раздел отладчика в нижней части экрана, который выглядит как экран ниже 9.0003

В левой части этого раздела описываются все действия, которые вы предприняли на своем веб-сайте, а в правой части указано, какой тег активировался (или не активировался) в каждом из ваших действий.

Теперь вернитесь к списку событий, которые у вас есть, и щелкните каждое из них на своем веб-сайте, чтобы проверить, правильно ли срабатывает настроенный вами тег. Если это не так, вернитесь и дважды проверьте все шаги, чтобы убедиться, что все настроено правильно, и повторите попытку, пока не заработает.

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

This entry was posted in Популярное