Перенос параметров UTM с одной страницы на другую

Маруся

Администратор
Команда форума
Регистрация
21 Окт 2020
Сообщения
137
Решение, которое позволяет осуществить перенос параметров utm_меток с одной страницы на другую с помощью Google Tag Manager.
Эта статья - адаптация для русскоязычного сообщества интернет-маркетологов, содержащая главные выжимки двух публикаций Julius Fedorovicius, автора блога analyticsmania.com. Рекомендую к прочтению оригиналы на английском языке, так как я какие-то моменты (не самые важные) буду опускать:
Что такое перенос параметров UTM с одной страницы на другую? Лучше всего это продемонстрировать с помощью нескольких примеров.

Пример №1
Представьте, что вы запустили рекламные кампании и ведете трафик на общую страницу сайта с utm_меткой (допустим, all.site.ru/?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting), на которой есть возможность перехода на другие страницы с выбором конкретного товара или услуги. Например, вот так выглядит общая страница с различными направлениями театральной студии для детей:

Перенос параметров UTM с одной страницы на другую
Общая страница с несколькими направлениями

Пользователь по клику на кнопку Подробнее переходит на другую страницу, на которой детально описана информация о конкретном направлении. Причем счетчики веб-аналитики могут быть установлены разные на странице входа и на той, куда переходит пользователь дальше. И тогда клик, который совершает пользователь по кнопке (допустим, на teatr.site.ru), будет запускать новый сеанс и переопределять источник трафика. Пользователь после перехода на страницу с конкретным направлением оставляет заявку. Это ситуация приводит к тому, что данные по utm_меткам теряют смысл, поскольку в отчетах Google Analytics напротив достигнутой цели (конверсии) будет указан источник не с параметрами UTM, а реферальный трафик / referral.

Перенос параметров UTM с одной страницы на другую
Реферальный трафик в отчете Google Analytics

С этой проблемой можно попробовать побороться с помощью междоменного отслеживания, когда переход с одного сайта на другой с разными установленными счетчиками будет считаться как 1 сеанс и 1 пользователь (Client ID), а можно использовать решение, описанное ниже.

Пример №2
Предположим, вы рекламируете страницу (допустим, site.ru/?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting), на которой можно нажать на кнопку и перейти в App Store и Google Play, чтобы установить мобильное приложение компании.

Перенос параметров UTM с одной страницы на другую
Переход по кнопкам на установку мобильных приложений

Разумеется, эти кнопки ведут на домены магазины приложений - apps.apple.com и play.google.com. Когда пользователь нажмет на одну из кнопок, чтобы перейти и скачать приложение, источник трафика для мобильной аналитики будет переопределен и отследить факт установки с конкретной utm_метки не получится. Параметры UTM просто потеряются и в аналитике мобильного приложения сама установка приложения будет засчитана просто как переход с домена вашего сайта (Referrer).

В этом примере междоменное отслеживание настроить нельзя, поскольку у вас нет доступа к счетчику веб-аналитики на стороне магазина приложений Apple и Google. Но есть очень классное решение, описанное на сайте у Julius Fedorovicius. Оно позволяет автоматически добавлять любые параметры запроса (не только UTM) ко всем ссылкам, которые перенаправляют пользователей на домены, отличные от вашего.

Для этого перейдите в Google Tag Manager и создайте тег типа Пользовательский HTML и вставьте в него следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>
(function() {
var domainsToDecorate = [
'domain1.com', // добавьте или удалите домены (без https и косой черты в конце)
'domain2.net'
],
queryParams = [
'utm_medium', // добавьте или удалите параметры запроса, которые вы хотите передать
'utm_source',
'utm_campaign',
'something_else'
]
// не редактируйте ничего ниже этой строки
var links = document.querySelectorAll('a');

// проверяем, содержат ли ссылки домен из массива domainsToDecorate, а затем оформляем ссылку (link decoration)
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
links[linkIndex].href = decorateUrl(links[linkIndex].href);
}
}
}
// оформление ссылки параметрами запроса
function decorateUrl(urlToDecorate) {
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
return urlToDecorate + collectedQueryParams.join('&');
}

// позаимствовано с https://stackoverflow.com/questions/831030/
// функция, которая получает значение параметра запроса
function getQueryParam(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
return decodeURIComponent(name[1]);
}

})();
</script>
Принцип работы скрипта следующий:
  • посетитель сайта переходит на сайт по ссылке с utm_меткой. Например:
  • просмотрев информацию, он кликает по кнопке мобильного приложения и переходит в App Store для установки. Она имеет ссылку без utm_метки. Например:
  • если в скрипте прописан домен itunes.apple.com, то к ссылке App Store автоматически добавится хвост с параметрами запроса (которые вы указали) и ссылка примет вид
Сам Julius заверяет, что решение работает не в 100% случаев. Бывают ситуации, когда скрипт может работать некорректно:
  • если ссылки, в которые вы автоматически хотите добавлять параметры запроса, содержат #;
  • если ссылки, в которые вы автоматически хотите добавлять параметры запроса, уже содержат такие параметры запроса. В этом случае они не будут заменены, а просто дополнительно добавятся к URL-адресу, и вы получите повторяющиеся параметры;
В скрипте, который вы вставляете в Google Tag Manager, в domainsToDecorate необходимо указать домены (со строки 4), к которым вы хотите добавить параметры запроса. Можно указать 1 домен, можно 2,3,4 и т.д. Если вы хотите быть более конкретным и оформить только некоторые ссылки, вы можете ввести домен с конкретной страницей, например site.ru/page.

В качестве примера я добавлю домен Julius (analyticsmania.com), чтобы продемонстрировать переход с сохранением utm_метки:
Перенос параметров UTM с одной страницы на другую
Добавление доменов в domainsToDecorate

Затем вы должны отредактировать список параметров запроса, которые вы хотите взять из url-адреса страницы, и перенести их на определенные исходящие ссылки. Как правило, интернет-маркетологи передают все 5 переменных UTM в ссылке. Поэтому в queryParams добавьте utm_source, utm_medium, utm_campaign, utm_term и utm_content:

Перенос параметров UTM с одной страницы на другую
Добавление параметров запроса в queryParams

Примечание:
  • вы можете передавать любой параметр в URL, а не только UTM;
  • все параметры, которые вы ввели в массиве queryParams, необязательны должны присутствовать в ссылке. Если URL страницы не содержит, например, utm_campaign, скрипт все равно отработает как надо;
  • UTM также могут содержать знак "+". Он будет передан нормально и не будет закодирован в %20 . Актуально для ссылок, в которых может передаваться ключевое слово с модификатором широкого соответствия.
Осталось указать условие активации (триггер) для данного тега. Вам не нужно активировать этот пользовательский HTML тег на каждой странице. Вы можете активировать его только тогда, когда URL-адрес содержит хотя бы один из тех параметров запроса, которые вы хотите передать.
Создайте триггер типа Модель DOM готова с условием Page URL соответствует регулярному выражению (без учета регистра) utm_source=|utm_medium=|utm_campaign=|utm_term=|utm_content=
Перенос параметров UTM с одной страницы на другую
Триггер активации

Можно задать условие по-другому: Page URL соответствует регулярному выражению (без учета регистра) utm_(source|medium|campaign|term|content)=
Сохраните этот триггер и добавьте его в тег. Теперь осталось протестировать работу скрипта. Сделать это можно с помощью режима предварительного просмотра. Перейдите на свой сайт хотя бы с одним параметром запроса, определенным в скрипте. В моем примере - это ссылка со всеми параметрами UTM: Убедитесь, что тег был активирован.

Перенос параметров UTM с одной страницы на другую
Активация тега

Затем кликните по ссылке, которая содержит домен, добавленный в скрипте тега GTM. В моем примере это был analyticsmania.com.
Перенос параметров UTM с одной страницы на другую
Переданные параметры UTM для домена analyticsmania.com

В ней должны отобразиться все те же параметры, что и в исходной ссылке. Также не забудьте протестировать ситуацию без параметров запроса. В этом случае тег не должен быть активирован и ничего не должно быть добавлено к ссылкам. И случай, когда вы переходите по какому-нибудь другому домену, который не был прописан в скрипте в domainsToDecorate. Параметры запроса также не должны быть добавлены к ссылке.

У Julius в блоге есть второй вариант скрипта, который он рекомендует использовать, если вышеописанный способ не подошел для ссылок, URL которых содержит #.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
(function() {
var utmInheritingDomains = [
"externaldomain1.com", // добавьте или удалите домены (без https и косой черты в конце)
"externaldomain2.com"
],
utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi,
links = document.getElementsByTagName("a"),
utms = [
"utm_medium={{utm_medium}}", // Создайте пользовательские переменные URL для utm_меток
"utm_source={{utm_source}}",
"utm_campaign={{utm_campaign}}",
"utm_term={{utm_term}}",
"utm_content={{utm_content}}"
];
for (var index2 = 0; index2 < links.length; index2 += 1) {
for (var index = 0; index < links.length; index += 1) {
var tempLink = links[index].href,
tempParts;
if (tempLink.indexOf(utmInheritingDomains[index2]) > 0) { // Скрипт ищет все ссылки с доменнами, указанными в utmInheritingDomains
tempLink = tempLink.replace(utmRegExp, "");
tempParts = tempLink.split("#");
if (tempParts[0].indexOf("?") < 0 ) {
tempParts[0] += "?" + utms.join("&"); // Скрипт добавляет параметры UTM ко всем ссылкам с указанным вами доменом
} else {
tempParts[0] += "&" + utms.join("&");
}
tempLink = tempParts.join("#");
}
links[index].href = tempLink;
}
}
}());
</script>

Создайте пользовательские переменные типа URL с типом компоненты Запрос для каждой utm_метки:

Перенос параметров UTM с одной страницы на другую
Переменные URL для каждой utm_метки

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

Перенос параметров UTM с одной страницы на другую
Подставьте свои переменные UTM

Теперь необходимо создать триггер активации, который запускался бы только тогда, когда все 5 переменных UTM содержат что-то, а не undefined. Создайте триггер типа Модель DOM готова с условиями для каждой метки не равно undefined.
Перенос параметров UTM с одной страницы на другую
Условия активации триггера

Сохраните триггер и добавьте его к тегу. Опубликуйте изменения.

Примечание: в utm_метках иногда могут передаваться значения со знаком "+". Некоторые браузеры (например, Google Chrome) автоматически заменяют его на %20 (закодированное пустое пространство). Данный скрипт будет подставлять вместо "+" эти символы. Так что единственный совет, который Julius дает для этого решения - стараться не использовать знак "+" в utm_метках.

Источник
 
Сверху