Google Tag Manager: актуальные и неочевидные фишки > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Google Tag Manager: актуальные и неочевидные фишки

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? Одностраничное приложение (Single Page Application, SPA) — это веб-приложение, использующее единственный HTML-документ как оболочку для всех веб-страниц. Все необходимые данные подгружаются в него динамически при помощи AJAX-запросов на сервер.

Из-за своих особенностей 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батывает.

Выводы

  1. В любом случае используйте dataLayer.push () — так вы добавляете данные в массив в качестве нового значения, а не перезаписываете старое, как в случае с методом использования знака «=».
  2. Для корректного сбора и передачи данных в Google ***ytics из SPA-сайтов с человекопонятным URL в GTM нужно создать триггер изменения в истории. Если в ваш URL содержит хэш, нужно просто добавить свою пользовательскую переменную в тег и заменить в триггере условие активации на «\"History Source\" равно popstate».

Если вас заинтересовал материал и вы хотите уточнить детали, добро пожаловать в комментарии.



Комментарии:

Как перестать суетиться и начать контролировать свою продуктивность

Как перестать суетиться и начать контролировать свою продуктивность Инструкция для трудоголиков для тех, кто старается выполнить как можно больше заданий, а заметного прогресса при этом нет. Работать много и эффективно не всегда полезно. Если бы эффективная работа была залогом успеха, каждому хомяку воздвигли бы памятник...

21 02 2024 2:12:11

Запускаем блоги на орбиту — МКС от Netpeak

Запускаем блоги на орбиту — МКС от Netpeak Грамотный контент важен для всех, но особенно — для аутсорсов и стартапов в B2B. Если вы согласны с этим, давайте делать медиа....

20 02 2024 2:47:38

Как орфографические ошибки могут повлиять на позиции сайта в выдаче?

Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....

19 02 2024 22:42:13

Что вы можете сделать со своим пресс-релизом

Что вы можете сделать со своим пресс-релизом Написание и распространение пресс-релизов концептуально устарело. Как привлечь аудиторию читателей СМИ без них?...

18 02 2024 18:36:59

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...

17 02 2024 2:20:19

Google Tag Manager: актуальные и неочевидные фишки

Google Tag Manager: актуальные и неочевидные фишки Активно юзая Google Tag Manager, узнали много нового о dataLayer и методах отслеживания статистики в Google ***ytics для SPA-сайтов и лендингов. Об этом и расскажем...

16 02 2024 1:30:19

Новая услуга по созданию лендингов на Tilda

Новая услуга по созданию лендингов на Tilda Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...

15 02 2024 4:51:24

Скрам-система — внедрить и отказаться. Опыт компании Boosta

Скрам-система — внедрить и отказаться. Опыт компании Boosta Внедрение скрама, чтобы решить проблемы в управлении бизнесом, год работы на нем и отказ от методологии. Читайте об опыте Boosta, которая объединяет 9 SEO-комaнд на удаленке....

14 02 2024 2:45:36

Основные виды контента и правила оформления в зависимости от вида

Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...

13 02 2024 3:28:18

Как продвигать мобильное приложение с ограниченным бюджетом? Руководство для новичков

Как продвигать мобильное приложение с ограниченным бюджетом? Руководство для новичков Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...

12 02 2024 0:30:22

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2018 года

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2018 года Данные по 43 миллионам кликов в 27 тематиках и 391 городах страны...

11 02 2024 0:16:10

[SEO настоящего] под микроскопом

[SEO настоящего] под микроскопом [SEO 2.0] — это продукт для бизнеса от Netpeak, он включает в себя принципиально новый подход к продвижению сайтов....

10 02 2024 14:55:26

Netpeak Group купила конференцию eCommerce от OWOX

Конференцию eCommerce будет развивать комaнда Octopus Events...

09 02 2024 23:21:24

Как быстро собрать данные из блока People also ask в Google

Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....

08 02 2024 9:24:30

Собеседование в рекламное агентство Ogilvy

Собеседование в рекламное агентство Ogilvy Тест, который проходят все соискатели. Никому не показывайте!...

07 02 2024 10:13:51

Увольнение сотрудника. Алгоритм действий от Netpeak

Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....

06 02 2024 19:20:38

Как быстро и бесплатно импортировать в Google Таблицы статистику из Facebook

Понадобится всего пару минут, чтобы создать отчет о тратах, количестве конверсий или любых других важных показателях. Понятная инструкция для PPC-специалистов и про возможности и ограничения бесплатной версии расширения. Читайте дальше!...

05 02 2024 21:54:23

Кейс по контекстной рекламе в тематике «языковые курсы»

Кейс по контекстной рекламе в тематике «языковые курсы» Филиалы курсов в Таллине, Москве, Днепропетровске. Оказывается, нельзя так просто взять и посчитать ROMI (возврат маркетинговых инвестиций) в этой тематике....

04 02 2024 14:51:14

Недостатки популярных CMS интернет-магазинов: 1C-Битрикс, Magento, OpenCart, WooCommerce, CS-Cart

Недостатки популярных CMS интернет-магазинов: 1C-Битрикс, Magento, OpenCart, WooCommerce, CS-Cart Как новичкам в ecommerce выбрать первую CMS. Преимущества и трудности работы для крупных и небольших интернет-магазинов, русскоязычные и мультиязычные, с активной техподдержкой и без нее. Узнать больше!...

03 02 2024 19:49:15

30+ мясных Telegram-каналов по digital-маркетингу: что читать новичку и опытному бизнесмену

30+ мясных Telegram-каналов по digital-маркетингу: что читать новичку и опытному бизнесмену Мы собрали 30+ Телеграм-каналов, где вы найдете только полезную и актуальную информацию про маркетинг, SEO, SMM, веб-аналитику и развитие бизнеса...

02 02 2024 11:58:40

10 фишек облачной телефонии для удаленной работы отдела продаж и колл-центра

10 фишек облачной телефонии для удаленной работы отдела продаж и колл-центра Как связываться с клиентами и что делать, чтобы качество обслуживания не просело. Менеджер, который обpaбатывает звонки со своего мобильного, остается без контроля, поэтому АТС оказывается идеальным решением. Разбираемся в статье!...

01 02 2024 7:47:22

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года Ежеквартальное исследование Netpeak по стоимости клика...

31 01 2024 23:22:16

Подмена текста с помощью GTM — как быстро изменить контент на сайте

Подмена текста с помощью GTM — как быстро изменить контент на сайте Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....

30 01 2024 18:19:28

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна»

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна» Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....

29 01 2024 13:10:47

45 советов по мобильному маркетингу от Mobile Growth Experts

45 советов по мобильному маркетингу от Mobile Growth Experts Лучшие фишки продвижения мобильных приложений в адаптированном переводе отчета Branch.io...

28 01 2024 4:32:34

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...

27 01 2024 5:40:52

Рекламный кабинет в Facebook — пять фишек для упрощения работы

Рекламный кабинет в Facebook — пять фишек для упрощения работы Возможности для специалистов по рекламе в Facebook, о которых знают далеко не все. Подробности — тут....

26 01 2024 16:17:49

Как запустить R и R Studio в Google Cloud Platform

Как запустить R и R Studio в Google Cloud Platform Используем возможности Google Cloud Platform в работе с R...

25 01 2024 0:52:31

Как не слить бюджет на клики? Все, что нужно знать о кликфроде

Как не слить бюджет на клики? Все, что нужно знать о кликфроде Как избежать скликивания — инструкция...

24 01 2024 15:58:16

LinkedIn Ads: как настроить первую рекламную кампанию

LinkedIn Ads: как настроить первую рекламную кампанию LinkedIn хороший инструмент для достижения B2B целей. Пока его редко используют в СНГ, что делает LinkedIn еще привлекательней. В этой социальной сети возможности рекламных форматов и таргетингов почти безграничны. Узнать больше....

23 01 2024 18:43:35

Как digital-специалистам сохранить конкурентоспособность в 2021 году: 5 важных навыков и рекомендации по самопрезентации

Как digital-специалистам сохранить конкурентоспособность в 2021 году: 5 важных навыков и рекомендации по самопрезентации Digital-маркетинг развивается и модернизируется: новые методы работы, инструменты и технологии. И стабильно растут требования к digital-специалистам. Чтобы оставаться в профессии, нужно мониторить тренды, отслеживать тенденции и повышать знания....

22 01 2024 23:42:16

Почти идеальный способ настроить междоменное отслеживание

Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....

21 01 2024 1:10:55

Как бесплатно защитить книгу от копирования — инструкция для писателей

Как бесплатно защитить книгу от копирования — инструкция для писателей Как обезопасить себя от интернет-пиратов и защитить авторское право онлайн....

20 01 2024 11:47:14

Лучшие расширения-переводчики в Google Chrome

Лучшие расширения-переводчики в Google Chrome Многие расширения Google Chrome предназначены для изучения иностранных языков, позволяют сохранять историю переводов и отдельные слова в словарь для дальнейшего запоминания....

19 01 2024 11:31:18

Как исключить площадки в Google Рекламе и сэкономить деньги — реклама мобильных приложений

Как исключить площадки в Google Рекламе и сэкономить деньги — реклама мобильных приложений Как избежать скликивания, случайных переходов и «пустых» установок при рекламе мобильного приложения...

18 01 2024 14:38:37

Как составить техзадание по крауд-маркетингу для сайтов услуг

Крауд-маркетинг предполагает взаимодействие с целевой аудиторией с помощью рекомендательных комментариев на форумах, сайтах вопросов и ответов, в блогах, на других площадках...

17 01 2024 2:23:14

Как собрать миллион подписок на рассылку за год: советы от BuzzFeed

Как собрать миллион подписок на рассылку за год: советы от BuzzFeed Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....

16 01 2024 17:27:21

Индекс ридабилити и SEO

Индекс ридабилити и SEO Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....

15 01 2024 12:24:54

Контекстная реклама для сервиса доставки пиццы в Украине — ROMI 616% за 4 месяца

Контекстная реклама для сервиса доставки пиццы в Украине — ROMI 616% за 4 месяца Поисковая реклама для службы доставки еды — пpaктические советы, как выделиться на фоне конкурентов в популярной нише. На примере харьковской доставки пиццы мы покажем, как правильно продавать еду. Читайте в статье!...

14 01 2024 14:39:20

Ответы сервера — подробная инструкция

Ответы сервера — подробная инструкция Правильное распределение кодов ответов сервера позволяет поисковым системам экономить ресурсы на работу с сайтом. Поисковые роботы будут получать только необходимую информацию...

13 01 2024 17:38:13

Краткий обзор Netpeak Checker 3.0: парсинг выдачи поисковых систем

Краткий обзор Netpeak Checker 3.0: парсинг выдачи поисковых систем Не только netpeak spider. Главные детали о новой версии инструмента Netpeak Checker 3.0: парсер гугла, массовый анализ сайтов, антибан-алгоритм для прокси, шаблоны параметров и фильтров...

12 01 2024 21:50:45

Кейсы: как отзывы о товарах увеличили конверсию интернет-магазина на 14% и трафик на 200%

Кейсы: как отзывы о товарах увеличили конверсию интернет-магазина на 14% и трафик на 200% Наличие или отсутствие в карточках отзывов о товарах интернет магазина сказывается на продажах, а также оказывает влияние на SEO. Об этом, а также о пользе автоматизированного сбора отзывов о товарах мы расскажем в этой статье....

11 01 2024 9:56:35

Как грамотно предупредить о файлах cookie на сайте

Как грамотно предупредить о файлах cookie на сайте Как создать и внедрить баннеры об использовании куки-файлов с помощью Google Tag Manager и OneTrust...

10 01 2024 7:17:42

Чем http отличается от https

Чем http отличается от https Чем отличается протокол HTTPS от HTTP — криптошифрованием, обеспечивающим безопасность ресурса...

09 01 2024 5:45:43

Номер телефона в формах — как помочь пользователю оставить номер на сайте

Номер телефона в формах — как помочь пользователю оставить номер на сайте Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...

08 01 2024 12:31:32

Как и зачем переводить рекламные кампании на украинский — эксперимент и полезные формулы

Как и зачем переводить рекламные кампании на украинский — эксперимент и полезные формулы При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....

07 01 2024 14:15:32

Какие фишки я беру у конкурентов — дневник оптимизатора

Какие фишки я беру у конкурентов — дневник оптимизатора Заимствуете лучшее, коллекционируйте идеи и не откладывайте тестирование фишек в долгий ящик...

06 01 2024 10:29:21

Как начать работу с BigData — загружаем данные в Google BigQuery

Как начать работу с BigData — загружаем данные в Google BigQuery Начинаем работать с облачным сервисом хранения Google BigQuery...

05 01 2024 3:28:26

Функции вычисляемых полей Google Data Studio

Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....

04 01 2024 4:37:31

Контекстная реклама для интернет-магазина принтов на одежде в Украине — увеличение дохода на 130%

Контекстная реклама для интернет-магазина принтов на одежде в Украине — увеличение дохода на 130% История для заказчиков, которые самостоятельно запускают рекламу...

03 01 2024 17:57:16

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::