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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Первая реакция на перегорание — послать все к чертям собачьим. Очень заманчиво, но правильно ли убегать от всех проблем?...
08 06 2026 19:49:41
За что, по мнению рекламодателей, готовы платить пользователи в России и Украине? Рейтинг самых дорогих ключевых слов Google Рекламы по версии Serpstat....
07 06 2026 9:31:50
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
06 06 2026 22:33:34
Недавно у меня закончилась видеокампания на ютуб, по которой удалось собрать исследование Brand Lift. Хочу поделиться инсайтами...
05 06 2026 5:55:22
Реклама Facebook для вовлечения пользователей помогает привлечь внимание к приложению и удержать пользователей в условиях перенасыщенного рынка....
04 06 2026 14:47:55
XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...
03 06 2026 6:59:15
Советы специалистам по контекстной рекламе. Технические сложности, которые возникают при работе с Google ***ytics: от ограничений интерфейса до ошибок настройки отслеживания и последующей недостоверности полученных данных, и решения для них...
02 06 2026 17:27:59
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
01 06 2026 14:15:43
Обычно SaaS-бизнесы начинают привлечение лидов с запуска рекламы на Facebook. Но наш опыт говорит о том, что это не самые подходящие каналы. Более высокие результаты можно получить на LinkedIn....
31 05 2026 3:34:52
Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....
30 05 2026 0:28:56
Google Shopping и Smart Shopping Campaign сами себя не оптимизируют....
29 05 2026 10:34:47
Мануал по созданию удобного планировщика повторяющихся действий....
28 05 2026 21:12:46
Несложные рекомендации, как увеличить продажи с сайта и его мобильной версии с помощью инструментов Google: ***ytics, Tag Manager, Optimizer и форм-опросов. UX-специалисты Турум-бурум рекомендуют их для проверки сайта и используют в своей работе....
27 05 2026 22:31:44
22 оригинальные гипотезы для A/B-теста сайта, которые чаще всего влияют на получаемую прибыль...
26 05 2026 7:16:25
Подборка корпоративных медиа, попав на страницы которых, не хочется их покидать....
25 05 2026 3:53:49
Что такое контекстная реклама? Настраиваем рекламу в поиске Google...
24 05 2026 21:41:42
Не существует универсальных решений - есть эффективные инструменты и удачные их сочетания....
23 05 2026 20:46:10
Это исследование для тех, кто хочет выяснить, эффективно ли работать с лидами, если им год и больше...
22 05 2026 18:55:38
Чем шокировала, радовала и удивляла реклама в социальных сетях и контекстная в Google в апреле 2021 года...
21 05 2026 13:43:51
Рассказываем про телеграм-канал со-основателя Netpeak и чем он интересен для предпринимателей, руководителей и маркетологов....
20 05 2026 5:44:25
Нет прокрастинации! Советы для личной эффективности от руководителя двух стартапов...
19 05 2026 3:43:56
SEO-специалисты используют создание поддоменов, подпапок или отдельных доменов...
18 05 2026 13:55:40
Как понравиться поисковым системам и пользователям....
17 05 2026 5:30:49
Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....
16 05 2026 23:42:42
RFM — это аббревиатура слов Recency, Frequency, Money — новизна, частота, деньги. То есть считаем, как давно клиент купил товар в последний раз, сколько всего покупок он сделал и сколько денег принес нам за все время заказов....
15 05 2026 18:40:48
Метод бoмжа в маркетинге. Как разработать позиционирование стартапа при ограниченных ресурсах...
14 05 2026 8:56:57
Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....
13 05 2026 20:11:32
Тест, который проходят все соискатели. Никому не показывайте!...
12 05 2026 17:34:39
Google «выкатил» алгоритм Панда 2.2, как пару недель назад обещал Мэтт Каттс....
11 05 2026 19:15:51
Заработок в четверть миллиона. Как многофункциональная SEO-платформа Serpstat из Netpeak Group стала самым продаваемым продуктом на AppSumo — пошаговая история-инструкция...
10 05 2026 4:47:37
Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...
09 05 2026 13:45:33
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
08 05 2026 9:31:55
Как протестировать MVP мобильного приложения, получить обратную связь и сформировать гипотезы...
07 05 2026 11:52:42
Как правильно распределить рекламный бюджет? Читайте топ-50 самых дорогих ключевых слов Google Рекламы в Казахстане по версии Serpstat...
06 05 2026 6:58:23
Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...
05 05 2026 17:31:19
Новый тип рекламных кампаний, который помогает расширить целевую аудиторию. Потенциальных покупателей можно найти среди людей не знакомых с вашим брендом....
04 05 2026 5:51:47
В ТОПе ошибок — метатеги, разметка, заголовки h1-h6 и внутренние ссылочные факторы....
03 05 2026 20:26:38
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
02 05 2026 2:48:36
Как нарисовать круговую или столбчатую диаграмму. Избавляемся от популярных ошибок при оформлении...
01 05 2026 0:13:34
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
30 04 2026 1:58:36
Результаты рейтинга зарплат интернет-маркетологов....
29 04 2026 23:17:44
История Affise от фаундера компании, рассказанная на SaaS Nation....
28 04 2026 3:52:53
Google Penguin официально стал частью основного алгоритма поисковика. Как обезопасить свой бизнес и встретить апдейт алгоритма Google во всеоружии? О трафике, анкорах, бэклинках, ссылках и ссылочной массе, трастовости и постоянном мониторинге, с комментариями специалистов...
27 04 2026 7:25:19
Фубольный клуб. Как увеличить ROMI (возврат маркетинговых инвестиций) в рекламных кампаниях — рассказываем на примере киевского интернет-магазина «Динамо»...
26 04 2026 20:17:23
Джефф Безос, Стив Джобс, Билл Гeйтс, Джимм Керри и другие. Собрали для вас подборку крутых выступлений людей, которые знают, как добиться ... в общем-то, всего. Читайте их основные тезисы, а главное — послушайте....
25 04 2026 10:50:42
Обидно терять сохраненные достижения. Почему падает трафик из поисковых систем и как это исправить...
24 04 2026 21:38:23
Продолжаем разговор о том, почему функция «Совмещение данных» в Google Data Studio может работать не так, как вы ожидаете....
23 04 2026 0:51:13
Отслеживаем пропущенные, анализируем входящие и делаем выводы о том, как организовать работу менеджеров....
22 04 2026 21:27:50
Как перенести рекламные кампании из адвордс в директ, используя только Google Editor и Директ Коммaндер? Делимся быстрым и эффективным методом...
21 04 2026 13:20:26
в поисках нового источника трафика расскажем о Pinterest — современной поисковой сети c акцентом на визуальном контенте...
20 04 2026 5:35:56
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
