Google Tag Manager: актуальные и неочевидные фишки
Google Tag Manager — система, cозданная Google для управления тегами JavaScript и HTML, которые используются для отслеживания и анализа данных на сайтах. При работе с GTM часто упоминается термин dataLayer и в этой статье мы разберемся, что это и в чем его особенности. А еще мы узнаем, как отслеживать статистику в Google ***ytics для SPA-сайтов и лендингов.
Что такое dataLayer
DataLayer — это название переменной JavaScript. Она служит для передачи данных, которые Google Tag Manager не может получить сам. Стоит заметить, что вместо dataLayer некоторые используют термин «уровень данных». Связано это с тем, что при необходимости можно переопределить название массива dataLayer на другое допустимое.
Например:
<script>(function(w,d,s,l,i) {w[l]=w[l]||[];w[l].push({\\\'gtm.start\\\': new Date().getTime(), event:\\\'gtm.js\\\'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!=\\\'dataLayer\\\'?\\\'&l=\\\'+l:\\\' \\\';j.async=true;j.src=\\\'https://www.googletagmanager.com/gtm.js?id= \\\'+i+dl;f.parentNode.insertBefore(j,f);})(window,document, \\\'script\\\',\\\'dataLayer\\\',\\\'GTM-XXXXXX\\\');script>Код с переименованным именем уровнем данных:
<script>(function(w,d,s,l,i){w[l]=w[l]||[]; w[l].push({\\\'gtm.start\\\':new Date().getTime(),event:\\\'gtm.js\\\'}); var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!= \\\'dataLayer\\\'?\\\'&l=\\\'+l:\\\'\\\';j.async=true;j.src=\\\' https://www.googletagmanager.com/gtm.js?id=\\\'+i+dl;f.parentNode.insertBefore(j,f);}) (window,document,\\\'script\\\',\\\'dataNetpeak\\\',\\\'GTM-XXXXXX\\\');script>Разница между dataLayer = [] и dataLayer.push ()
Важно понимать, что при объявлении переменной dataLayer = [] в памяти создается новая переменная dataLayer, которую система определяет как пустой массив. Это значит, что если мы изменим значение массива, второе присваивание перезапишет первое:
<script> dataLayer = [{ \\\'businessSomeVar\\\' : \\\'businessSomeVal\\\' }]; script> ….. <script> dataLayer = [{ \\\'anotherSomeVar\\\' : \\\'anotherSomeVal\\\' }]; script>
При этом доступ есть только к anotherSomeVar, а к businessSomeVar доступа больше нет.
Также хочу обратить внимание на то, что объявление уровня данных с помощью знака «=» будет корректно работать только, если код будет размещен до кода GTM.Особенности dataLayer.push ()
Метод push () имеют все массивы по умолчанию. Его особенность в том, что при вызове push () вы добавляете данные в массив в виде нового значения, то есть значения не перезаписываются, как в случае dataLayer =, а просто к ним добавляется еще одно.
Работая с Google Tag Manager, всегда необходимо использовать dataLayer.push () в следующей конструкции:
<script>window.dataLayer = window.dataLayer || []; dataLayer.push ({...});script>Первая строка проверяет, был ли определен dataLayer. Если нет — он будет определен как новый пустой массив. В обоих случаях в него будут записаны данные.
Настройка веб-аналитики на одностраничных приложениях
Давайте поговорим о том, как с помощью GTM настроить корректное отслеживание данных в Google ***ytics для одностраничных приложений.
Как сделать SPA-сайты SEO-Friendly? Одностраничное приложение (
Из-за своих особенностей SPA-код Google ***ytics сработает только один раз при загрузке страницы. Стандартные способы настройки Google ***ytics нам не помогут, но эту проблему можно легко решить с помощью создания дополнительного триггера в GTM.
В Google Tag Manager нужно создать триггер «History Change» и выбрать тип триггера «Изменение в истории» — он отслеживает изменение истории браузера.
Затем применяем созданный триггер «History Change» к тегу для просмотра страниц «Universal ***ytics».
Теперь тег будет сpaбатывать не только на загрузку или перезагрузку страницы («All Pages»), но и на каждое изменение в истории.
Этот вариант подходит для сайтов, у которых прописан человекопонятный URL. Если URL содержит знак # (хэш), символы после знака # называются фрагментами URL-адреса.
Как правило, они используются для якорных ссылок — инструмента выбора для сайтов одностраничников, на которых контент меняется динамически, без перезагрузки страницы.
Фрагмент URL в Google ***ytics невозможно отследить по умолчанию, но с GTM нет ничего невозможного.
Для этого нам нужно выполнить следующие действия:
1. Настройка переменных
В Google Tag Manager нужно перейти в раздел «Переменные» выбрать «Настройки» и отметить значения «New History Fragment» и «History Source».
«New History Fragment» хранит новые фрагмент URL-адреса, когда он изменяется, а «History Source» позволит указывать то, что изменения в истории будут проверяться.
Далее, создаем переменную с собственным кодом JavaScript. Она будет производить новый, сформированный URL, который затем можно отправить в Google ***ytics в качестве пути к странице фрагмент URL-адреса. Называем ее «Get path with fragment» и добавляем следующий код:
function() { return window.location.pathname + window.location.search + window.location.hash;}Эта переменная, добавленная в поле страницы, вернет путь, строку запроса (если она есть) и хеш URL.
2. Создание триггера
Необходимо создать триггер «History fragment change», выбрать тип триггера «Изменение истории» и условия активации в режиме «\"History Source\" равно popstate». Событие popstate вызывается, когда меняется активная запись истории. Мы используем popstate в качестве условия, чтобы он отключился в тех случаях, где может сработать триггер изменения истории.
3. Настройка тега
В обычный тег просмотра страницы (у меня он называется «Universal ***ytics»), в дополнительных настройках необходимо добавить новое поле «Page» и выбрать созданную нами пользовательскую переменную из первого пункта {{get path with fragment}}.
Далее, добавляем триггер «History fragment change», сохраняем тег и проверяем его работу.
4. Как это работает
Когда кто-то нажимает на ссылку, которая имеет привязку в href, например Contact Us, браузер отправляет событие изменения истории и оно подхватывается триггером «History fragment change». Это приводит к тому, что тег «Universal ***ytics» снова сpaбатывает.
Выводы
- В любом случае используйте dataLayer.push () — так вы добавляете данные в массив в качестве нового значения, а не перезаписываете старое, как в случае с методом использования знака «=».
- Для корректного сбора и передачи данных в Google ***ytics из SPA-сайтов с человекопонятным URL в GTM нужно создать триггер изменения в истории. Если в ваш URL содержит хэш, нужно просто добавить свою пользовательскую переменную в тег и заменить в триггере условие активации на «\"History Source\" равно popstate».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Почти 4,5 млрд людей имеют аккаунты в соцсетях. Огромная и активная аудитория. Но как среди нее найти своего клиента? Поможет таргетированная реклама....
09 05 2026 20:24:35
Насколько классно продается женская одежда в интернете....
08 05 2026 8:38:20
Пиксель Facebook — инструмент аналитики рекламной системы, который можно использовать и для Instagram....
07 05 2026 18:53:39
Повышаем узнаваемость бренда с помощью медийной кампании, а затем отслеживаем результат по запуску поисковой кампании с брендовыми запросами...
06 05 2026 12:17:47
Новая инструкция, которую можно применять к любым задачам в Google Таблицах....
05 05 2026 4:19:31
Популярные размеры баннеров. Найти самый топовый из джентльменского набора! Мы провели свое исследование....
04 05 2026 22:52:48
И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...
03 05 2026 17:55:27
Кейс продвижения YouTube-канала магазина товаров для рыбалки...
02 05 2026 21:47:28
Как правильно распределить рекламный бюджет? Читайте топ-50 самых дорогих ключевых слов Google Рекламы в Казахстане по версии Serpstat...
01 05 2026 10:52:29
Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....
30 04 2026 12:51:42
Уроки, написанные понятным и доступным языком экспертами по контекстной рекламе, поисковому продвижению, SMM....
29 04 2026 2:36:36
Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....
28 04 2026 11:21:48
Как увеличить охват и видимость сайта за счет сбора семантического ядра и расширения структуры...
27 04 2026 21:38:28
Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....
26 04 2026 13:52:46
Сколько страниц на самом деле показывает и может перевести поисковик Google?...
25 04 2026 21:28:54
14 пунктов, которые помогут вам лучше изучить свой бизнес и подготовить эффективную SMM-стратегию...
24 04 2026 8:19:30
Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...
23 04 2026 14:47:48
Как мы продвигали бизнес-страницы OLX с помощью рекламы в Facebook, TikTok и Viber....
22 04 2026 3:56:29
Результаты четвертого опроса среди IT-специалистов по уровню зарплат интернет-маркетологов с интересными итогами от количества участников до самой высокооплачиваемой должности и среднего опыта в рынке. Узнайте больше!...
21 04 2026 4:23:30
Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...
20 04 2026 13:10:38
Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...
19 04 2026 23:50:43
Рассказываем, как обменять свои деньги на действительно полезные знания....
18 04 2026 13:44:57
Шесть новых услуг. Читайте подробнее о возможностях PBN, Big Data SEO, продвижения в Телеграм и мобильных приложений, исследований рынка, SMM для вашего бизнеса. А также хорошая новость и ещё одна услуга для тех, кому нжно комплексное мобильное продвижение...
17 04 2026 19:49:45
Полезный и развлекательный контент для всех, кто работает в IT, интернет-маркетинге, интересуется фишками тайм-менеджмента, учится управлять комaндой и собой....
16 04 2026 21:52:49
Специалисты, занимающиеся seo копирайтингом, рассказывают об использовании LSI: определение текста, кол во символов, подсчет слов онлайн...
15 04 2026 21:51:30
Как настроить динамический ремаркетинг в myTarget и эффективно ли работают такие объявления — делимся собственным опытом....
14 04 2026 17:15:26
Самые популярные блоги Рунета по интернет-маркетингу — все RSS-фиды в одном месте...
13 04 2026 21:25:53
Тестируем новый инструмент Яндекс.Директ — динамические объявления....
12 04 2026 16:15:21
Советы специалистов по продвижению интернет-магазинов в сверхконкурентной нише одежды и обуви...
11 04 2026 13:12:28
Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....
10 04 2026 14:25:38
Как настроить работу удаленной комaнды сотрудников и успевать выполнить все задачи...
09 04 2026 13:29:27
Как повысить результаты продаж в режиме цейтнота. Советы новому руководителю от специалистов Netpeak Group. Больше подробностей — в посте...
08 04 2026 18:59:14
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
07 04 2026 14:15:45
Как правильно читать отчеты в Панели вебмастеров Google — объясняем на примерах из пpaктики....
06 04 2026 1:46:27
О промдизайне, инсайтах, испытаниях для дизайнеров по мотивам BBC-шоу «Дизайн для жизни» с Филиппом Старком....
05 04 2026 17:39:14
Правильное продвижение сайта и нестандартные предложения по привлечению трафика...
04 04 2026 7:44:50
Хасан Исламов о развитии Chocofamily, крупнейшего интернет-холдинга Казахстана....
03 04 2026 22:50:10
Где искать информацию, как составить контент-план, писать тексты быстро и легко, а затем продвигать их. Собрали для вас подборку постов о разных этапах работы с контентом....
02 04 2026 7:25:31
Впереди ещё черная пятница и новогодние праздники. И успех массовых распродаж можно повторить....
01 04 2026 23:32:23
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
31 03 2026 11:27:23
Если хотите, чтобы кампании в контекстно-медийной сети работали эффективно, следует очистить площадки и ввести это в привычку...
30 03 2026 15:22:48
Расчет вероятности конверсии, быстрое и эффективное создание дашбордов, строение моделей KPI. Примеры аналитики кампаний с помощью Excel и Power BI от спикера 8P 2016 Максима Уварова....
29 03 2026 12:26:19
Работа с умными рекламными кампаниями с оплатой за конверсии в контекстно-медийной сети. Особенности настройки и оптимизации в кейсе продвижения недвижимости. Узнать больше!...
28 03 2026 6:45:39
Книга про пять полезных фишек + стратегия продвижения интернет-магазина...
27 03 2026 19:16:21
Узкие специализированные ниши и широкие, которые, как правило, уже заняты лидерами рынка — в каждой найдется место для онлайн-издания с полезным контентом. Узнать больше!...
26 03 2026 20:15:31
Учимся выстраивать коммуникацию по специальным сценариям....
25 03 2026 16:38:27
Фильтруем свой трафик от сотрудников в Google ***ytics...
24 03 2026 0:55:43
Крутые площадки для нового инструмента: контекстщикам на заметку!...
23 03 2026 1:36:14
Как говорят легенды, на создание дизайна этих носочков Sammy Icon вдохновили рисунки на стенах храма Темпло Майор в древнем городе Теночтитлан. К сожалению, город сейчас разобрали перуанские строители, но память о нем осталась в киевских носках...
22 03 2026 6:41:41
Пройдем вместе путь вебмастера от первых шагов и до вершины ТОПа :)...
21 03 2026 7:48:30
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
