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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Результаты грамотного внедрения технического SEO-аудита...
14 10 2026 2:16:18
Как жить с налогом на Google, Facebook и другие международные сервисы — объясняем детали....
13 10 2026 11:27:47
Как использовать расширенное семантическое ядро для увеличения целевого трафика....
12 10 2026 20:22:26
Как стандартизировали сбор данных по проектам клиентов и отчетности, чтобы тратить меньше времени и не совершать лишние действия...
11 10 2026 13:47:37
Google Data Studio: подробная инструкция и обзор возможностей...
10 10 2026 22:49:28
При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....
09 10 2026 14:11:14
Быстрый инструмент для повышения CTR — дополнительные ссылки Google Рекламы...
08 10 2026 12:23:39
Ситема управления проектами, которой пользуются в Netpeak....
07 10 2026 14:31:28
Читайте, если не хотите «слить» бюджет. Определите конкретные цели и УТП, соберите аналитику, идите к специалисту без опыта работы в конкретной нише и другие рекомендации эксперта. Читайте подробнее в статье!...
06 10 2026 2:11:41
От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...
05 10 2026 18:39:21
Какой движок сайта стоит выбрать...
04 10 2026 14:41:44
Для максимальной прибыли с YouTube-канала нужно выбрать одну из наиболее посещаемых ниш. Не всегда прибыльная тема соответствует личным предпочтениям владельца канала...
03 10 2026 6:44:28
Кейс: контент-маркетинг сервиса в США, или как SerpStat покорил англоязычный мир...
02 10 2026 6:18:22
Первая реакция на перегорание — послать все к чертям собачьим. Очень заманчиво, но правильно ли убегать от всех проблем?...
01 10 2026 15:24:12
Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....
30 09 2026 20:16:23
Сервисы для определения оптимальной плотности ключевых слов...
29 09 2026 17:18:40
Удача и везение — не случайность. Это выбор. Любопытные эксперименты профессора Ричарда Вайсмена инсайде...
28 09 2026 9:42:33
Один из лучших способов выбрать подрядчика — провести брифинг для компаний. При этом важно предоставить максимум информации: откройте доступ к реальным данным по проекту. Узнать больше!...
27 09 2026 7:16:25
Анализ цены за клик в 25 тематиках и 852 городах Украины, России, Казахстана, Болгарии...
26 09 2026 1:47:29
Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....
25 09 2026 13:49:28
Работ по оптимизации всегда много, а выделить приоритеты при продвижении онлайн — непросто. Что стоит проверять и исправлять в первую очередь?...
24 09 2026 12:54:14
Качество передаваемых данных напрямую отражается на качестве решений, принимаемых для бизнеса. Как защититься от таких ошибок?...
23 09 2026 21:27:43
Офис Netpeak в Харькове официально открыт! В этом посте, вместо игры на фанфарах, мы на собственном примере рассмотрим, что нужно для создания регионального отделения в разгар кризиса....
22 09 2026 23:52:36
Одесса. Конференция «Контекстная реклама 2013». Самые полезные настройки рекламной кампании....
21 09 2026 2:57:33
Нужно разбить ячейку или составить график? Если вы знаете функции, таблицы гугл могут пpaктически заменить отдельные сервисы или дополнения...
20 09 2026 6:36:30
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
19 09 2026 15:41:25
Тошнота и процент воды в тексте не должны превышать допустимую норму, иначе не только пользователи уйдут с сайта, поисковые роботы понизят сайт в рейтинге. Узнать больше!...
18 09 2026 8:33:32
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
17 09 2026 9:35:22
Satel является одним из топовых игроков онлайн-маркета, но на старте интернет в качестве канала продаж не рассматривался. Когда онлайн запустили на полную? Узнать!...
16 09 2026 21:48:37
Правильно задать вопрос или сфоримулировать ответ на собеседовании это еще далеко не все. Рецензия на книгу Ласло Бока «Работа рулит»...
15 09 2026 5:31:16
Надежный сайт позволит вести успешную деятельность, защитить плоды собственного труда и результаты работы исполнителей, с которыми вы сотрудничали. Для реализации задумки вам понадобятся авторские права....
14 09 2026 6:15:21
Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...
13 09 2026 12:35:40
Рекламируем онлайн-уроки к 1 сентября. Именно сочетание Facebook и Google Ads помогло нам сначала обратиться к родителям (которые, например, листают соцсеть по пути домой) и потом уже напомнить о себе с помощью Google Рекламы...
12 09 2026 6:18:29
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
11 09 2026 9:47:52
Регулярный мониторинг позиций необходим для отслеживания истории их изменений после внедрения новых ключевых слов и других работ над сайтом...
10 09 2026 18:39:15
Всё о метриках загрузки сайта. Как проверить и отслеживать реальную скорость загрузки сайта и почему нельзя доверять показателям Pagespeed Insights....
09 09 2026 1:55:50
Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...
08 09 2026 12:16:17
Что делать, когда код электронной торговли в одной валюте, а аккаунты Google ***ytics/Google Ads — в другой. И нужной валюты нет в списке возможных....
07 09 2026 15:10:18
Чем удивляла, радовала и смешила реклама в социальных сетях в июне 2021 года...
06 09 2026 5:31:30
Сегодня именно тот день, когда пора решиться и отправить своё резюме в нашу компанию....
05 09 2026 17:42:43
При выборе SEO сервиса принято ориентироваться на объем ссылочной массы, но надежен ли такой подход? Большая база не всегда значит качество содержащихся в ней данных, а количество нередко обеспечивают спамные ссылки в отчетах....
04 09 2026 7:58:42
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
03 09 2026 10:48:47
Как пользоваться одной из самых важных функций Google Таблиц — подробное руководство по Query...
02 09 2026 3:41:49
Как изменить геовыдачу с помощью настроек Google, Яндекс или специальных дополнений...
01 09 2026 17:57:54
Проверка позиций: бесценный онлайн софт для SEO-специалистов :)...
31 08 2026 16:29:58
Как нарисовать круговую или столбчатую диаграмму. Избавляемся от популярных ошибок при оформлении...
30 08 2026 10:36:14
Относящиеся к низкочастотным long-tail запросы при правильном подходе могут стать эффективным инструментом для увеличения трафика. Рассказываем почему, а главное — как....
29 08 2026 21:29:58
Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....
28 08 2026 5:19:19
Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....
27 08 2026 4:31:19
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
26 08 2026 17:26:32
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
