May 13, 2023

Как передать UTM-метки в GC с любого источника

GC-формы могут располагаться внутри страниц GC и внутри виджетов. В случае со страницами пробросить метки очень легко

  1. Создаем в форме 5 полей заказа с именами
  2. Делаем полям классы с именем ютм параметров

3. Вставляем скрипт в блок js с таким содержимым

$(function(){
      const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const utmsource = urlParams.get('utm_source'),
  utmmedium = urlParams.get('utm_medium'),
  utmterm = urlParams.get('utm_term'),
  utmcontent = urlParams.get('utm_content'),
  utmcampaign = urlParams.get('utm_campaign');

  $('.utm_source input').val(utmsource);
  $('.utm_medium input').val(utmmedium); 
  $('.utm_term input').val(utmterm); 
  $('.utm_content input').val(utmcontent);
$('.utm_campaign input').val(utmcampaign);

});
    

4. Осталось добавить допполям класс hidden, что скроет их от учеников

Как передать параметры, если GC вставлен виджетом на стороннюю платформу с другим доменом?

В этом случае код выше не работает. Для начала нам необходимо сделать отдачу меток с той странице, которая содержит GC-виджет, например, на тильде или таплинке

Вставляем туда код.

<script>
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const utmsource = urlParams.get('utm_source'),
  utmmedium = urlParams.get('utm_medium'),
  utmterm = urlParams.get('utm_term'),
  utmcontent = urlParams.get('utm_content'),
  utmcampaign = urlParams.get('utm_campaign');

window.addEventListener("message", function(event) {
    if(event.data.event_id === 'iframe loaded'){
 Array.from(document.querySelectorAll('iframe[src*="/pl/"]')).map((element) => {
   element.contentWindow.postMessage(   {
        event_id: 'utm-params',
        params: {
  utmsource: utmsource, 
  utmmedium:utmmedium,
  utmterm :utmterm,
  utmcontent:utmcontent,
  utmcampaign:utmcampaign,
        }
    }, 
    "*")
  });
  

    }
});
</script>

Обратите внимание

Этот блок нужно вставлять в блок "html-код". Если на какой-то другой платформе нет такого блока, но есть блок для вставки скриптов, то код выше нужно вставлять без строчек <script></script>, которые находятся в начале и конце кода

Теперь нужно создать виджет с формой, в которой есть поля заказа с классами, как в начале статьи. После этого нужно импортировать блок с кодом ниже

eyJ0eXBlIjoicmF3LWpzIiwicHJlc2V0IjoicmF3LWpzIiwicGFyYW1zIjoie1wiYmxvY2tDb2RlXCI6XCIxMTQ2ZFwiLFwibmFtZVwiOlwiXCIsXCJyYXdWYWx1ZVwiOlwid2luZG93LmFkZEV2ZW50TGlzdGVuZXIoXFxcIm1lc3NhZ2VcXFwiLCByZWNlaXZlTWVzc2FnZSwgZmFsc2UpO1xcblxcbmZ1bmN0aW9uIHJlY2VpdmVNZXNzYWdlKGV2ZW50KVxcbntcXG5pZihldmVudC5kYXRhLmV2ZW50X2lkID09PSAndXRtLXBhcmFtcycpe1xcbiQoJy51dG1fc291cmNlIGlucHV0JykudmFsKGV2ZW50LmRhdGEucGFyYW1zLnV0bXNvdXJjZSlcXG4kKCcudXRtX21lZGl1bSBpbnB1dCcpLnZhbChldmVudC5kYXRhLnBhcmFtcy51dG1tZWRpdW0pXFxuJCgnLnV0bV90ZXJtIGlucHV0JykudmFsKGV2ZW50LmRhdGEucGFyYW1zLnV0bXRlcm0pXFxuJCgnLnV0bV9jb250ZW50IGlucHV0JykudmFsKGV2ZW50LmRhdGEucGFyYW1zLnV0bWNvbnRlbnQpXFxuJCgnLnV0bV9jYW1wYWlnbiBpbnB1dCcpLnZhbChldmVudC5kYXRhLnBhcmFtcy51dG1jYW1wYWlnbilcXG59XFxufVxcblxcblxcblxcbndpbmRvdy5wYXJlbnQucG9zdE1lc3NhZ2UoXFxuICAgIHtcXG4gICAgICAgIGV2ZW50X2lkOiAnaWZyYW1lIGxvYWRlZCcsXFxuICAgICAgICBkYXRhOiB7XFxuICAgICAgICAgICAgc3RhdHVzOiAnc3VjY2VzcycsIFxcbiAgICAgICAgfVxcbiAgICB9LCBcXG4gICAgXFxcIipcXFwiXFxuKTsgXCIsXCJibG9ja1BhZGRpbmdUb3BcIjowLFwiYmxvY2tQYWRkaW5nQm90dG9tXCI6MCxcImJsb2NrQmFja2dyb3VuZENvbG9yXCI6XCJcIixcImJsb2NrRm9yZWdyb3VuZENvbG9yXCI6XCJcIixcImJsb2NrQ3NzQ2xhc3NcIjpcIlwiLFwicmVwbGFjZVZhcmlhYmxlc1wiOlwiXCIsXCJibG9ja0xpbmtDb2xvclwiOlwiXCIsXCJibG9ja0ZvbnRcIjpudWxsLFwiYmxvY2tGb250SGVhZGVyXCI6bnVsbH0iLCJjc3MiOm51bGx9

и в вашей форме появится блок js

Импортируются блоки вот отсюда

После этого у вас будут прокидываться метки со страницы в гк виджет даже при кроссдомене