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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Корзина интернет-магазина поможет повысить продажи, если ее функционал содержит: фото товара, кликабельное наименование товара, перечень способов оплаты. Узнать больше!...
13 02 2025 13:42:40
Рассказываем, как комaнда Netpeak работала над ростом органики и повышением видимости приоритетных страниц сайта по релевантной семантике....
12 02 2025 0:32:56
Пришло такое время — обновить данные, тем более что в начале сентября появилось исследование Google....
11 02 2025 6:47:25
Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....
10 02 2025 12:26:51
Как составить список, работа с которым займет меньше времени, чем обычно. На примере обработки запросов в ювелирной тематике....
09 02 2025 23:45:25
Как научиться продвигать мобильные приложения и заpaбатывать на этом....
08 02 2025 17:46:47
Кейс SMM-специалиста Edu-CASH.com о том, что делать, если Facebook страница заблокирована. И почему могут забанить аккаунт даже популярного бренда. Узнайте в статье!...
07 02 2025 18:27:54
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
06 02 2025 4:22:18
Новая услуга для бизнесов, которым большое количество подписчиков не приносит продаж...
05 02 2025 20:18:46
Процесс привлечения сторонних ресурсов отнимает основную часть времени у большинства основателей стартапов. Читайте руководство, которое поможет сделать этот процесс во время серии А более эффективным....
04 02 2025 2:59:41
Образец рассылки от создателе Replyapp.io Олег Белозор, на которую ответили самые влиятельные эксперты в мире в2в продаж...
03 02 2025 6:21:24
Экспорт/импорт с помощью Excel-файла или таблиц Google позволит скопировать и перенести кампании, группы объявлений и объявления в Facebook вместе с креативами, текстами, ссылками и utm-метками...
02 02 2025 6:50:49
При использовании похожих инструментов важно не переборщить с количеством рекламы...
01 02 2025 15:30:13
Рекомендации от Google для бизнеса о поведении в период распространения коронавируса....
31 01 2025 16:11:28
Одесские магазины, где продают вечерние и свадебные платья нуждаются в особом внимании интернет-маркетинга. Как настроить контекстную рекламу для малого и среднего бизнеса со скромными маркетинговыми бюджетами...
30 01 2025 15:23:30
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
29 01 2025 7:37:44
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
28 01 2025 20:34:11
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
27 01 2025 16:27:10
11 типов расширений и результат их внедрения на примере запущенных рекламных кампаний...
26 01 2025 1:46:13
Как операторы поисковых запросов Google помогают при продвижении сайта и анализе конкурентов....
25 01 2025 21:13:50
Подробно рассказываем, как создать, внедрить и проверить XML-карту сайта....
24 01 2025 21:36:54
Хороший пост с примерами продающих «Белых книг»....
23 01 2025 19:14:13
Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....
22 01 2025 6:41:29
Как превратить неактивных подписчиков в вовлеченную аудиторию....
21 01 2025 15:11:25
Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...
20 01 2025 11:26:15
Чем шокировала, радовала и удивляла реклама в социальных сетях и контекстная в Google в апреле 2021 года...
19 01 2025 15:39:34
Формула изменения поведения Фогга и два красочных примера инсайде....
18 01 2025 7:54:23
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
17 01 2025 19:45:47
Личный кабинет на сайте: что нового во внешнем виде, внутренностях и отчетах, функционале и юзабилити, автоматизации работы с оплатами, интернет-представительстве клиента и для специалистов. Узнайте больше!...
16 01 2025 2:25:14
Что такое посол бренда и чем он отличается от адвоката бренда?...
15 01 2025 4:38:10
Что такое обратная связь, почему фидбек от клиентов важен и как его правильно собирать. Все, что нужно знать, чтобы получить отзыв от клиента....
14 01 2025 20:50:21
Как найти, нарастить и проанализировать ссылочную массу...
13 01 2025 9:54:28
Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...
12 01 2025 7:44:27
На вопрос «как все успеть?» хочется ответить что-то вроде «никак». Особенно, если дело касается задач, связанных с творчеством. Но можно и не срывать дедлайны. Читать дальше....
11 01 2025 1:42:57
Почему кого-то ругают за плохие тексты, а у кого-то из-за таких же текстов берет интервью Юрий Дудь? И другие особенности контента: авторское право, копирайтинг. Читать!...
10 01 2025 2:45:49
Мы собрали топ обидных промахов в сборе семантики, влияющих на качество и эффективность продвижения проекта...
09 01 2025 12:31:29
Мы собрали 30+ Телеграм-каналов, где вы найдете только полезную и актуальную информацию про маркетинг, SEO, SMM, веб-аналитику и развитие бизнеса...
08 01 2025 19:55:25
Идеальный вариант — грамотно оптимизировать страницы фильтров уже на этапе разработки сайта...
07 01 2025 15:52:39
Как найти продавцов для маркетплейса с помощью рекламы в Google, Facebook, TikTok и Viber....
06 01 2025 21:48:56
Девять свежих советов для продвижения интернет-магазинов...
05 01 2025 15:44:16
Мы достигли поставленных на старте продвижения целей: вернули потерянный трафик, получили дальнейший рост видимости сайта и увеличили доход....
04 01 2025 8:52:53
Как настроить эксперимент на сайте без сторонней помощи...
03 01 2025 12:54:18
Если вы не можете улучшить свой уровень конверсий и поднять ставки, оптимизация показателя качества может быть вашим единственным выходом, чтобы сохранить высокий рейтинг без больших затрат. Статья, которая расставляет точки над «i»....
02 01 2025 17:37:31
SEOmoz создал систему, которая определяет релевантность страницы поисковому запросу....
01 01 2025 6:37:36
Как с помощью GA4 анализировать рекламные кампании, лежа на диване...
31 12 2024 18:41:15
Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...
30 12 2024 18:56:56
Пройдем вместе путь вебмастера от первых шагов и до вершины ТОПа :)...
29 12 2024 9:29:11
Как собрать свой онлайн марафон на 500 или 1000 человек? Сколько это стоит и какие сервисы использовать. Давайте разбираться....
28 12 2024 6:46:15
Совет Константина Леоновича (Sape.ru), 4 наших + 2 бонусных...
27 12 2024 17:31:21
Как стать востребованным сео оптимизатором: 35+ ссылок для обучения и совершенствования своих знаний, а также советы...
26 12 2024 5:31:53
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::