- Регистрация
- 21 Окт 2020
- Сообщения
- 137
Решение, которое позволяет осуществить перенос параметров utm_меток с одной страницы на другую с помощью Google Tag Manager.
Эта статья - адаптация для русскоязычного сообщества интернет-маркетологов, содержащая главные выжимки двух публикаций Julius Fedorovicius, автора блога analyticsmania.com. Рекомендую к прочтению оригиналы на английском языке, так как я какие-то моменты (не самые важные) буду опускать:
Пример №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 и вставьте в него следующий код:
Принцип работы скрипта следующий:
В качестве примера я добавлю домен Julius (analyticsmania.com), чтобы продемонстрировать переход с сохранением utm_метки:
Добавление доменов в domainsToDecorate
Затем вы должны отредактировать список параметров запроса, которые вы хотите взять из url-адреса страницы, и перенести их на определенные исходящие ссылки. Как правило, интернет-маркетологи передают все 5 переменных UTM в ссылке. Поэтому в queryParams добавьте utm_source, utm_medium, utm_campaign, utm_term и utm_content:
Добавление параметров запроса в queryParams
Примечание:
Создайте триггер типа Модель DOM готова с условием Page URL соответствует регулярному выражению (без учета регистра) utm_source=|utm_medium=|utm_campaign=|utm_term=|utm_content=
Триггер активации
Можно задать условие по-другому: Page URL соответствует регулярному выражению (без учета регистра) utm_(source|medium|campaign|term|content)=
Сохраните этот триггер и добавьте его в тег. Теперь осталось протестировать работу скрипта. Сделать это можно с помощью режима предварительного просмотра. Перейдите на свой сайт хотя бы с одним параметром запроса, определенным в скрипте. В моем примере - это ссылка со всеми параметрами UTM:
osipenkov.ru
Убедитесь, что тег был активирован.
Активация тега
Затем кликните по ссылке, которая содержит домен, добавленный в скрипте тега GTM. В моем примере это был analyticsmania.com.
Переданные параметры UTM для домена analyticsmania.com
В ней должны отобразиться все те же параметры, что и в исходной ссылке. Также не забудьте протестировать ситуацию без параметров запроса. В этом случае тег не должен быть активирован и ничего не должно быть добавлено к ссылкам. И случай, когда вы переходите по какому-нибудь другому домену, который не был прописан в скрипте в domainsToDecorate. Параметры запроса также не должны быть добавлены к ссылке.
У Julius в блоге есть второй вариант скрипта, который он рекомендует использовать, если вышеописанный способ не подошел для ссылок, URL которых содержит #.
Создайте пользовательские переменные типа URL с типом компоненты Запрос для каждой utm_метки:
Переменные URL для каждой utm_метки
Назовите каждую переменную своим именем. Сохраните изменения. В самом скрипте в блоке, где в массиве utms определяются переменные параметров запроса, в фигурных скобках должны быть динамически подставлены значения созданных переменных.
Подставьте свои переменные UTM
Теперь необходимо создать триггер активации, который запускался бы только тогда, когда все 5 переменных UTM содержат что-то, а не undefined. Создайте триггер типа Модель DOM готова с условиями для каждой метки не равно undefined.
Условия активации триггера
Сохраните триггер и добавьте его к тегу. Опубликуйте изменения.
Примечание: в utm_метках иногда могут передаваться значения со знаком "+". Некоторые браузеры (например, Google Chrome) автоматически заменяют его на %20 (закодированное пустое пространство). Данный скрипт будет подставлять вместо "+" эти символы. Так что единственный совет, который Julius дает для этого решения - стараться не использовать знак "+" в utm_метках.
Источник
Эта статья - адаптация для русскоязычного сообщества интернет-маркетологов, содержащая главные выжимки двух публикаций 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
Пример №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_меткой. Например:
- просмотрев информацию, он кликает по кнопке мобильного приложения и переходит в App Store для установки. Она имеет ссылку без utm_метки. Например:
Clubhouse: Drop-in audio chat
Hey! We're working hard to add people to Clubhouse as fast as we can, but right now you need an invite to sign up. Anyone can get one by joining the waitlist, or by asking an existing user for one. We really appreciate your patience and can't wait to welcome you. Thank you! *** ABOUT CLUBHOUSE…apps.apple.com - если в скрипте прописан домен itunes.apple.com, то к ссылке App Store автоматически добавится хвост с параметрами запроса (которые вы указали) и ссылка примет вид
Clubhouse: Drop-in audio chat
Hey! We're working hard to add people to Clubhouse as fast as we can, but right now you need an invite to sign up. Anyone can get one by joining the waitlist, or by asking an existing user for one. We really appreciate your patience and can't wait to welcome you. Thank you! *** ABOUT CLUBHOUSE…apps.apple.com
- если ссылки, в которые вы автоматически хотите добавлять параметры запроса, содержат #;
- если ссылки, в которые вы автоматически хотите добавлять параметры запроса, уже содержат такие параметры запроса. В этом случае они не будут заменены, а просто дополнительно добавятся к URL-адресу, и вы получите повторяющиеся параметры;
В качестве примера я добавлю домен 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 . Актуально для ссылок, в которых может передаваться ключевое слово с модификатором широкого соответствия.
Создайте триггер типа Модель DOM готова с условием Page URL соответствует регулярному выражению (без учета регистра) utm_source=|utm_medium=|utm_campaign=|utm_term=|utm_content=
Триггер активации
Можно задать условие по-другому: Page URL соответствует регулярному выражению (без учета регистра) utm_(source|medium|campaign|term|content)=
Сохраните этот триггер и добавьте его в тег. Теперь осталось протестировать работу скрипта. Сделать это можно с помощью режима предварительного просмотра. Перейдите на свой сайт хотя бы с одним параметром запроса, определенным в скрипте. В моем примере - это ссылка со всеми параметрами UTM:
Счетчик просмотренных страниц с помощью GTM
Запустить триггер, тег после просмотра пользователем 1,2,3...N страниц (PageView)? Легко, особенно когда есть cookie и Google Tag Manager!
osipenkov.ru
Активация тега
Затем кликните по ссылке, которая содержит домен, добавленный в скрипте тега 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_метках.
Источник