10 Полезных Пользовательских JavaScript Уловок

Предлагаю Вашему вниманию некоторые полезные советы и хитрости на JavaScript, которые Вы можете использовать, чтобы сделать ваш Диспетчер тегов Google ещё более эффективным.

Вы можете использовать эти примеры в пользовательских HTML тегах и пользовательских JavaScript переменных, так как это единственные места в GTM, где можно выполнить произвольный JavaScript код.

Обратите внимание, что некоторые уловки просто фрагменты кода, так что вам будет достаточно Диспетчера тегов Google и javascript чтобы обеспечить их успешное развертывание.

Перед добавлением любого из этих развертываний, не забывайте использовать caniuse.com чтобы проверить совместимость браузера, и MDN справочнике по JavaScript найти альтернативные способы (AKA polyfills) для написания неподдерживаемых методов.

10 Полезных Пользовательских JavaScript Уловок

  1. String метод
  2. Array метод
  3. Ternary operator
  4. return {{Click URL}}.indexOf({{Page Hostname}}) > -1
  5. return {{Click URL}}.split(‘/’).pop()
  6. Create a random, unique GUID
  7. Return an ISO-formatted timestamp
  8. .matches() polyfill
  9. DOM traversal
  10. Set browser cookies with ease
  11. Summary

1.String метод

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

Естественно, вы можете комбинировать это своими способами. Например, чтобы сделать заглавной первую букву в любую строку, вы могли бы сделать это:

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

2. Array метод

Array методы являются очень мощным инструментом для любого языка программирования. Освоение методов, таких как filter() и forEach() очень важно, если Вы хотите, чтобы Ваш JavaScript был более компактный и читабельным.

filter()

filter() проходит через каждый элемент массива и возвращает новый массив для каждого элемента, который проходит проверку в обратный вызов. Вот синтаксис:

Так eachItem-это переменная, где итератор хранит каждый элемент массива, как это обрабатывается. Если она возвращает True, это означает, что элемент будет добавлен к возврату, новый массив.

Вот пример:

Итератор проверяет каждый элемент на наличие, и возвращает True, если свойство имеет значение addMe! Таким образом возвращенный массив содержит только те элементы, которые имеют пару ключ-значение «событие» : «addMe!».

forEach()

forEach() получает каждый элемент в массиве по одному, а затем вы можете делать все, что вы хотите с ним. Синтаксис очень прост и интуитивно понятен.

Как вы можете видеть, это более читабельный вариант, чем цикл for, так как вам не придется открывать исходный массив в итераторе.

map()

map() выполняется для каждого элемента в массиве, но на этот раз код в функции обратного вызова выполняется в отношении каждого члена массива и новый массив с результатами возвращается. Вот как его настроить:

Другими словами, Вы отображаете каждый элемент в массиве против результата функции обратного вызова. Вот несколько примеров:

reduce()

Метод reduce() часто является наиболее сложным, но на самом деле, имеет очень простой принцип. Основная структура выглядит так:

Вот есть ещё один пример:

 

3. Ternary operator

Вот пример:

Таким образом, тернарный оператор используется для объединения в том случае, если это простое выражение. Сначала вам дают выражение, принимающее значение истина или ложь значение, например, me.name() === «analytic». Затем нужно ввести вопросительный знак, после которого вы напишите выражение, которое выполняется, если первый Элемент является True. Наконец, Вы набираете двоеточие :, после чего вы вводите выражение, которое выполняется, если первый элемент принимает значение ложь.

4. return {{Click URL}}.indexOf({{Page Hostname}}) > -1

Это простая пользовательская JavaScript-переменная, которая возвращает True, если при нажатии ссылки URL-адрес элемента содержит текущее имя страницы, и false в противном случае. Другими словами, она возвращает True, если нажата ссылка внутренняя, и false, если пользователь уходит из сайта.

5. return {{Click URL}}.split(‘/’).pop()

Ещё одна простая пользовательская JavaScript переменная. Это особенно полезно при отслеживании загрузки файла, так как он возвращает фактическое Имя файла загруженного объекта. Он делает это, возвращая все в URL-адрес после последнего ‘/’.

6. Create a random, unique GUID

Данный пункт будет полезен, если Вам нужно создать случайный ID в GTM. Например, если вы хотите измерить идентификаторы сеансов, или если вы хотите присвоить уникальный идентификатор для каждой страницы при хитах, вы можете добиться этого с помощью следующей переменной пользовательского JavaScript.

Переменная создает идентификатор GUID (“Глобальный уникальный идентификатор”). Есть только малая вероятность совпадения.

7. Return an ISO-formatted timestamp

Это одно из моих любимых решений, так как оно позволяет преобразовать текущее время клиента на timestamp. Кроме того, оно включает смещение часового пояса, поэтому Вы будете знать, сколько местных пользователей раз отличаться от Вашего собственного часового пояса. Я посылаю это в Google Analytics с каждым хитом, так что я могу создать хронологию событий при анализе данных.

 

8. .matches() polyfill

При работе с объектной моделью документа (dom), возможность определения элементов имеет решающее значение. Мы уже имеем в нашем распоряжении много CSS-селекторов, но сейчас нам просто нужен способ который мы можем использовать, чтобы проверить, если любой элемент соответствует одному из этих селекторов.

Вот как этот метод работает в общем:

Нужно добавить напрямую в сайт или с помощью Google Tag Manager во время загрузки страницы.
В GTM, вам понадобится пользовательский HTML тег, который как можно раньше активировать в последовательности контейнером (т. е. тригер — «Все страницы», высокий приоритет).
Вот код, который нужно добавить в пользовательский тег HTML.

Полифилл изменяет реальный прототип объекта элемента, который все HTML и dom-элементы наследуют от него. После изменения прототипа,  вы можете использовать matches() метод с уверенностью во всех ваших GTM.

9. DOM traversal

У многих есть HTML-структура, подобная этой:

Теперь, если вы используете триггера Click / All Elements, элемент, который фиксируется на клику-это <span/>. Но я предполагаю, что вы на самом деле хотите использовать <а href=»takemeaway.html»> элемент, поскольку вы больше заинтересованы в нём зная, что произойдет после клика. Таким образом, Вы можете использовать эту пользовательскую JavaScript переменную, чтобы вернуть ближайшей ссылке выше выбранного элемента в дереве dom:

Внимание! Это для matches() метода, так что не забудьте реализовать полифилл сверху, первым!

Эта пользовательская переменная JavaScript поднимается в DOM, пока она не достигнет первого элемента ссылки, которые она находит («а»), после чего она возвращает этот элемент. Если она не найдет ссылку, она возвращает undefined.

10. Set browser cookies with ease

Cookies-это хороший, хотя и несколько устаревший, способ хранения информации в браузере. С помощью диспетчера тегов Google работает в контексте веб-страницы. Таким образом, любая информация, которую вы хотите сохранить с одной страницы при повторном заходе, должны храниться либо на сервере или в самом браузере. Последнее гораздо легче сделать, это просто вопрос добавления нескольких строк кода до развертывания GTM.

Во-первых, необходимо создать пользовательскую переменную JavaScript. Вы можете назвать её {{Set Cookie}}, например.

Эта переменная JavaScript возвращает функцию, которая принимает пять параметров:

  • name (required): the name of the cookie (string)
  • value (required): the value of the cookie (string)
  • ms: expiration time of the cookie in milliseconds. If unset, defaults to a Session cookie (expires when the browser is closed).
  • path: the path of the cookie. If unset, defaults to the current page path.
  • domain: the domain of the cookie. If unset, defaults to the current domain.

Используя куки, вы вызываете их с:

Приведенный выше код, при запуске в GTM, устанавливает файл cookie с именем «Test», значение «True», время истечения десяти секунд, и он установлен из корневого домена analytictracking.in.
Помните, что потом вы можете использовать удобные 1st Party Cookie  в GTM для извлечения значений из набора куки.

Резюмируя

Здесь я перечислил 10 JavaScript уловок, которые я использую (почти) все время. Есть еще много JavaScript примеров, но с этими методами вы можете начать расширять возможности вашего Google Tag Manager.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *