Прочее аналитика

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

/

https://osipenkov.ru/transfer-utm-gtm/

Решение, которое позволяет осуществить перенос параметров utm_меток с одной страницы на другую с помощью Google Tag Manager.

Эта статья — адаптация для русскоязычного сообщества интернет-маркетологов, содержащая главные выжимки двух публикаций Julius Fedorovicius, автора блога analyticsmania.com. Рекомендую к прочтению оригиналы на английском языке, так как я какие-то моменты (не самые важные) буду опускать:

Что такое перенос параметров 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 и вставьте в него следующий код:

1234567891011121314151617181920212223242526272829303132333435363738394041424344<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 которых содержит #.

12345678910111213141516171819202122232425262728293031323334<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_метках.

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