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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....
16 04 2026 18:20:33
Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....
15 04 2026 18:30:24
И помните: плохих названий нет, если у вас есть большие деньги....
14 04 2026 18:55:47
Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...
13 04 2026 2:14:21
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
12 04 2026 5:17:41
Нет прокрастинации! Советы для личной эффективности от руководителя двух стартапов...
11 04 2026 23:50:30
Как упростить работу с данными и сэкономить на оплате сервиса...
10 04 2026 5:27:25
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
09 04 2026 8:15:20
Анализ данных о 7,6 миллионах поисковых запросов в французском Google...
08 04 2026 6:19:14
Как увеличить количество транзакциий, сохранив прибыльность кампании в РСЯ?...
07 04 2026 14:20:48
Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....
06 04 2026 23:51:10
Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...
05 04 2026 6:16:39
10 заданий, которые заставят пошевелить мозгами и придумать нестандартные решения. Используйте их (видоизмените, адаптируйте) под свой продукт или услугу. Создайте крутую кампанию, креатив или предложите это своей комaнде....
04 04 2026 11:47:54
Как операторы поисковых запросов Google помогают при продвижении сайта и анализе конкурентов....
03 04 2026 22:22:41
Участники бизнес-клуба netpeak получают бесплатные консультации по вопросам ведения контекстной рекламы в Google Ads...
02 04 2026 21:44:19
Как увеличить охват и видимость сайта за счет сбора семантического ядра и расширения структуры...
01 04 2026 19:45:32
Данные по 42,5 млн кликов в 25 тематиках и 391 городу...
31 03 2026 7:45:41
Пуш для рекламных кампаний накануне праздничных распродаж...
30 03 2026 18:57:37
О новых функциях Universal App Campaigns — специально для тех, кто хочет эффективно вовлекать пользователей приложений...
29 03 2026 23:56:10
Подборка ненаучных наблюдений и ситуаций, в которых бывал каждый из нас...
28 03 2026 4:22:11
Тошнота и процент воды в тексте не должны превышать допустимую норму, иначе не только пользователи уйдут с сайта, поисковые роботы понизят сайт в рейтинге. Узнать больше!...
27 03 2026 21:12:41
Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...
26 03 2026 23:14:23
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
25 03 2026 11:21:14
Фубольный клуб. Как увеличить ROMI (возврат маркетинговых инвестиций) в рекламных кампаниях — рассказываем на примере киевского интернет-магазина «Динамо»...
24 03 2026 1:14:19
Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...
23 03 2026 3:43:58
Новые триггеры, разнообразие рассылок и обновленная форма подписки дали нужный результат....
22 03 2026 19:39:13
Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, вы можете оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
21 03 2026 21:55:16
Непросто найти ответственного автора, готового проводить сео-оптимизацию своих статей, исправлять ошибки, вносить дополнения в материал. Это очень дорого? Узнать!...
20 03 2026 23:18:23
Пример, как 4000+ гривен превращаются в 45000+ гривен. Ниша интернет-магазинов, да еще и бытовой техники уже давно является высококонкурентной. Но при правильном продвижении даже новичок может добиться результатов....
19 03 2026 1:45:17
Как расширение от Netpeak может облегчить работу над важными SEO-задачами....
18 03 2026 5:44:48
Аккаунт менеджеры это... Быть лицом компании, проводником между заказчиком и комaндой агентства, ментором для коллег и суперменом, готовым прийти на помощь клиенту в любой час дня и ночи… Эти задачи по плечу аккаунт-менеджерам Netpeak...
17 03 2026 2:47:30
Таблица общих для Google и Яндекс микроформатов инсайде...
16 03 2026 18:45:51
Одесские магазины, где продают вечерние и свадебные платья нуждаются в особом внимании интернет-маркетинга. Как настроить контекстную рекламу для малого и среднего бизнеса со скромными маркетинговыми бюджетами...
15 03 2026 23:52:22
Примеры новой концепции Digital-маркетинга по формуле 8Р...
14 03 2026 22:50:15
Руководство для всех, кто хочет продать что-то через интернет...
13 03 2026 1:39:33
CEO магазина «Модна Каста» Андрей Логвин — сделал отличный доклад на 8P о пути к успеху своего бизнеса и будущем Ecommerce. Детальнее об ощущении deal и «первом дне» для интернета читайте в новом посте....
12 03 2026 21:27:23
Образец чек-листа по созданию форм заказа на сайте интернет-магазина...
11 03 2026 19:59:42
Помогают ли комментарии повысить эффективность рекламных постов? Единственный способ выяснить наверняка — провести A/B-тестирование в Facebook. Спойлер: тональность комментария также имеет значение в Facebook...
10 03 2026 9:30:49
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
09 03 2026 13:41:15
Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...
08 03 2026 11:24:15
Академия — набор структурированного контента, интеpaктивных заданий и обучающих курсов, посвященных конкретному продукту или индустрии в целом...
07 03 2026 2:57:43
Не путайте с контент-менеджером, пожалуйста....
06 03 2026 23:44:33
Про мобильный дизайн. С красивой и понятной презентацией внутри....
05 03 2026 13:16:34
Краткая инструкция по работе с обратной связью: как правильно просить и получать отзывы. Они напрямую влияют на бизнес, увеличивают конверсию и выгодно выделяют вас на фоне конкурентов. Как это использовать? Читайте дальше!...
04 03 2026 20:23:34
Чтобы грамотно анализировать статистику рекламных кампаний, необходимо связать Яндекс.Метрику и Яндекс.Директ. Рассказываем, как это сделать...
03 03 2026 10:14:17
Анализируя поведение аудитории, вы сможете понять, почему клиенты приходят на сайт, почему уходят, и почему не делают заказы....
02 03 2026 20:59:18
Чем радовала, удивляла и шокировала таргетированная реклама в социальных сетях...
01 03 2026 16:10:11
Почему в рекламе недвижимости стоит запускать динамический ремаркетинг...
28 02 2026 16:23:39
Заказчик всегда приходит с идеей. В этой идее может быть все продумано до мелочей, а может быть только каркас. В любом случае мысли клиента следует систематизировать так, чтобы с ними было удобно работать....
27 02 2026 22:26:21
Как подготовить фиды в Яндекс.Директ для разных тематик...
26 02 2026 9:17:57
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
