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».
Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.
Комментарии:
Как мы проводили самую летнюю конференцию в условиях постлокдayна, пандемии и неизвестности....
26 04 2024 17:39:44
Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....
25 04 2024 16:32:28
Наш обзор кинофильма «Социальная сеть» про Facebook и Марка Цукерберга....
24 04 2024 21:34:37
О том, как рассчитать коэффициент ROI (ROMI) для выявления эффективности и прибыльности рекламных кампаний...
23 04 2024 12:59:25
Что такое【контекстная реклама】и как ее настроить? Подробный чек-лист ✅ в блоге Netpeak ⟁ ▷ 200 ступеней рекламной кампании в Google AdWords, Яндекс.Директ ⚡...
22 04 2024 1:47:41
Ежегодный прирост рынка фриланса в Украине составляет в среднем 35%. В прошлом году зарегистрировано более 200 тысяч проектов на общую сумму 385 млн гривен....
21 04 2024 15:50:30
Зная стоимость клика в вашей тематике или регионе, коэффициент конверсии на сайте, вы можете оценить объем необходимых в рекламу инвестиций и прогнозировать стоимость конверсии. Узнать больше!...
20 04 2024 16:56:24
Зачем маркетологи и аналитики обращаются к языку программирования R в повседневной работе нужно и какая польза от программирования на R в интернет-маркетинге в интервью Алексея Селезнева...
19 04 2024 6:51:55
PR должен решать задачи бизнеса и для этого мало мониторить упоминания компании или бренда, нужно анализировать. С появлением соцсетей пиар изменился. Узнать больше!...
18 04 2024 6:37:26
Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....
17 04 2024 2:13:35
Правильно задать вопрос или сфоримулировать ответ на собеседовании это еще далеко не все. Рецензия на книгу Ласло Бока «Работа рулит»...
16 04 2024 20:50:26
Учимся выстраивать коммуникацию по специальным сценариям....
15 04 2024 14:31:11
Технологии решают, но не всегда....
14 04 2024 20:20:14
Результаты кампании динамического ремаркетинга для соцсетей...
13 04 2024 12:32:10
Правильная постановка целей, задач и дедлайна — основа успешной работы...
12 04 2024 14:27:39
Впереди ещё черная пятница и новогодние праздники. И успех массовых распродаж можно повторить....
11 04 2024 8:43:17
«Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....
10 04 2024 21:50:18
Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...
09 04 2024 7:27:38
Настроенная бизнес-страница компании в Instagram и на Facebook помогает в продвижении товаров и услуг в интернете. Поэтому так важно сделать их seo-friendly. Читать!...
08 04 2024 9:15:24
SMM для агентства перформанс-маркетинга. Как уйти от сухих текстов и стандартных баннеров для бизнес-страницы....
07 04 2024 8:55:59
Есть ли шанс на апелляцию...
06 04 2024 23:29:58
Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...
05 04 2024 15:33:51
Семинар с примерами юзабилити решений от Twitter, Airbnb, Amazon и других компаний....
04 04 2024 11:41:43
Как настроить эффективную удаленную работу: комментарии топ-менеджмента Netpeak с плюсами и минусами, личными инсайтами и рекомендациями. А также перспективы развития удаленки в комапнии. Читать дальше!...
03 04 2024 15:50:59
Ссылка с сайта с высоким тИЦ уже не считается качественной. Хороший донор вычисляется по комплексу факторов. Большую часть работы придется делать вручную. Важно найти отличный сайт, с огромным количеством интересного контента, оцененного по достоинству читателями, и гармонично туда вписать свою статью со ссылкой...
02 04 2024 1:11:47
Настройка в четыре шага и другие отличия AdWords Express от Adwords...
01 04 2024 9:35:30
Есть 3 качества грамотного руководителя: самоорганизованность, скорость. четкость. А еще — уйма фишек организации рабочих процессов, которые применяют в Netpeak. Узнать!...
31 03 2024 22:35:43
Ситема управления проектами, которой пользуются в Netpeak....
30 03 2024 10:15:50
Техника безопасности по безукоризненным рекламным кампаниям...
29 03 2024 9:35:45
О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...
28 03 2024 12:43:35
Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....
27 03 2024 4:14:28
Как с помощью Google Tag Manager отслеживать исходящие ссылки на сайте и загрузки файлов с него...
26 03 2024 12:31:29
Свежесть и актуальность контента — главные уроки из Google December 2020 Core Update. Почему — читайте в статье....
25 03 2024 18:33:19
Участники Netpeak Cluster поделились своими инсайтами....
24 03 2024 16:56:28
В продажах лучше визуализировать путь потребителя в виде нейронных сетей....
23 03 2024 21:50:57
Легче запомнить алгоритм правильной отправки писем, чем потом вытягивать их из папки со спамом....
22 03 2024 5:28:12
Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....
21 03 2024 5:20:42
Эта книга рекомендована к прочтению решительно всем :)...
20 03 2024 16:49:14
Клиенты возвращаются к хорошему сервису, который начинается с понятного интерфейса на сайте, продолжается в общении с вежливым сотрудником и заканчивается в общении с воспитанным курьером или менеджером в пункте самовывоза. Что ещё? Читайте!...
19 03 2024 23:23:20
Как помешать фейковым 404 страницам испортить статистику вашего сайта?...
18 03 2024 6:48:40
Представляем Netpeak Journal — новый этап развития блога Netpeak...
17 03 2024 0:43:33
Почему синергия штатных специалистов и рекламное дело агентства SEO/PPC выгодна бизнесу...
16 03 2024 13:29:48
Стоит ли подключать автоматические стратегии управления ставками? Мы проверили, как работает «Целевая цена за конверсию» в разных тематиках....
15 03 2024 17:27:51
Делимся фишками, которые облегчат работу как новичкам, так и специалистам....
14 03 2024 5:58:17
О работе, креативности, мотивации и многом другом....
13 03 2024 23:18:59
Как решить все задачи и не изобретать велосипед. Мы оторвались от отчетов в Google ***ytics и Яндекс.Метрике и посмотрели в сторону менее популярных инструментов для веб-аналитики. Узнайте больше!...
12 03 2024 15:45:27
Спикер ОА Петр Аброськин рассказал всем читателям блога о фишках настройки ремаркетинга в контекстной рекламе и социальных сетях...
11 03 2024 17:47:13
Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...
10 03 2024 1:17:14
На этой картинке изображены два предмета. Один из них называется «буба», а второй «кики»....
09 03 2024 12:49:57
Что делать, если вы столкнулись со спамом в отчетах Google ***ytics? Значит ли это, что кто-то имеет доступ к вашему аккаунту, или что кто-то специально влияет на данные сайта в GA? Как они это делают? И как исключить подобные данные из отчетов?...
08 03 2024 13:54:29
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
