Google Tag Manager и jQuery

21 июля, 2022

Библиотека jQuery является одной из самых популярных библиотек JavaScript, которая используется на веб-сайтах по всему миру. Диспетчер тегов Google также является самой популярной системой управления тегами, используемой на веб-сайтах во всем мире. В этой статье поговорим о взаимосвязи между ними.

Оба инструмента служат одной и той же цели - облегчению работы с JavaScript на веб-странице. Хотелось бы так же развеять миф о том, что Google Tag Manager изначально связан с jQuery, и выяснить, когда имеет смысл не использовать jQuery.

Другие материалы на эту тему:

Селекторы в jQuery

Пробовали ли вы когда-нибудь заходить в свой контейнер Google Tag Manager по ссылке, которая отображается в самом коде GTM, подставив после id= идентификатор контейнера?

https://www.googletagmanager.com/gtm.js?id={{ID контейнера GTM}}

Эта gtm.js библиотека содержит ваш контейнер GTM во всей его красе:

Фрагмент контейнера Google Tag Manager

В минимизированном обфусцированном коде JavaScript самые глазастые могут найти такую строчку:

Этот комментарий может натолкнуть вас на мысль, что Google Tag Manager объединяет полную библиотеку jQuery в контейнере JavaScript. Но это не так.

Такой комментарий в коде есть потому, что диспетчер тегов Google использует один метод, который во многом вдохновлен аналогичной функциональностью в библиотеке jQuery. Вы можете найти источник этого в проекте GitHub data-layer-helper, где содержится объяснение того, почему существует такое уведомление о лицензии (файл plain.js):

Отсылка к jQuery

Примечание: проект data-layer-helper — отличный способ познакомиться с тем, как работает уровень данных Google Tag Manager.

Скорее всего, на вашем сайте уже работает jQuery. Вы можете проверить это, открыв в браузере консоль разработчика. На вкладке Console введите следующий текст и нажмите Enter:

typeof window.jQuery !== 'undefined' ? console.log(window.jQuery.fn.jquery) : 'jQuery не найден!'

1	typeof window.jQuery !== 'undefined' ? console.log(window.jQuery.fn.jquery) : 'jQuery не найден!'

Если на вашем сайте работает jQuery, вы увидите номер версии:

Версия библиотеки jQuery

Если на вашем сайте не используется jQuery, вы увидите текст:

jQuery не найден!

Если jQuery установлен на вашем сайте, вы можете использовать его в своих пользовательских HTML-тегах и пользовательских переменных. Однако библиотека jQuery загружается (или, по крайней мере, должна) асинхронно, а это означает, что может возникнуть так называемое состояние гонки (race condition), при которой работа тегов зависит от того, в каком порядке они выполняются и срабатывают их коды.

Чаще всего это происходит тогда, когда вы пытаетесь вызвать методы/функции jQuery с помощью Google Tag Manager до фактической загрузки самой библиотеки jQuery. Таким образом, всякий раз, когда вы хотите использовать jQuery, вы должны задать определенные настройки последовательности.

По сути, если вы хотите использовать jQuery, вы всегда должны проверять, был ли он инициализирован примерно так:

if (typeof window.jQuery !== 'undefined') {
// Сделать что-нибудь при помощи jQuery
} else {
// Запасной вариант на случай, если jQuery не был загружен
}

if (typeof window.jQuery !== 'undefined') {

// Сделать что-нибудь при помощи jQuery

} else {

// Запасной вариант на случай, если jQuery не был загружен

}

Если jQuery найден, вы можете использовать его по своему усмотрению, а если он не найден, блок c else (в противном случае) является запасным вариантом, который вы будете использовать в таких случаях.

Вот пример:

function() {
var el = {{Click Element}};
if (typeof window.jQuery !== 'undefined') {
return window.jQuery(el).find('h1').text();
} else {
return el.querySelector('h1').textContent;
}
}

function() {

var el = {{Click Element}};

if (typeof window.jQuery !== 'undefined') {

return window.jQuery(el).find('h1').text();

} else {

return el.querySelector('h1').textContent;

}

Хоть код в блоке if и код в блоке else одинаковы, у jQuery есть некоторые преимущества, поскольку есть уверенность в том, что метод .text() вернет текстовое содержимое выбранного элемента независимо от типа и версии браузера.

Как правило, библиотеку jQuery подключает разработчик путем скачивания актуальной версии с официального сайта jquery.com/download, затем загрузив ее на сервер/хостинг и подключив с помощью фрагмента кода. Например, так:

Подключение библиотеки

В этом примере код библиотеки расположен на хостинге сайта в папке js и имеет версию 3.3.1. На многих популярных CMS-движках jQuery поставляется вместе со всеми нужными файлами по умолчанию.

Существует альтернативный способ подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, Yandex CDN, а также CDN, который организовали создатели jQuery.

Вот такой вам нужно добавить на сайт, используя Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery можно загрузить и через Google Tag Manager с помощью тега типа Пользовательский HTML. Но сначала лучше обсудить такую реализацию со своими разработчиками. jQuery - это дополнительный код (а это нагрузка), поэтому данная библиотека может сильно "раздуть" страницу, либо у разработчиков есть веская причина вообще не использовать jQuery. Возможно, они используют другую библиотеку с такой же функциональностью.

Лучший способ загрузить jQuery - использовать пользовательский HTML-тег в последовательности тегов с любыми имеющимися у вас тегами, которые могут потребоваться для использования jQuery. Вот так может выглядеть тег:

<script>
(function() {
var el = document.createElement('script');
el.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
el.async = true;
el.addEventListener('load', function() { window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}})});
el.addEventListener('error', function() { window.google_tag_manager[{{Container ID}}].onHtmlFailure({{HTML ID}})});
document.head.appendChild(el);
})();
</script>

(function() {

var el = document.createElement('script');

el.src = 'https://code.jquery.com/jquery-3.3.1.min.js';

el.async = true;

el.addEventListener('load', function() { window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}})});

el.addEventListener('error', function() { window.google_tag_manager[{{Container ID}}].onHtmlFailure({{HTML ID}})});

document.head.appendChild(el);

})();

</script>

В Google Tag Manager это выглядит так:

Пользовательский HTML

В этом коде есть отсылка на встроенные переменные Container ID и HTML ID, которые вам необходимо включить в своей контейнере GTM.

Переменные Container ID и HTML ID

С помощью данного кода вы создаете асинхронный запрос на загрузку библиотеки jQuery из CDN, который организовали создатели jQuery. Поскольку работа происходит асинхронно, вы также добавляете прослушиватель load, который срабатывает, когда библиотека успешно загружена, и прослушиватель error, который срабатывает, если библиотека не загружается из-за ошибки.

Решение не идеально, поскольку иногда бывает так, что библиотека загружена, но она не смогла выполниться правильно (например, если есть конфликты в глобальном пространстве имен страницы). И не всегда возникает ошибка, если библиотека не загружается.

В созданном теге откройте Расширенные настройки и в настройках активации тега задайте значение Один раз на странице:

Настройки активации тега - Один раз на страницу

Это связано с тем, что независимо от того, сколько последовательностей тегов содержится, вы хотите загрузить библиотеку jQuery только один раз на страницу.

Затем вам нужно открыть каждый тег, для которого требуется jQuery, прокрутить вниз до его дополнительных настроек и установить загрузчик jQuery в качестве тега Тег setup, то есть активировать его перед этим тегом, задав последовательность активации:

Активировать загрузчик jQuery перед тегом

Если вы хотите заблокировать запуск тега в случае, если jQuery не загружается, вы можете установить флажок Не активировать тег, если тег загрузчика jQuery не сработал или был приостановлен. Но это радикальное решение. Лучше просто запустить запасной вариант на случай, если jQuery не будет найден, как было разобрано в примере выше в конструкции if и else.

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

Некоторые рекомендации по работе Google Tag Manager и jQuery:

если сайт уже загружает библиотеку jQuery, используйте ее по желанию. Просто избегайте состояние гонки (race condition), если jQuery загружается асинхронно (как и должно быть). Если на сайте не работает jQuery, посмотрите на сложность задач, которые вы хотите выполнить;
если вам нужно только выполнить простой обход DOM или тривиальные HTTP-запросы, рассмотрите возможность использования собственного кода JavaScript, а не загрузку целой библиотеки;
если вам необходимо загрузить jQuery, используйте последнюю мини-версию (minified, уменьшенную) библиотеки. Загрузите его асинхронно и используйте последовательность тегов, чтобы убедиться, что библиотека активна до того, как она будет использована основным тегом;
если на сайте уже установлена библиотека jQuery в исходном коде, не нужно специально переносить ее в Google Tag Manager. Вы можете нарушить работу всего вашего сайта.

Перевод статьи: https://www.simoahava.com/analytics/google-tag-manager-and-jquery/

Метки: Google Tag Manager, jQuery

Google Tag Manager и jQuery

Получайте бесплатные уроки и фишки

Еще статьи