Десять идей, как благодаря JavaScript можно лучше работать с диспетчерами тегов

Если проект небольшой, то отследить и настроить эти вставки не сложно, но как быть, когда сайт, портал или мобильное приложение накопили десятки и сотни таких интеграций? На помощь приходят тег менеджеры, с которыми можно прослеживать и управлять всем этим из одного аккаунта. В очередном посте – 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);

Тернарный оператор

Представляет собой просто очень упрощенный способ написать условие. Выполнить действия в одном случае и не делать их в другом. Очень полезный элемент синтаксиса JS при работе с диспетчерами тегов, в частности, с GTM. Вместо классического if и нескольких строк кода, с чем знакомы многие еще со школы, можно написать в Custom HTML Tags:

anyFunction ? someOtherFunction() : attachResult();

Выражение до знака вопроса проверятся на true или false. Если выражение соответствует действительности, то выполнится первая функция после знака вопроса, а если нет, то та функция, которая находится после двоеточия.

return {{URL, который вы нажали}}.indexOf({{Page Hostname}}) > -1

Очень полезная в работе именно с диспетчерами тегов, наподобие GMT, возможность языка программирования. По сути, это готовый код для вставки в раздел GMT Custom JavaScript Variable. Возвращает true, если нажатый элемент с версткой содержит текущее имя хоста. Возвращает false, если нет. Попросту говоря, мы получим в GMT true, если нажатая ссылка является внутренней и false, если веб-страница уводит пользователя с сайта.

return {{Нажмите URL}}.split(‘/’).pop()

И снова простая вставка в Custom JavaScript Variable. Данный код помогает отслеживать скачивания файлов. Код возвращает реальное имя файла, который скачали. Вернется все, что следует после знака «слеш» в пути к файлу, выложенному у вас на сайте.

Создайте случайный, уникальный 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);

});

}

Вернуть отформатированный по стандартам 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);

}

Как результат, возвращается объект времени со всем: часы, минуты, секунды, временная зона и многое другое.

.matches() полифилы

Иногда при сборе аналитики приходится работать c DOM-деревом объектов, из которых состоит верстка проекта. В этом деле ключевое – найти нужные узлы и селекторы, между которыми в контенте сайта содержится то, что нам нужно. Предположим, мы хорошо понимаем, какие нам CSS-селекторы нужны, чтобы провести соответствующее маркетинговое исследование. Представим теперь, что нам нужно определенный элемент есть в числе набора селекторов, которые у нас есть. Для этой цели можно использовать Element.matches(‘укажите искомый селектор’). Однако даже с префиксами Element сработает далеко не с каждым браузером. Если сочетать c match, то это сработает в любом браузере. Альтернативные методы, помогающие запустить код в браузере в то время, как с другими он не шел, называются полифилами.

let elem = {{Элемент, на который нажимаем}};

console.log(elem.parentElement.matches('#slider'));

Подобный код лучше всего запускать в Google Tag Manager через функционал Custom HTML Tag. Так как html в порядке загрузки контейнеров поступит как можно быстрее, следовательно вероятность того, что все сработает как нужно – повышается.

Валидный 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;

}

Легко и просто установите куки в браузере

Куки прекрасная штука! Хотя и несколько устаревшая. Так как GMT работает в контексте веб-страниц, соответственно он работает как с тем, что хранится на сервере так и с тем, что присутствуют только на самих страницах. Ко вторым объектам относятся куки. Добавив в GMT пару строк кода, чтобы отслеживать перемещения самой разной информации между страницами сайта, портала или сервиса.

***

Есть ли у вас любимые приемы в GMT или других диспетчерах тегов, связанные с возможностями JavaScript? Может быть, мы что-то не упомянули? Поделитесь, пожалуйста, в комментариях?