Извлечение части URL из ссылки с помощью GTM
Небольшая заметка о том, как можно извлекать определенную часть URL из ссылки для передачи этой информации в инструменты веб-аналитики.
Например, нам необходимо извлечь номер заказа из ссылки вида mysite.ru/order/5e9764cc42c65/success
Задачу усложняет то, что ID транзакции находится не в конце URL-пути, а посередине, а также не имеет вид пары ключ=значение
. В последнем случае мы могли воспользоваться пользовательской переменной типа URL и типом компонента Запрос, присвоив ей ключ запроса. Подробнее об этом я писал в этом материале.
Но поскольку у нас этого нет, придется использовать другой способ. Для этого в Google Tag Manager создайте переменную типа Собственный код JavaScript и добавьте в него следующий код:
1 2 3 4 |
function () { var url = {{Page Path}}.substr(7, 13); return url; } |
В GTM это выглядит так:
Эта простая функция, которая состоит из:
function ()
- объявление функции;
var url = {{Page Path}}.substr(7,13)
- объявление переменной url, которой присваивается наше конечное значение части URL.
Page Path - переменная возвращает путь в текущем URL без учета GET-параметров, то есть всего того, что идет в URL после знака вопроса «?» и «&» между параметрами. Например, на странице https://osipenkov.ru/analytics/?utm_source=yandex&utm_medium=cpc&utm_campaign=first в GTM данная переменная вернет значение /analytics
substr(7,13)
- метод возвращает указанное количество символов из строки, начиная с указанной позиции. Цифры 7 и 13 означают, что отсчет начинается с 8 символа (игнорируются первые 7 из ссылки /order/5e9764cc42c65/success и извлекаются 13, то есть то количество символов, которое у нас в заказе).
Подробнее о методе читайте в документации Mozilla.
return url
- возвращает результат;
В результате мы получаем необходимое значение в переменной (режим предварительного просмотра):
Если у вас этот путь по символам не изменяется, то вы можете использовать эту конструкцию. В противном случае можно использовать другой, но все в той же переменной типа Собственный код JavaScript:
1 2 3 4 |
function () { var url = {{Page Path}}.split('/')[2]; return url; } |
В Google Tag Manager это выглядит так:
В этом варианте мы используем очень похожую конструкцию, за исключением метода. Метод split( ) используется для строк, чтобы разделить ее на подстроку. В нашем случае мы задаем знак /
как разделитель (separator), а в квадратных скобках указываем элемент по счету, который хотим извлечь. Для ссылки в моем примере - это 2 (mysite.ru/[1]order/[2]5e9764cc42c65/[3]success).
Чтобы убедиться, что два варианта кода дают одинаковый результат, воспользуемся режим отладки:
Также можно получать доступ к текущему URL по частям с помощью объекта window.location (BOM, Browser Object Model). Для этого в GTM необходимо использовать переменную типа Переменная JavaScript.
Некоторые примеры:
- window.location.href возвращает ссылку (URL) текущей страницы;
- window.location.hostname возвращает доменное имя веб-хоста;
- window.location.pathname возвращает путь и имя файла текущей страницы;
- window.location.protocol возвращает использованный веб-протокол (http: или https:).
В Google Tag Manager одна из переменных выглядит так:
Объект window.location может записываться без префикса window. Например, для ссылки http://techniqa.ru/order/5e9764cc42c65/success переменные в GTM вернут следующие значения: