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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Комaнда Serpstat проанализировала стратегии продвижения лидеров ниши онлайн-образования. Читайте о главных инсайтах в посте....
30 08 2026 13:53:59
Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...
29 08 2026 9:19:51
Сериал «Ход королевы» взорвал интерес к шахматам, и вот насколько сильно...
28 08 2026 22:16:36
Как Netpeak работал с сайтом филиала крупного бренда и добился результатов, несмотря на то, что сервера проекта находятся в другой стране....
27 08 2026 19:59:18
Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....
26 08 2026 9:19:59
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
25 08 2026 11:41:55
Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...
24 08 2026 17:27:43
Лидеров определили открытым голосованием. В ТОП-списки вошли CPA-сети, которые набрали больше всего голосов суммарно и по отдельным критериям....
23 08 2026 6:29:56
Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...
22 08 2026 16:40:51
Убираем человеческий фактор при сборе отчетов по контекстной рекламе...
21 08 2026 9:21:25
Междугородние перевозки и их реклама. Кейс Павла Верлана...
20 08 2026 1:16:29
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
19 08 2026 9:38:11
Низкочастотные, низкоконкурентные, Long Tail и другие термины, которые нужно знать и понимать....
18 08 2026 11:13:54
Идем в Бразилию: опыт Depositphotos + полезные факты....
17 08 2026 10:42:30
Как пользоваться «Совмещением данных» с учетом всех особенностей инструмента...
16 08 2026 9:45:17
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
15 08 2026 16:28:23
Выясняем, есть ли жизнь у мобильных всплывающих окон, и как их сделать правильно...
14 08 2026 19:25:32
Как настроить работу удаленной комaнды сотрудников и успевать выполнить все задачи...
13 08 2026 16:47:38
Первая реакция на перегорание — послать все к чертям собачьим. Очень заманчиво, но правильно ли убегать от всех проблем?...
12 08 2026 21:23:39
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
11 08 2026 3:52:31
Находим пользователей, которые не знали, что им нужен ваш товар или услуга....
10 08 2026 13:51:11
Сегодня именно тот день, когда пора решиться и отправить своё резюме в нашу компанию....
09 08 2026 2:57:47
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
08 08 2026 4:46:31
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
07 08 2026 21:55:14
В этой статье я покажу пример визуальной работы с закладкой и пошагово разберу процесс их создания и применения для удобства визуализации данных...
06 08 2026 8:13:28
Чем работа веб-студий отличается от конструкторов сайтов, как выбрать веб-студию и пять базовых понятий, которые должен знать каждый, кто решил создать сайт....
05 08 2026 15:39:40
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
04 08 2026 7:16:19
Расширяем возможности визуализации данных из Google ***ytics c помощью пакета RGA и Power BI...
03 08 2026 1:25:47
Список курсов, книг, каналов и пабликов для работы с данными...
02 08 2026 17:24:30
Предположим, что оптимизация в аккаунте похожа на реальный мир и рассмотрим несколько примеров :)...
01 08 2026 0:31:18
Менять карьеру страшно, особенно после тридцати. Поэтому мы спросили людей, у которых это получилось — через какие трудности им пришлось пройти....
31 07 2026 15:12:43
Новая услуга от Netpeak по ведению Instagram и Facebook...
30 07 2026 10:15:50
Нейронные сети, нейросети онлайн, сверхточные нейронные сети. Я рассажу, как они устроены, как написать свою нейронную сеть с нуля, как правильно обучить нейронную сеть на имеющихся данных...
29 07 2026 7:38:59
Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....
28 07 2026 17:49:22
В статье рассказываем, какие бывают push-уведомления, когда их используют, даем чек-лист и пошаговую инструкцию по созданию успешной push-рассылки....
27 07 2026 22:40:13
В одной из самых «перегретых» ниш вышли в топ-5 по некоторым высокочастотным запросам. Узнать больше!...
26 07 2026 20:52:59
Почему встречаются низкие показатели переходов на сайты по всем источникам трафика? Нет рекламодателей, которые могут предложить пользователям те или иные товары и услуги....
25 07 2026 14:38:14
Как сформировать правильную стратегию продвижения и сфокусировать внимание на получении прибыли...
24 07 2026 0:43:51
Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...
23 07 2026 19:26:41
Как зарегистрироваться в приложении Facebook Business Manager и грамотно сделать и настроить аккаунт...
22 07 2026 21:58:51
Как поможет Regex Engines в работе с Google ***ytics и преимущества использования Regex в Диспетчере тегов Google. Узнать больше....
21 07 2026 22:35:45
Определение и настройка главного зеркала сайта в поисковых системах — первое, что нужно сделать перед раскруткой сайта...
20 07 2026 10:53:37
Краткая инструкция для новичков. Структура сайта, внутренняя перелинковка, юзабилити, контент, оптимизация тегов и заголовков, HTTPS, скорость загрузки сайта, mobile friendly и другие. Узнать больше!...
19 07 2026 15:52:30
У нас на руках оказались все карты для создания собственного мини-рейтинга популярных сервисов email-рассылок....
18 07 2026 20:23:53
Совет Константина Леоновича (Sape.ru), 4 наших + 2 бонусных...
17 07 2026 18:49:13
В аккаунте ***ytics появилась возможность подключения ремаркетинга в поисковой сети Google. Расскажем о результатах применения инструмента на примере кейса крупного проекта ecommerce....
16 07 2026 6:42:46
Грамотно оформленные метатеги презентуют сайт, помогают пользователям быстро найти нужную информацию, а поисковым системам — повысить ресурс в выдаче...
15 07 2026 8:33:51
Контекстная реклама и ее эффективность: как долго длится, как измерить, что бывает, как заканчиваются деньги....
14 07 2026 11:39:46
Будь мобильным — заливай видео на Youtube с телефона...
13 07 2026 13:14:27
Главная цель инфлюенс-маркетинга — теплый и близкий контакт с аудиторией. Клиентам нравится ассоциировать продукты с живыми, знакомыми им людьми — пускай и только по интернету. Читать дальше....
12 07 2026 2:42:39
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
