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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...
20 06 2025 23:31:56
Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....
19 06 2025 18:17:55
Что учитывать при продвижении недвижимости, клиник красоты, магазинов косметики, сайтов по продаже семян, шин?...
18 06 2025 11:55:46
Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....
17 06 2025 17:23:12
Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...
16 06 2025 15:49:47
Удача и везение — не случайность. Это выбор. Любопытные эксперименты профессора Ричарда Вайсмена инсайде...
15 06 2025 12:33:55
Про мобильный дизайн. С красивой и понятной презентацией внутри....
14 06 2025 15:35:43
Одесские магазины, где продают вечерние и свадебные платья нуждаются в особом внимании интернет-маркетинга. Как настроить контекстную рекламу для малого и среднего бизнеса со скромными маркетинговыми бюджетами...
13 06 2025 12:30:26
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
12 06 2025 4:50:52
Четкий мануал для настройки Яндекс.Аудиторий от создания сегмента, работы с геолокацией, пикселем аудитории, похожими аудиториями, ретаргетингом и до корректировки ставок...
11 06 2025 12:38:44
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
10 06 2025 20:49:38
Алексей Селезнев проанализировал 29 млн кликов, и в этой статье вы прочитаете, как дорого обходятся рекламодателям клики в Google Ads....
09 06 2025 22:27:23
Необходимый элемент для защиты контента от копирования и в то же время — шанс стать популярным автором. Тем не менее, от водяных знаков отказываются. Узнать больше!...
08 06 2025 17:50:35
Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....
07 06 2025 10:55:34
Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...
06 06 2025 14:33:36
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
05 06 2025 18:15:41
Используйте методы Элияху Голдратта для оптимизации процессов в жизни и на работе...
04 06 2025 13:33:34
Как перенести рекламные кампании из адвордс в директ, используя только Google Editor и Директ Коммaндер? Делимся быстрым и эффективным методом...
03 06 2025 13:56:44
Руководство для всех, кто продает через Instagram: когда стоит воспользоваться рекламным кабинетом Facebook для настройки кампании в Instagram и как правильно запустить рекламу в Instagram через кабинет Facebook. Читайте дальше!...
02 06 2025 11:39:11
Как работают SEO-специалисты, что нужно знать о принципах работы алгоритмов Гугл, как продвигать мобильные приложения и каким образом может монетизироваться Телеграм. Узнать больше!...
01 06 2025 12:57:36
Услуга уровня элит-класса в конкурентной нише и не в самом простом для продвижения регионе. Рассказываем, как привели целевой трафик по минимальной цене. Узнать!...
31 05 2025 2:24:28
Осторожно: очень страшно. Про теневой бан, гифки, цену клика, рекламный бюджет, ответы подписчикам, ошибки, наличие интернета подробно и в драматических деталях. Читайте в статье!...
30 05 2025 22:50:41
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
29 05 2025 6:16:51
Плейсменты, требования, запоминаемость...
28 05 2025 13:43:10
Список курсов, книг, каналов и пабликов для работы с данными...
27 05 2025 16:33:26
Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...
26 05 2025 17:36:44
Среди интернет-маркетологов существует мнение, что медийная реклама — не перформанс-инструмент. То есть не приносит прямые конверсии. Когда медийные кампании продают — кейс центра тюнинга автомобилей премиум класса....
25 05 2025 3:14:19
Как определить, что SEO-продвижение не будет в тягость, что и кого читать начинающему специалисту...
24 05 2025 17:15:23
Рассказываем в подробностях, что полезного сделал Netpeak для своих клиентов с января по апрель 2017 года...
23 05 2025 15:49:26
Как мы проводили самую летнюю конференцию в условиях постлокдayна, пандемии и неизвестности....
22 05 2025 17:41:14
Как провести крутую конференцию по интернет-маркетингу, сделать трaнcляцию этой конференции и вместо сухих репортажей подготовить полезный контент для СМИ. Узнать больше....
21 05 2025 7:57:30
Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...
20 05 2025 23:12:52
Всё, что нужно знать заказчикам услуг о внутренней кухне PM-специалистов...
19 05 2025 23:45:25
Google внедрил новую возможность выделить объявление — автоматическое добавление часов работы. Давайте разберемся, как добавить эту полезную информацию в расширения объявлений...
18 05 2025 12:31:29
Какой эффективный способ использовать для проверки бизнес-возможностей новых проектов ecommerce?...
17 05 2025 7:29:34
Что нужно, чтобы реклама в интернете приносила прибыль....
16 05 2025 20:14:54
Тренинг по контекстной рекламе образовательных курсов в Google Ads, Яндекс.Директ, Target@mail...
15 05 2025 6:42:23
Стоит ли подключать автоматические стратегии управления ставками? Мы проверили, как работает «Целевая цена за конверсию» в разных тематиках....
14 05 2025 8:26:48
Создание репутации крутого специалиста — дело рук крутого специалиста....
13 05 2025 7:58:21
Начинаем работать с облачным сервисом хранения Google BigQuery...
12 05 2025 21:25:51
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
11 05 2025 22:19:18
Чтобы сделать что-то лучше, иногда надо довести это до абсурда. Так думают приверженцы теории «странных изделий» — chindogu...
10 05 2025 6:59:37
Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....
09 05 2025 2:32:12
Эффективность рекламы в поиске падает, но растут YouTube, контекстно-медийная сеть и другие платформы...
08 05 2025 9:20:26
Образец товарного фида можно использовать при запуске динамических объявлений в поисковой сети Яндекса и Google, в кампаниях со смарт-баннерами в Яндекс.Директ, в динамических медийных кампаниях Google Рекламы, в товарной рекламе — с помощью Google Merchant Center....
07 05 2025 13:33:10
Советы специалистов Netpeak: виды фильтров Google, что с этим делать и как снять ручные санкции Google....
06 05 2025 2:39:49
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
05 05 2025 3:45:40
Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....
04 05 2025 14:28:20
Рекомендации от Google для бизнеса о поведении в период распространения коронавируса....
03 05 2025 21:44:34
Как протестировать MVP мобильного приложения, получить обратную связь и сформировать гипотезы...
02 05 2025 22:46:15
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
