Ответ
Основы Google Tag Manager: ссылки и клики Опции темы
Старый 01.11.2014, 21:19
  #1
Tallulah
 
Регистрация: 23.07.2014
Сообщений: 74

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

Неважно, начали вы работать с новой версией GTM или нет, в этом посте мы объясним, как таргетировать клики на специальные html элементы, такие как ссылки, изображения или кнопки.

1. Основа – HTML элементы

Прежде чем окунуться с головой в работу с Google Tag Manager, будет полезно понять, с чем мы имеем дело. Если очень кратко, то веб-сайты, которые мы видим на экране, состоят из HTML.

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

Эти батончики и будут нашими HTML элементами!





Практический вывод

Эти части, из которых состоит страница сайта, например, ссылки, параграфы текста и кнопки, называются элементами.

2. У HTML есть атрибуты

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

Если мы посмотрим на батончик, то сразу же сможем кое-что о нем узнать: что это за батончик и какой у него размер.





Могут быть и дополнительные атрибуты, если мы посмотрим более внимательно: дата срока годности или производитель.

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

То есть, некоторые атрибуты видимые, некоторые скрытые, а некоторые относительные.

Практический вывод

HTML элементы имеют свои собственные атрибуты, которые раскрывают детали об этих элементах. Некоторые основные элементы, которые нас интересуют – это:

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

У определенного типа элементов есть разные атрибуты, например: ссылки также имеют атрибуты, которые показывают нам URL.

3. Какие элементы для нас важны

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





Этот подход работает хорошо, но очень быстро мы просто не сможем справиться с тоннами конфет.

Поэтому мы обратились к созданию правил, чтобы решить, какие же элементы имеют для нас значение. Вместо того чтобы сказать: «Я пометил все батончики, которые мне нравятся», теперь мы можем сказать так: «Меня интересуют только сникерсы и большие батончики».

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

Практический вывод

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

Например, мы можем сказать: «Я хочу отслеживать все ссылки, которые оканчиваются на .pdf» или: «Я хочу отслеживать, когда будут кликать на оранжевую кнопку».

4. Просматривать все клики

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





Практический вывод

В Google Tag Manager мы можем сделать все то же самое. Процесс будет выглядеть так:





Обратите внимание, что будут некоторые различия в Google Tag Manager версии 1 и версии 2.

Версия 1: Нам нужно добавить «Блок прослушивания событий» (Event Listener Tag) на любую страницу, на которой мы хотим прослушивать клики. Это особый тип блоков, которые мы можем запустить на любой странице. Нашей задачей остается только прослушать, когда произойдет клик.

Версия 2: Нам не нужно добавлять блок прослушивания! Когда мы создаем правило с кликом, то GTM автоматически добавляет блок прослушивания. У нас также есть выбор. Мы можем выбрать блок прослушивания ссылок или блок прослушивания кликов.

5. Изучение каждого кликнутого элемента

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

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

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

Название этого батончика похоже на «сникерс»?





Практический вывод

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

Таким образом, мы рассматриваем текущий кликнутый элемент. Мы можем сделать это при помощи Macro или Variable, в зависимости от версии GTM.

В GTM уже созданы макросы, которые упрощают нам этот процесс. {{element}} macro – это текущий элемент, с которым мы работаем, например, текущая ссылка. Если бы я кликал на множество элементов, то программа работала бы с каждым из них, как конвейерная линия.

Мы уже знаем, что у этого элемента есть определенные атрибуты, например, URL. Если нам нужен только URL, то мы можем использовать другой макрос, чтобы вытащить только этот конкретный атрибут. Это будет макрос {{element url}}.

Теперь наше правило будет выглядеть так:

Текущая ссылка оканчивается на .pdf?
{{element url}} оканчивается на .pdf?

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

Эти макросы называются «Переменные автоматических событий» (Auto-Event Variables) и они могут показать нам ID, классы, цель, текст и URL.

6. Объединяем все вместе

Предлагаем процесс, который мы применяли на практике:

1. Элементы – это части контента страницы, например, ссылки или изображения.
2. Элементы имеют атрибуты, которые мы можем использовать, чтобы решить, какой элемент имеет для нас значение.
3. В GTM Версии 1 мы добавляем блок прослушивания события, чтобы прослушать все клики. В Версии 2 этот блок уже встроен!

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

1. Ссылка на вашу страницу может выглядеть так:

<a id="brochure-download" class="dl-link orange" href="/download.pdf">Click here!"</a>

2. В примере выше:

ID аналогично «brochure-download»
Классы аналогично «dl-link orange»
URL аналогично http://www.lunametrics.com/download.pdf
Текст аналогично «Click Here!»

3. Мы можем использовать макросы переменной автоматического события, чтобы получить атрибуты кликнутых текущих элементов. Например:

{{element id}}
{{element classes}}

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

7. Часто задаваемые вопросы

Вопрос: Как я могу увидеть атрибуты определенного элемента?

Ответ: Изучите элемент при помощи вашего браузера.

В большинстве браузеров есть встроенная функция, которая позволяет вам изучать определенные элементы. Это немного сложнее, поэтому можете обратиться к руководству Chrome Web Developer Tools guide или Safari developer tool guide.

В Chrome можно просто щелкнуть правой кнопкой на ссылке и выбрать «Inspect Element» (проинспектировать элемент). Во вкладке Elements выбранные элементы будут выделены.





После того как вы выбрали HTML элемент, вы можете посмотреть на вкладку Properties (свойства), чтобы увидеть полный список атрибутов для этого элемента.





Вопрос: Что делать, если нет характерного атрибута, который я мог бы использовать?

Ответ: Поищите относительные атрибуты или добавьте свой!


Можете посмотреть на родительский и дочерний элементы (относительные атрибуты) или добавить свой уникальный ID или класс к элементу, чтобы создать характерный атрибут. Подумайте об использовании пользовательских атрибутов данных!

Вопрос: Что делать, если нет переменной автоматического события, которую я мог бы использовать?

Ответ: Вы можете использовать макрос переменной слоя данных!

Макрос {{element}} – это то же самое, что и макрос переменной слоя данных “gtm.element.” Если что-то не встроено в GTM, например, ID родительского элемента, то вы можете обратиться к переменной слоя данных аналогичной “gtm.element.parentNode.id”. Этот путь можно найти во вкладке Properties, расширив свойства разных атрибутов.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Баннеры и ссылки с сайтов с PR creativius Файлообмен 47 29.02.2016 14:01
Как установить Google Tag Manager на WordPress luxurious Сервисы 0 28.08.2014 18:05
Google Tag Manager - один код управляет всем Cookie Сервисы 0 23.07.2014 14:00
про ссылки на фотохостинги crech О форуме 5 13.08.2012 02:23
Обратные ссылки zhabka Файлообмен 4 11.05.2011 17:44

Метки
google tag manager, html, атрибуты, клики, ссылки


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 00:45. Часовой пояс GMT +3.