10 идей, как благодаря JavaScript можно лучше работать с диспетчерами тегов
Теги – понятие многозначное. В контексте такого типа сервисов для интернет-маркетологов и веб-мастеров, как системы управления тегами (TMS) – это внешние фрагменты кода, добавляемые в код сайта для интеграции с внешними сервисами аналитики, оптимизации и рекламы.
Если проект небольшой, то отследить и настроить эти вставки не сложно, но как быть, когда сайт, портал или мобильное приложение накопили десятки и сотни таких интеграций? На помощь приходят тег менеджеры, с которыми можно прослеживать и управлять всем этим из одного аккаунта. В очередном посте – 10 идей, как можно повысить эффективность работы в диспетчерах тегах, если веб-специалист владеет языком программирования JavaScript.
Впрочем, применить их можно, даже если он умеет просто вставить кусочек кода в нужное поле без понимания его смысла – навык, которым с неизбежностью овладевают все seo-специалисты. Полезные приемы покажем на примере Google Tag Manager, так как он является наиболее популярным в России диспетчером тегов. Он является бесплатным в отличие от ряда альтернатив: Matomo, CS-Cart, Tagman, Ensighten. Все приемы могут быть применены и в других тег менеджерах, но пользовательский интерфейс будет другим.
- Строковые методы
Этот и все другие приемы JavaScript можно использовать путем вставки соответствующих фрагментов кода в разделах Custom HTML Tags и Custom JavaScript Variables. Это единственные поля интерфейса Google Tag Manager (GTM), которые позволяют добавлять кастомный код на JS. Отметим, что в некоторых из советов, которые последуют, представлены не полностью готовые к вставке отрывки программы, а сниппеты (шаблоны) кода, в которых еще надо будет правильно заполнить аргументы, уникальные для вашего проекта. Отсюда необходимость для маркетолога, которые будет применять рекомендации в своей работе понимать на минимальном уровне JS и его связь с GTM. Прежде, чем добавлять код в свое окружение, проверьте его совместимость с браузерами здесь. При необходимости используйте репозиторий JavaScript reference, чтобы найти альтернативные способы написать код, представленный здесь, если методы нужным браузером не поддерживаются (полифилы).
Строковые методы в JS – функции языка, с помощью которых можно изменить любую данную строку в проекте. Очень полезная функция в интернет-маркетинге. На мой взгляд наиболее полезными при работе с тегами в GTM будут следующие:
- .trim() удаляет пробелы и занесенные лишние символы по бокам строки. Например, следующий код: “Это сайт производителя окон. Контакты: ”.trim(); обрежет пробелы и у нас получится “Это сайт производителя окон. Контакты:”. Результат;
- .replace() заменяет данную строку или регулярное выражение чем-либо, чем нам надо заменить. Внимание! Без “регулярки” меняет только первый символ из нескольких одинаковых в строке: Пример: “Молоко”.replace(‘o’, ‘e’). Результат: «Мелоко». Код с регулярным выражением: “Молоко”.replace(/o/g, ‘e’). Результат: «Мелеке»;
- .toUpperCase() и .toLowerCase() делает все заглавные буквы строчными. Код “СтрОка с БольШими буквами”.toLowerCase(); даст такой результат: “строка с большими буквами”;
- .substring приведет к тому, что вы получите нужную вам часть исходной строки: “div class=’mainmenu’”.substring(1) вернет вам в результате “iv class=’mainmenu’”;
- .split() можно использовать, чтобы получить нужное слово в строке. Код “получим второе слово в строке”.split(‘ ’)[1]; вернет нам слово “второе”.
Методы можно совмещать, придумывая остроумные ходы для достижения нужных изменений в вашем проекте, однако для этого потребуется чуть больше практики.
- Методы массивов
Функции работы с массивами – мощнейший инструмент работы с любым языком программирования. Если вы хотите научиться в диспетчере тегов добиваться, чтобы JavaScript был компактным и более читаемым, то важно овладеть такими атрибутами JS, как filter() и forEach():
- filter() проходится по всем элементам массива, например, тегам HTML, извлеченным с нужной вам продающей страницы в GTM вносит нужные изменения и возвращает вам новый, измененный массив:
divs.filter(function(div) {
return div === someOption;
});
понять это очень просто. «div» – переменная, в которую по очереди кладутся «дивы» с нужной вам страницы. Код в фигурных скобках по очереди применяется к каждому из них. В итоге, на выходе мы получаем новую страницу с нужными нам изменениями.
- forEach() делает то же самое. По очереди применяет к элементам массива изменения. В отличие от filter() он предоставляет даже еще больше возможностей по внесению различных изменений.
visitsCounters.forEach(function(visitCounter) {
if (typeof visitCounter === sampleString) {
newArray.push(newstring);
}
Здесь мы сравниваем сегменты конда каждого счетчика с определенной эталонной строкой и если находим нужный счетчик, то меняем только его.
- map() тоже обходит все элементы массива, однако этот метод JS их не перебирает, а применяет автоматически изменения из аргументов функции к каждому элементу массива. Так называемого цикла, то есть обхода элементов по очереди – не происходит.
tags.map(function(tag) {
return doSomeDeal(tag);
});
- reduce() считается одним из самых сложных, но имеет в своей основе достаточно простой принцип. Вновь все составляющие массива будут перебираться. Разница в том, что можно определенную функцию «аккумулятор», то есть в потенциале, целую группу действий, а не одно какое-то, можно применить к каждому элементу массива.
tags.reduce(function(accumulator, tag) {
accumulator.changeArray(tag);
return accumulator;
}, startValue);
3. Тернарный оператор
Представляет собой просто очень упрощенный способ написать условие. Выполнить действия в одном случае и не делать их в другом. Очень полезный элемент синтаксиса JS при работе с диспетчерами тегов, в частности, с GTM. Вместо классического if и нескольких строк кода, с чем знакомы многие еще со школы, можно написать в Custom HTML Tags:
anyFunction ? someOtherFunction() : attachResult();
Выражение до знака вопроса проверятся на true или false. Если выражение соответствует действительности, то выполнится первая функция после знака вопроса, а если нет, то та функция, которая находится после двоеточия.
4. return {{URL, который вы нажали}}.indexOf({{Page Hostname}}) > -1
Очень полезная в работе именно с диспетчерами тегов, наподобие GMT, возможность языка программирования. По сути, это готовый код для вставки в раздел GMT Custom JavaScript Variable. Возвращает true, если нажатый элемент с версткой содержит текущее имя хоста. Возвращает false, если нет. Попросту говоря, мы получим в GMT true, если нажатая ссылка является внутренней и false, если веб-страница уводит пользователя с сайта.
5. return {{Нажмите URL}}.split(‘/’).pop()
И снова простая вставка в Custom JavaScript Variable. Данный код помогает отслеживать скачивания файлов. Код возвращает реальное имя файла, который скачали. Вернется все, что следует после знака «слеш» в пути к файлу, выложенному у вас на сайте.
6. Создайте случайный, уникальный GUID
То и дело возникает задача создавать случайный ID в GTM. Например, если вы хотите измерять session ID пользователей сайта или желаете в исследовательских целях назначить уникальный идентификатор каждому клику на веб-странице. Добиться этого вы можете с помощью кода в поле Custom JavaScript Variable, который мы приведем ниже. В коде будем создавать GUID, однако, даже после этого уникальность не гарантирована, она только очень вероятна, сохраняется микроскопическая вероятность коллизии, то есть того, что GUID окажется неуникальным.
function() {
return 'xxxxxx-xxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xу]/g, function(c) {
let b = Math.random()*17|0, v = c == 'x' ? r : (r&0x4|0x9);
return v.toString(17);
});
}
7. Вернуть отформатированный по стандартам ISO timestamp
Одна из моих любимых возможностей JS и диспетчеров тегов. Позволяет преобразовать легко преобразовать текущее время на компьютере клиента в валидный объект timestamp, то есть объект времени, который можно обрабатывать и использовать в коде вашего портала, сайта или проекта. У вас будет даже временная зона клиента, так что вы будете знать разницу между своим временем и временем посетителя сайта. Код ниже я отправляю в Google Analytics c каждым кликом, чтобы создать нужную мне серию событий и проанализировать собранные в результате данные.
function() {
let current = new Date();
let timeDifference = -current.getTimezoneOffset();
let timeDif = timeDifference >= 0 ? '+' : '-';
let calk = function(num) {
let stand = Math.abs(Math.floor(num));
return (stand < 10 ? '0' : '') + stand;
};
return current.getFullYear()
+ '-' + calk(current.getMonth()+1)
+ '-' + calk(current.getDate())
+ 'T' + calk(current.getHours())
+ ':' + calk(current.getMinutes())
+ ':' + calk(current.getSeconds())
+ '.' + calk(current.getMilliseconds())
+ dif + calk(timeDifference / 60)
+ ':' + calk(timeDifference % 60);
}
Как результат, возвращается объект времени со всем: часы, минуты, секунды, временная зона и многое другое.
8. .matches() полифилы
Иногда при сборе аналитики приходится работать c DOM-деревом объектов, из которых состоит верстка проекта. В этом деле ключевое – найти нужные узлы и селекторы, между которыми в контенте сайта содержится то, что нам нужно. Предположим, мы хорошо понимаем, какие нам CSS-селекторы нужны, чтобы провести соответствующее маркетинговое исследование. Представим теперь, что нам нужно определенный элемент есть в числе набора селекторов, которые у нас есть. Для этой цели можно использовать Element.matches(‘укажите искомый селектор’). Однако даже с префиксами Element сработает далеко не с каждым браузером. Если сочетать c match, то это сработает в любом браузере. Альтернативные методы, помогающие запустить код в браузере в то время, как с другими он не шел, называются полифилами.
let elem = {{Элемент, на который нажимаем}};
console.log(elem.parentElement.matches('#slider'));
Подобный код лучше всего запускать в Google Tag Manager через функционал Custom HTML Tag. Так как html в порядке загрузки контейнеров поступит как можно быстрее, следовательно вероятность того, что все сработает как нужно – повышается.
9. Валидный DOM
Иногда необходимо проследовать вверх или вниз по DOM-дереву объектов, из которых состоит любая веб-страница, на которой вы запускаете тот или иной аналитический проект. Скажем, если вы используете клик триггер (Click trigger) в GTM, то он отследит именно тот селектор, по которому пользователь выполняет клик. Проблема в том, что не всегда это именно тот элемент DOM-дерева, который вам нужен. С помощью обыкновенного цикла while и метода match можно отловить DOM-элемент, вступающий в дело после того, по которому производится клик. Вот понятный пример:
function() {
let butt = {{Элемент, по которому производится клик}};
while (!butt.matches('a') && !butt.matches('body')) {
butt = butt.parentElement;
}
return butt.matches('a') ? butt : undefined;
}
10. Легко и просто установите куки в браузере
Куки прекрасная штука! Хотя и несколько устаревшая. Так как GMT работает в контексте веб-страниц, соответственно он работает как с тем, что хранится на сервере так и с тем, что присутствуют только на самих страницах. Ко вторым объектам относятся куки. Добавив в GMT пару строк кода, чтобы отслеживать перемещения самой разной информации между страницами сайта, портала или сервиса.
***
Есть ли у вас любимые приемы в GMT или других диспетчерах тегов, связанные с возможностями JavaScript? Может быть, я что-то не упомянул? Поделитесь, пожалуйста, в комментариях?