Google Tag Manager. Часть 2

geek_datalayer-14495655487959Во второй части статьи, мы, как и обещали, расскажем о том, что такое dataLayer и как с помощью GTM можно получить маркетинговые данные о посетителях сайта.

DataLayer (он же — слой данных) представляет собой объект JavaScript, который концентрирует, а затем отправляет данные в GTM. Этот фрагмент кода передает GTM информацию о стоимости товара, количестве покупок, числе посетителей и многом другом. Так, извлекая данные из html-страницы, через Google Analytics вы можете построить график продаж за определенный период.

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

Чтобы понять принцип работы dataLayer, необходимо разобраться с основными объектами Javascript.

Массивы Javascript

Массив  — это переменная для хранения данных.Он может состоять из одного или нескольких элементов различных типов — числа, слова, логические значения, а так же другие массивы.

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

Типы данных массиве

Массив может включать в себя элементы всех существующих типов данных: в данных:

1

Size — элемент типа строка.
10 — элемент типа число.
True — логическое значение.
,,  — элемент массива неопределенного типа.
[«Clasicos»,57] — элемент массива, который также является массивом.
{«id»:»20″,»name»:»Zapatos«} — элемент массива типа объект.

Объекты JavaScript

Объект JavaScript — это переменная , имеющая собственные свойства(идентификатор) и методы. Свойство объекта -это слово, имеющее определенное значение, которое не может быть использовано в качестве переменной. Значением свойства может быть:

• строка;
• числовое значение;
• неопределенное значение;
• логическое значение (true, false)
• массив;
• многомерный массив;
• объект;
• массив объектов.

Другие примеры объектов JavaScript:

9a1b1b086b

Важно:

a=[]; — создает массив.
a={}; — создает объект.
a=[{}]; — создает массив с одним объектом.

DOM-скрапинг

Извлечь данные из веб-страницы можно с помощью HTML DOM. Его удобно применять, когда нет возможность быстро настроить трекинг или обратится к IT-специалисту. Отрицательным моментом использования DOM-скрапинга является его нестабильность. Поэтому им не стоит оперировать, когда речь идет о крупных суммах денег и применять на длительных временных промежутках.

Инициализация и изменения dataLayer

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

Если dataLayer уже существует, то часть информации в нем находится постоянно, прочие данные могу быть подгружены с помощью push.

При заполнении dataLayer из front end или back end части сайта, важно следить, что информация записывается в нужном формате, который обрабатывается GTM.

Правила присвоения имен переменным

Называя одни и те же переменные на разных страницах сайта по-разному, GTM не сможет запустить теги во всех необходимых местах. Например, если вы на главной странице установите ее тип с помощью переменной pageCategory, то и на других страницах нужно будет использовать точно такое же название — Pagecategory или PageCategory уже не подойдет, потому что имена переменных чувствительны к регистру. Код JavaScript тоже чувствителен к регистру, поэтому не путайте dataLayer и datalayer.

Не забывайте заключать переменные в кавычки.

Сниппет

Сниппет представляет собой часть кода, которая внедряется GTM на ваш сайт. Сниппет dataLayer всегда должен располагаться в части head и быть выше сниппета GTM. В обратном случае систем просто не будет работать.

Что должен содерджать dataLayer

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

1. Свойства страницы:
• название страницы;
• URL страницы;
• тип страницы.

2. Свойства продукта:
• имя;
• ID продукта;
• цена;
• тип продукта;
• URL изображения продукта;
• вариация выбранного продукта (цвет, размер);
• выбранное количество продукта;
• количество просмотров;
• количество кликов на продукт;
• доступность (в наличии или нет);
• купон;
• использованный купон.

3. Свойства пользователя:
• ID пользователя;
• ID клиента;
• тип пользователя (залогиненный, разлогиненный, постоянный клиент и т. д.);
• поведение пользователя;
• предпочтения пользователя;
• история покупок;
• действия пользователя (нажал кнопку, отправил форму, подписался, купил и т. д.);
• веб-браузер;
• операционная система;
• устройство (компьютер, телефон, планшет).

Универсальный слой должен содержать максимум информации, которая может быть полезна.Например:

1afb917d48

По материалам  https://blog.kinetica.su/gid_po_google_tag_manager_chastj_2/

Google Tag Manager. Часть 1

google-tag-managerДиспетчер тегов —  это бесплатный сервис от Google для управления тегами. Он предоставляет возможности для управления аналитическими и маркетинговыми тегами на вашем сайте и в мобильном приложении. В этой статье мы расскажем, что такое теги, триггеры и как работать с GTM.

ЧТО ТАКОЕ ТЕГИ

Тег — это фрагмент JavaScript кода, который внедряется в сайт, накапливает маркетинговые данные, а затем отправляет их в другие сервисы — Google Analytics, Google AdWords, Twitter, Facebook, Comscore и проч.

Для того, чтобы грамотно вставить код, нужно найти template-файлы сайта, понять куда именно и что нужно вставить, чтобы он отобразился в нужном месте сайта, ничего не сломав. Диспетчер GTM дает возможность вставлять такие участки косвенно, не вставляя сам код.

ПРЕИМУЩЕСТВА GTM

Не потребности постоянно исправлять код

Использование GTM позволяет быстро включать и выключать теги. Для этого вам не придется постоянно редактировать код в template-файле. Это упрощает работу, особенно, если сайт достаточно большой, а тегов много.  

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

Широкие возможности

В случае, если вам необходимо отправлять информацию в две и более службы, с помощью GTM вы сможете определять:

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

Оперативное внедрение и тестирование

Многим владельцам сайтов знакома проблема зависимости от веб-разработчиков в тех моментах, когда требуются изменения в коде сайта. Это значительно снижает оперативность. Установка GTM позволяет проводить внедрение и тестирование самостоятельно. Например, опубликовать опрос и удалить его через сутки можно в несколько кликов, не прибегая к помощи IT-специалистов и сложному кодингу.

Отслеживание действий

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

Ускорение работы сайта

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

Экономия средств

Выполняя те же функции без использования GTM, IT-специалист вынужден тратить больше времени и усилий для обслуживания сайтов, что, следовательно, влечет дополнительные расходы. Сервис GTM  абсолютно бесплатен

КОНТЕЙНЕР GTM

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

Он включает в себя 2 составляющих.

Пример первой части, находится в начале любой веб-страницы сайта между html-тегами <head>…</head>:

d1b0ab1c7f - копия

Вторая часть контейнера GTM находится после открывающего html-тега <body> на каждой веб-странице.

Чтобы определить, какой код нужно внедрить на сайт, зайдите в своем аккаунте во вкладку «Администрирование» → «Установить Диспетчер тегов Google». Часть кода, начинающаяся с символов GTM-TXAAA, называется ID-номером контейнера. Именно он используется для идентификации контейнеров в GTM.

Шаблоны тегов

GTM предлагает несколько десятков шаблонов, позволяющих развернуть теги на сайте. Чтобы выбрать какой либо из шаблонов, необходимо зайти в «Обзор» → «Добавить новый тег».

7e00ba939132a927cb423a58f4a568b1fe407141

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

ТРИГГЕРЫ

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

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

 триггеры активации;
 триггеры блокировки.

Триггер активации  — условие, при котором тег срабатывает. Триггеры активации бывают встроенными (используемые из шаблонов и автоматически настроенные) и пользовательскими (требующие ручной настройки).

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

Триггер блокировки — условие, при котором тег выключается/блокируется.

Чтобы создать триггер блокировки необходимо создать тег или отредактировать уже существующий. В секции «Триггеры» нажмите на иконку «Редактирование», которая сразу выведет вас на ссылку «Добавить исключение».

Если между триггерами блокировки и активации возникает конфликт, то срабатывает триггер блокировки.

ПЕРЕМЕННЫЕ

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

Переменные используются для хранения информации или передачи информации в тег. Источником этой информации могут быть слои данных, значения JavaScript, данные html или cookies сайта.
Переменные бывают двух типов: встроенные (готовые шаблоны) и пользовательские (настраиваемые вручную).

ПАПКИ

С помощью папок владелец сайта имеет возможность группировать теги, триггеры и переменные по какому-либо принципу (название проекта, группы, команды и т.д.).

ЗАКЛЮЧЕНИЕ

Для того, чтобы использовать все возможности GTM вам необходим иметь общие представления о html кодировании и JavaScript.

Следует отметить, что GTM имеет определенные ограничения. Так, он не позволяет разворачивать:

 синхронные теги 

 составные теги, когда одна часть находится в заголовке, а вторая — в превью;

 теги привязанные к виджетам соцсетей;

  теги несовместимые с GTM.

 

О том, что такое dataLayer и как с помощью GTM можно получить маркетинговые данные о посетителях сайта, расскажем в следующей статье.

 

По материалам https://blog.kinetica.su/gid_po_google_tag_manager_chastj_1/