Перенос параметров UTM с одной страницы на другую
Решение, которое позволяет осуществить перенос параметров utm_меток с одной страницы на другую с помощью Google Tag Manager.
Эта статья - адаптация для русскоязычного сообщества интернет-маркетологов, содержащая главные выжимки двух публикаций Julius Fedorovicius, автора блога analyticsmania.com. Рекомендую к прочтению оригиналы на английском языке, так как я какие-то моменты (не самые важные) буду опускать:
- Transfer UTMs From One Page To Another with GTM (older version)
- Transfer UTM Parameters From One Page To Another with GTM
Что такое перенос параметров UTM с одной страницы на другую? Лучше всего это продемонстрировать с помощью нескольких примеров.
Пример №1
Представьте, что вы запустили рекламные кампании и ведете трафик на общую страницу сайта с utm_меткой (допустим, all.site.ru/?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting), на которой есть возможность перехода на другие страницы с выбором конкретного товара или услуги. Например, вот так выглядит общая страница с различными направлениями театральной студии для детей:
Общая страница с несколькими направлениями
Пользователь по клику на кнопку Подробнее переходит на другую страницу, на которой детально описана информация о конкретном направлении. Причем счетчики веб-аналитики могут быть установлены разные на странице входа и на той, куда переходит пользователь дальше. И тогда клик, который совершает пользователь по кнопке (допустим, на teatr.site.ru), будет запускать новый сеанс и переопределять источник трафика. Пользователь после перехода на страницу с конкретным направлением оставляет заявку. Это ситуация приводит к тому, что данные по utm_меткам теряют смысл, поскольку в отчетах Google Analytics напротив достигнутой цели (конверсии) будет указан источник не с параметрами UTM, а реферальный трафик / referral.
Реферальный трафик в отчете Google Analytics
С этой проблемой можно попробовать побороться с помощью междоменного отслеживания, когда переход с одного сайта на другой с разными установленными счетчиками будет считаться как 1 сеанс и 1 пользователь (Client ID), а можно использовать решение, описанное ниже.
Пример №2
Предположим, вы рекламируете страницу (допустим, site.ru/?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting), на которой можно нажать на кнопку и перейти в App Store и Google Play, чтобы установить мобильное приложение компании.
Переход по кнопкам на установку мобильных приложений
Разумеется, эти кнопки ведут на домены магазины приложений - 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_меткой. Например: https://site.ru/?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting
- просмотрев информацию, он кликает по кнопке мобильного приложения и переходит в App Store для установки. Она имеет ссылку без utm_метки. Например: https://apps.apple.com/ru/app/мое-приложение/id1503133294
- если в скрипте прописан домен itunes.apple.com, то к ссылке App Store автоматически добавится хвост с параметрами запроса (которые вы указали) и ссылка примет вид https://apps.apple.com/ru/app/мое-приложение/id1503133294?utm_source=yandex&utm_medium=cpc&utm_campaign=retargeting
Сам Julius заверяет, что решение работает не в 100% случаев. Бывают ситуации, когда скрипт может работать некорректно:
- если ссылки, в которые вы автоматически хотите добавлять параметры запроса, содержат #;
- если ссылки, в которые вы автоматически хотите добавлять параметры запроса, уже содержат такие параметры запроса. В этом случае они не будут заменены, а просто дополнительно добавятся к URL-адресу, и вы получите повторяющиеся параметры;
В скрипте, который вы вставляете в Google Tag Manager, в domainsToDecorate необходимо указать домены (со строки 4), к которым вы хотите добавить параметры запроса. Можно указать 1 домен, можно 2,3,4 и т.д. Если вы хотите быть более конкретным и оформить только некоторые ссылки, вы можете ввести домен с конкретной страницей, например site.ru/page.
В качестве примера я добавлю домен Julius (analyticsmania.com), чтобы продемонстрировать переход с сохранением utm_метки:
Добавление доменов в domainsToDecorate
Затем вы должны отредактировать список параметров запроса, которые вы хотите взять из url-адреса страницы, и перенести их на определенные исходящие ссылки. Как правило, интернет-маркетологи передают все 5 переменных UTM в ссылке. Поэтому в queryParams добавьте utm_source, utm_medium, utm_campaign, utm_term и utm_content:
Добавление параметров запроса в queryParams
Примечание:
- вы можете передавать любой параметр в URL, а не только UTM;
- все параметры, которые вы ввели в массиве queryParams, необязательны должны присутствовать в ссылке. Если URL страницы не содержит, например, utm_campaign, скрипт все равно отработает как надо;
- UTM также могут содержать знак "+". Он будет передан нормально и не будет закодирован в %20 . Актуально для ссылок, в которых может передаваться ключевое слово с модификатором широкого соответствия.
Осталось указать условие активации (триггер) для данного тега. Вам не нужно активировать этот пользовательский HTML тег на каждой странице. Вы можете активировать его только тогда, когда URL-адрес содержит хотя бы один из тех параметров запроса, которые вы хотите передать.
Создайте триггер типа Модель DOM готова с условием Page URL соответствует регулярному выражению (без учета регистра) utm_source=|utm_medium=|utm_campaign=|utm_term=|utm_content=
Триггер активации
Можно задать условие по-другому: Page URL соответствует регулярному выражению (без учета регистра) utm_(source|medium|campaign|term|content)=
Сохраните этот триггер и добавьте его в тег. Теперь осталось протестировать работу скрипта. Сделать это можно с помощью режима предварительного просмотра. Перейдите на свой сайт хотя бы с одним параметром запроса, определенным в скрипте. В моем примере - это ссылка со всеми параметрами UTM: https://osipenkov.ru/count-pageviews-gtm/?utm_source=yakov&utm_medium=test&utm_campaign=thank&utm_content=article&utm_term=key
Убедитесь, что тег был активирован.
Активация тега
Затем кликните по ссылке, которая содержит домен, добавленный в скрипте тега GTM. В моем примере это был analyticsmania.com.
Переданные параметры 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_метки:
Переменные URL для каждой utm_метки
Назовите каждую переменную своим именем. Сохраните изменения. В самом скрипте в блоке, где в массиве utms определяются переменные параметров запроса, в фигурных скобках должны быть динамически подставлены значения созданных переменных.
Подставьте свои переменные UTM
Теперь необходимо создать триггер активации, который запускался бы только тогда, когда все 5 переменных UTM содержат что-то, а не undefined. Создайте триггер типа Модель DOM готова с условиями для каждой метки не равно undefined.
Условия активации триггера
Сохраните триггер и добавьте его к тегу. Опубликуйте изменения.
Примечание: в utm_метках иногда могут передаваться значения со знаком "+". Некоторые браузеры (например, Google Chrome) автоматически заменяют его на %20 (закодированное пустое пространство). Данный скрипт будет подставлять вместо "+" эти символы. Так что единственный совет, который Julius дает для этого решения - стараться не использовать знак "+" в utm_метках.
