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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Программа действий, если захотелось удалить себя из ютуба, гугла и прочих социалок....
27 03 2024 6:28:40
Мы отключили интернет всем сотрудникам агентства интернет-маркетинга и получили удивительные результаты....
26 03 2024 12:21:17
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
25 03 2024 14:10:11
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
24 03 2024 8:40:24
Формула изменения поведения Фогга и два красочных примера инсайде....
23 03 2024 3:26:57
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
22 03 2024 15:27:43
Те самые проблемы, если бизнес пришел к вам за услугой, но ему не нужен маркетинг в интернете. Мнения экспертов интернет-маркетинга....
21 03 2024 22:44:25
В помощь вебмастерам, которые поддерживают работу PBN....
20 03 2024 1:43:37
Распространенные ошибки в XML-фидах Google и Яндекс, CSV-фидах и как исправить их своими силами. Используем Notepad++, отладчик ленты Facebook и Excel. Узнать больше!...
19 03 2024 11:58:44
Устанавливаем тег конверсий: самостоятельно и с помощью Google Tag Manager....
18 03 2024 10:56:38
Продвижение крупного интернет-магазина в перегретой нише...
17 03 2024 15:22:30
Домен — это адрес (имя) сайта в сети интернет, по которому его находят пользователи. Он состоит из букв, символов и цифр, должен быть уникальным, чтобы владельцу ресурса удалось добиться качественного продвижения. Как подобрать лучший? Читайте!...
16 03 2024 7:44:55
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
15 03 2024 5:30:57
кмс Google: как достичь поставленной цели с помощью рекламы? Делимся советам по настройке КМС-кампаний....
14 03 2024 15:52:33
«Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....
13 03 2024 0:33:24
Динамический ремаркетинг: как вернуть посетителя на сайт и продать, когда человеку «надо ещё подумать»....
12 03 2024 9:56:23
Как упростить работу со скриптами на языке R? Программирование удобного интерфейса с помощью пакета «gWidgets»...
11 03 2024 5:40:12
Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...
10 03 2024 2:30:14
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
09 03 2024 4:55:19
4 кейса с шагами, рекомендациями и результатами, которые помогут грамотно распределить средства на рекламу....
08 03 2024 14:18:31
Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...
07 03 2024 3:59:33
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
06 03 2024 15:59:50
Мы хотим купить комaнду с компетенциями в сфере медиабаинга, чтобы объединить силы для развития онлайн-рынка...
05 03 2024 21:11:53
Сотрудники на рабочем месте расслаблены, игнорируют распоряжения, а при давлении угрожают увольнением. В эту ситуацию нередко попадают руководители. Некоторые считают, что причина — выстраивание дружеских отношений с подчинёнными....
04 03 2024 19:29:39
Небольшая wiki о программатик-баинг и RTB. Объяснение алгоритма, обзор рынка, мнения экспертов....
03 03 2024 19:58:49
Увлекательные истории от специалиста по контекстной рекламе....
02 03 2024 21:51:49
Товарные объявления торговых кампаний заметнее в выдаче, да и показываться будут и в Bing, и в Yahoo, и в AOL...
01 03 2024 17:35:38
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
29 02 2024 6:57:50
Какие типы звонков отслеживаются? Есть ли интеграция с Google ***ytics? Существуют ли в выбранном сервисе или на платформе инструменты интеграции с другими системами? Больше вопросов и ответов на них — в статье....
28 02 2024 22:45:41
Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....
27 02 2024 9:22:25
5 мая в 17:00 — митап в Zoom с Радомиром Новковичем — фаундером RadASO и CEO Tonti Laguna Mobile....
26 02 2024 13:24:12
Когда и зачем нужно заказывать сбор семантического ядра, на какие этапы разбит процесс и какие результаты можно получить...
25 02 2024 18:44:52
Подробная инструкция по интеграции с облачной базой данных и сравнение BI-платформ....
24 02 2024 20:15:43
Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...
23 02 2024 18:54:35
Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...
22 02 2024 8:57:43
До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....
21 02 2024 22:40:48
Рекомендации и мнения экспертов по одной из самых противоречивых тем украинского интернет-прострaнcтва....
20 02 2024 2:55:20
Как мы недооценили уровень конкуренции в нише, и как пришлось с этим бороться, чтобы принести пользу клиенту....
19 02 2024 0:42:19
Истории бизнеса и советы от Игоря Жаданова (Readdle), Александра Галкина (Competera) и Рагнара Саас (Pipedrive)...
18 02 2024 11:43:50
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
17 02 2024 9:40:36
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
16 02 2024 18:36:55
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
15 02 2024 7:27:41
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
14 02 2024 5:32:19
Готовы ли вы доверить основные настройки кампании автоматическим алгоритмам?...
13 02 2024 9:42:45
Чат-боты упрощают процесс покупки продуктов онлайн. Netflix, Adidas, British Airways и другие крупные компании уже внедрили ботов в свои маркетинговые системы. Так ли это эффективно, если компании начинают отказываться от операторов в пользу ботов?...
12 02 2024 20:45:53
Алексей Селезнев проанализировал, как дорого обходятся рекламодателям клики по объявлениям в 25 тематиках и 92 странах....
11 02 2024 10:23:37
Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....
10 02 2024 20:10:54
Ежеквартальное исследование Netpeak по стоимости клика...
09 02 2024 16:49:14
Дмитрий Шахов, Алексей Чекушин и другие эксперты поделились своим опытом решения сложных вопросов SEO на примере больших проектов....
08 02 2024 2:38:42
Как работают SEO-специалисты, что нужно знать о принципах работы алгоритмов Гугл, как продвигать мобильные приложения и каким образом может монетизироваться Телеграм. Узнать больше!...
07 02 2024 6:55:43
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::