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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Как составить список, работа с которым займет меньше времени, чем обычно. На примере обработки запросов в ювелирной тематике....
14 08 2026 11:21:45
А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...
13 08 2026 9:33:58
Вес страниц — один из факторов ранжирования в поисковых системах Google и Яндекс....
12 08 2026 20:24:27
В этой статье мы поговорим про принципы работы СRM-системы. Это базовые моменты, прояснив которые СRM перестанет быть для вас чем-то сложным и непонятным....
11 08 2026 0:14:39
FAQ (frequently asked questions), HowTo и Q&A (questions and answers)....
10 08 2026 6:25:17
Семнадцать крутых шагов к эффективному бренду Заг — это авторский неологизм от слова зигзаг (англ. zigzag). Он подразумевает движение в другом направлении....
09 08 2026 3:52:19
Поговорим о soft skills, потому что именно они, исходя из моего опыта, помогают строить поистине сильные комaнды....
08 08 2026 4:53:17
Цель этой статьи — предупредить от опасной ошибки в маркетинге: бездумного и неправильного внедрения NPS-опросника....
07 08 2026 18:17:30
Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...
06 08 2026 4:38:17
Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....
05 08 2026 22:14:38
Топ doodle games от Google — от менее достойных к самым крутым....
04 08 2026 12:23:40
Изначально необходимо планировать продолжительное сотрудничество с агентством для достижения поставленных целей. В своей стратегии мы использовали сезонность, чтобы достичь максимальных результатов для клиента...
03 08 2026 15:29:18
Поисковая реклама для службы доставки еды — пpaктические советы, как выделиться на фоне конкурентов в популярной нише. На примере харьковской доставки пиццы мы покажем, как правильно продавать еду. Читайте в статье!...
02 08 2026 12:42:43
Что поможет написать объявление без грамматических ошибок? В недрах агентства Netpeak рождается новый полезный сервис...
01 08 2026 10:15:46
Выдержка из интервью Дэнни Салливаном с представителями компаний Google и Bing...
31 07 2026 3:35:17
Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....
30 07 2026 1:37:28
C какими сложностями пришлось столкнуться при создании интернет-магазина....
29 07 2026 19:22:16
Разбираемся, как определить самые эффективные источники лидов....
28 07 2026 12:26:17
Правильное продвижение сайта и нестандартные предложения по привлечению трафика...
27 07 2026 23:51:30
Решили составить список из семи улучшений. Что нового, Netpeak?...
26 07 2026 8:58:55
Узнать, как управлять репутацией в сети для молодой компании, можно в статье Netpeak Journal: что такое репутация, как формируется образ бренда и что нужно делать для получения положительных отзывов....
25 07 2026 16:17:26
Как вести успешную рекламную кампанию в Японии, не зная языка....
24 07 2026 16:18:47
Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....
23 07 2026 19:40:22
Почему кого-то ругают за плохие тексты, а у кого-то из-за таких же текстов берет интервью Юрий Дудь? И другие особенности контента: авторское право, копирайтинг. Читать!...
22 07 2026 3:53:32
Чтобы и клиенту не стыдно было показать и свои ожидания не обмануть....
21 07 2026 21:48:32
Анализ пути — это как многокaнaльные последовательности в Universal ***ytics, только лучше....
20 07 2026 18:14:20
Рынок мобильных приложений и его глобальные тренды из исследования App Annie...
19 07 2026 1:50:53
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
18 07 2026 20:49:33
Зачем нужен мемуарник, как отличить истинные цели от навязанных и многое другое....
17 07 2026 1:43:36
Вывод информационного сайта из-под алгоритмического YMYL фильтра Google...
16 07 2026 13:21:25
Разработка, вёрстка и оптимизация мобильных версий сайтов — популярные темы последнего времени. Мы расскажем, что стоит и что не стоит делать в мобильном SEO....
15 07 2026 7:45:35
Мнение Сергея Петренко, CEO компании Odesseya....
14 07 2026 14:30:41
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
13 07 2026 7:18:55
Масштабируем кампанию в Google за счет управления конверсиями и работы с эффективными каналами продвижения....
12 07 2026 6:22:56
Как надолго завоевать доверие покупателя с помощью грамотного email-маркетинга? Примеры обращений к клиенту в рассылках, текст писем для привлечения и благодарности за покупку....
11 07 2026 20:15:23
Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....
10 07 2026 10:24:20
В основе каждой великой компании – хорошо рассказанная история....
09 07 2026 8:44:12
Клиникка использует лазеры и нуждается в продвижении. В специфических сферах привлечь потребителя впервые бывает сложнее и дороже, чем удержать его. Этот кейс о том, как повысить количество обращений новых клиентов с помощью видеорекламы...
08 07 2026 8:43:12
Выборка из 15 759 учетных записей клиентов WordStream в США по всем вертикалям, которые до размещали рекламу в поиске Google в 2020 году...
07 07 2026 21:59:53
Что бывает, когда работа над продвижением сайта начинается до его выхода в паблик....
06 07 2026 20:25:56
Современные платформы телефонии и коллтрекинга — это не только про звонки. С Ringostat вы узнаете, откуда пришел клиент, как менеджер ему ответил и какая реклама «принесла» деньги....
05 07 2026 9:16:11
Положительная динамика с первых месяцев работы....
04 07 2026 6:48:24
Как сэкономить на рекламе мобильных приложений в Facebook...
03 07 2026 16:25:33
Как понять, что именно нравится подписчикам в вашей рассылке...
02 07 2026 0:31:47
Знаете, как доменная зона Германии связана с криптовалютой, или почему в доменной зоне маленького острова площадью 10 квадратных километров зарегистрировано 20 млн доменов? Сейчас расскажем!...
01 07 2026 16:21:47
Прежде чем использовать феминитивы в коммуникации со своими клиентами и сотрудниками, убедитесь, что им это нужно и важно. Впрочем, ждите негатива при любом раскладе. Что с ним делать? Рассказываем....
30 06 2026 14:36:59
И научиться делать свою рекламу прибыльной. Читайте про типы автостратегий и способы их оптимизации....
29 06 2026 20:22:18
Как узнать особенности бизнеса в нише и что позаимствовать у конкурентов для SEO...
28 06 2026 12:20:34
Каким правилам нужно следовать, чтобы создать эффективный рекламный ролик?...
27 06 2026 8:25:52
Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...
26 06 2026 7:59:35
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
