Как перенести utm-параметры с одной страницы на другую через Google Tag Manager

Представьте: вы ведёте кампанию, которая привлекает трафик на определённую целевую страницу (например, page.ru). А когда пользователи нажимают на кнопку с призывом к действию (он же CTA, например, «Получить скидку»), их перекидывает на другую страницу (page2.ru), на которой посетители должны выполнить целевое действие: установить приложение, заполнить форму, зарегистрироваться или что-то другое.

Когда конверсия произошла, в Google Analytics появляется событие. Но, вот незадача, когда вы посмотрите отчёт, вы увидите, что все конверсии относятся к лендингу, на который пользователь зашёл первым. Технически это правильно, потому что на page2.ru он попал через page.ru. Но всё-таки намного полезнее было бы смотреть на первоисточник, который привёл посетителя, не так ли? Чтобы сделать отчёты объективнее, вам нужно научиться переносить utm-параметры с оригинальной страницы на последующую (у нас это page2.ru). Как это сделать, если нельзя поставить междоменное отслеживание – мы и расскажем в этой статье.

Проблема

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

Допустим, вы продвигаете приложение, которое доступно в App Store и Google Play. Назовём его Lorem Appsum. Что на одной площадке, что на другой, вам дают не так много места для описания всех фич и преимуществ приложения. Поэтому вы решаете создать отдельный лендинг с этой информацией, на который вы будете направлять трафик.

Читайте также: Вы же хороший вебмастер, поэтому все входящие ссылки маркируете utm-параметрами, правда?

Итак, у вас есть страница в магазине приложений и отдельный лендинг с ключевыми элементами для продаж (описание, медиа, CTA и др.) Путь среднего пользователя будет выглядеть так:

В случае с приложениями, настроить междоменное отслеживание вы не можете – ни Apple, ни Google вам этого не дадут. А utm-параметры теряются сразу, как посетитель уходит со страницы loremappsum.com на appstore.com или play.google.com. Это проблема. 

Решение

Можно настроить передачу utm-параметров с loremappsum.com и автоматическое добавление их ко всем ссылкам, которые перенаправляют пользователей на appstore.com/loremappsum. Для этого существует пользовательский скрипт, который можно добавить в Google Tag Manager:

<script type="text/javascript">

 (function() {

 var utmInheritingDomain = "appstore.com", // ЗАМЕНИТЕ АДРЕС НА ВАШ  

 utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi,

 links = document.getElementsByTagName("a"), 

 utms = [

 "utm_medium={{URL - utm_medium}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР MEDIUM В GOOGLE TAG MANAGER 

 "utm_source={{URL - utm_source}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР SOURCE B GTM 

 "utm_campaign={{URL - utm_campaign}}" // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР CAMPAIGN B GTM 
 ];

for (var index = 0; index < links.length; index += 

 { 

 var tempLink = links[index].href, 

 tempParts;

 if (tempLink.indexOf(utmInheritingDomain) > 0) { // СКРИПТ БУДЕТ ИСКАТЬ ВСЕ URL C ТЕМ, ЧТО ВЫ ПРОПИШЕТЕ В UTMINHERITINGDOMAIN, ТО ЕСТЬ АДРЕС ВТОРОЙ СТРАНИЦЫ

tempLink = tempLink.replace(utmRegExp, ""); 

 tempParts = tempLink.split("#"); 

 if (tempParts[0].indexOf("?") < 0 ) { 
 tempParts[0] += "?" + utms.join("&"); // СКРИПТ ДОБАВИТ МЕТКИ КО ВСЕМ ССЫЛКАМ НА ТОТ ДОМЕН, ЧТО ВЫ ВЫБРАЛИ 

 } else { 

 tempParts[0] += "&" + utms.join("&"); 

 } 

 tempLink = tempParts.join("#");

 } 

 links[index].href = tempLink; 

 } 

 }()); 

</script>

Скрипт запустится, как только посетитель зайдёт на loremappsum.com по ссылке с utm-метками. Он просканирует всю страницу и найдёт ссылки, которые содержат домен конечной целевой страницы, в нашем случае appstore.com.

Если скрипт увидит ссылку, он:

• Извлечёт все 3 utm-параметра из адресной строки браузера.
• Добавит их к найденной ссылке.

Всё просто. Поэтому вместо appstore.com/loremappsum все ссылки на loremappsum.com будут автоматически изменены на что-то типа appstore.com/loremapsum?utm_medium=referral&utm_source=promo&utm_campain=blackfriday2020. И путь пользователя будет выглядеть так: 

Как подготовить базу для этого решения?

В скрипте мы видели места для конкретных меток: utm_medium, utm_source, utm_campaign. Логичный первый шаг – создать эти метки в Google Tag Manager, через вкладку «Переменные», чтобы потом было что добавлять в настройки. Учтите, что здесь регистр имеет значение. Если вы привыкли писать метки с большой буквы, эта большая буква должна быть и в сценарии, и в GTM. 

Следующий шаг – создание триггера. Нам нужно, чтобы скрипт запускался только тогда, когда все три utm-метки заполнены, то есть содержат какие-то значения. Также заранее нужно загрузить DOM – объектную модель документа, чтобы можно было выполнить нужные манипуляции. Для этого создайте ещё одну переменную Google Tag Manager и добавьте элемент DOM.

А теперь перейдём во вкладку «Триггеры» и создадим нужный нам.

В настройках указываем, что нам нужны только некоторые параметры. А конкретно – чтобы utm-параметры campaign, medium и source были определены. 

Когда триггер готов, можно на его основе создать тег. В HTML прописываем тот же сценарий, который мы упомянули раньше: 

<script type="text/javascript"> 

 (function() { 

 var utmInheritingDomain = "appstore.com", // ЗАМЕНИТЕ АДРЕС НА ВАШ  

 utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi, 

 links = document.getElementsByTagName("a"), 

 utms = [ 

 "utm_medium={{URL - utm_medium}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР MEDIUM В GOOGLE TAG MANAGER 

 "utm_source={{URL - utm_source}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР SOURCE B GTM 

 "utm_campaign={{URL - utm_campaign}}" // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР CAMPAIGN B GTM 

 ]; 

 for (var index = 0; index < links.length; index += 1) { 

 var tempLink = links[index].href, 

 tempParts; 

 if (tempLink.indexOf(utmInheritingDomain) > 0) { // СКРИПТ БУДЕТ ИСКАТЬ ВСЕ URL C ТЕМ, ЧТО ВЫ ПРОПИШЕТЕ В UTMINHERITINGDOMAIN, ТО ЕСТЬ АДРЕС ВТОРОЙ СТРАНИЦЫ 

 tempLink = tempLink.replace(utmRegExp, ""); 

 tempParts = tempLink.split("#"); 

 if (tempParts[0].indexOf("?") < 0 ) {

 tempParts[0] += "?" + utms.join("&"); // СКРИПТ ДОБАВИТ МЕТКИ КО ВСЕМ ССЫЛКАМ НА ТОТ ДОМЕН, ЧТО ВЫ ВЫБРАЛИ 

 } else { 

 tempParts[0] += "&" + utms.join("&"); 

 } 

 tempLink = tempParts.join("#"); 

 } 

 links[index].href = tempLink; 

 } 

 }()); 

</script>

Проверка

Сохраните все изменения и нажмите на «Предварительный просмотр».

Если вы где-то крупно ошиблись, система сразу вам скажет об этом. Но даже если никаких предупреждений не появилось, проверьте кое-что вручную: 

• Убедитесь, что в адресе страницы есть все 3 utm-параметра. В нашем случае это должно выглядеть так:www.loremappsum.com?utm_medium=referral&amp;utm_source=promo&amp;utm_campaign=blackfriday2020. 
  
• Нажмите на ссылку из скрипта, ссылку на вашу вторую страницу. И проверьте, есть ли там ли utm-метки (если они должны быть) или точно ли они не добавились (если их там быть не должно).  
  
• И в конце концов проверьте другие внешние ссылки с первого сайта, на них параметры не должны передаваться.

Возможные сложности

Базу мы разобрали, теперь перейдём к конкретным вопросам. 

А если надо, чтобы метки передавались не на одну страницу, а несколько? 

Для этого нужно немного изменить код.  

В этом случае вам следует использовать немного измененную версию кода, которая проверяет массив доменов.

<script type="text/javascript"> 

 (function() { 

   var utmInheritingDomains = [ 

     "page2.com", // ЗАМЕНИТЕ НА ВАШ АДРЕС 

     "page3.com" // ЗАМЕНИТЕ НА ВАШ АДРЕС 

   ], 

 utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi, 

 links = document.getElementsByTagName("a"), 

 utms = [ 

   "utm_medium={{URL - utm_medium}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР MEDIUM В GOOGLE TAG MANAGER 

   "utm_source={{URL - utm_source}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР SOURCE В GOOGLE TAG MANAGER 

   "utm_campaign={{URL - utm_campaign}}", // ЗАМЕНИТЕ НА ВАШ ПАРАМЕТР CAMPAIGN В GOOGLE TAG MANAGER 

 ]; 

 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) { // СКРИПТ БУДЕТ ИСКАТЬ ВСЕ URL C ТЕМ, ЧТО ВЫ ПРОПИШЕТЕ В UTMINHERITINGDOMAIN, ТО ЕСТЬ АДРЕС ВТОРОЙ СТРАНИЦЫ 

 tempLink = tempLink.replace(utmRegExp, ""); 

 tempParts = tempLink.split("#"); 

 if (tempParts[0].indexOf("?") < 0 ) { 

 tempParts[0] += "?" + utms.join("&"); // СКРИПТ ДОБАВИТ МЕТКИ КО ВСЕМ ССЫЛКАМ НА ТОТ ДОМЕН, ЧТО ВЫ ВЫБРАЛИ 

 } else { 

 tempParts[0] += "&" + utms.join("&"); 

 } 

 tempLink = tempParts.join("#"); 

} 

 links[index].href = tempLink; 

 } 

 } 

 }()); 

</script>

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

Если вам нужны только конкретные поддомены, пропишите их полностью, иначе перенос будет происходить на все страницы этого домена.  

Что, если в utm-метках используется плюс?

Да, некоторые используют + в названиях меток. И некоторые браузеры (по крайней мере, Chrome) автоматически заменяют плюс на %20 (он же код пробела). К сожалению, эту проблему не решить. Так что просто не вставляйте + в utm-параметры.

Подытожим

Проблема переноса utm-параметров – не самая распространённая. Не все используют промежуточные лендинги для своих рекламных кампаний. Но если такая задача всё же возникает, лучше сделать всё быстро, без ущерба для аналитики. Ну, а если вы не уверены в своих силах, обращайтесь к нам, настройка аналитики – это только малая часть того, чем мы можем помочь вашему бизнесу.

Смотрите также:

Полное руководство по работе с utm-метками

Как работает ретаргетинг

Как запустить эффективную ppc-рекламу