Zbieranie UTM i automatyczne wypełnianie pól formularza

Ostatnia aktualizacja: 21.01.2020

UTM – co to takiego?

Parametry UTM to znaczniki dodawane do adresu URL, które pomagają śledzić (np. w Google Analytics), skąd użytkownik trafił na Twoją stronę.

Parametrów UTM możesz z powodzeniem użyć w linku do swojego landing page’a – jeśli nie wiesz, jak to zrobić, sprawdź nasz Generator UTM.

Jak zbierać standardowe parametry UTM?

Wszystkie standardowe parametry UTM z linku do twojego landing page’a są automatycznie zbierane i dodawane do leada.

Przykład:

Jeśli odwiedzający wejdzie na Twój landing page o przykładowym adresie URL:
http://www.mylandingpage.com/hello/?utm_source=facebook.com&utm_medium=social&utm_campaign=winter_sale
po wypełnieniu formularza końcowy lead będzie wyglądał następująco:

email: (tutaj adres email podany przez odwiedzającego)
utm_source: facebook.com
utm_medium: social
utm_campaign: winter_sale

Jak zbierać niestandardowe parametry UTM?

Jeśli korzystasz z niestandardowych parametrów, które chcesz przekazać do leada, będziesz potrzebował ukrytych pól w formularzu i dodatkowego kodu JavaScript.

1. Zaloguj się do platformy Landingi i przejdź do edycji wybranego landing page’a. Wejdź w ustawienia formularza i dodaj do niego ukryte pola odpowiadające Twoim niestandardowym parametrom UTM – po jednym dla każdego parametru. W Ustawieniach pola, po kliknięciu w Dodatkowe opcje wpisz w polu Nazwa atrybutu niestandardowy parametr.

UTM_PL1

Przykład:

Jeśli Twój adres URL landing page’a z niestandardowymi parametrami to:
https://www.landpage.co/utm/?ref=website&name=Gilbert,
w polu atrybut dodaj odpowiednio “ref” i “name”.

2. Wejdź w Dashboard landing page’a, przejdź do zakładki Kody JavaScript i kliknij Dodaj kod. Umieść poniższy kod na pozycji Body – na dole na stronie głównej landinga i zapisz zmiany. Więcej na temat dodawania własnych kodów znajdziesz w instrukcji JavaScript – dodawanie własnych skryptów.

<script>
    var urlParam = getUrlVars();


    for (var prop in urlParam) {
      if (urlParam.hasOwnProperty(prop)) {
        var input = document.querySelector('[name="' + prop + '"]');
        
        if (input) {
          if (input.type === 'checkbox' && urlParam[prop] === '1') {
          input.checked = true;
        } else {
          input.value = urlParam[prop];  
        }
        }
       
      }
    }
</script>

Docelowy lead będzie wyglądał w ten sposób:

2020-01-15_10-55-55

Ukryte pole z nazwą atrybutu „name” przechwytuje parametr name, natomiast ukryte pole z atrybutem „ref” przechwytuje parametr ref.

Jak przekazać parametry UTM z jednego landing page’a na drugi i automatycznie wypełnić pola formularza?

Możesz przesłać parametry UTM z jednego formularza na landingu na drugi, przez co dane wpisane przez użytkownika na pierwszym landing page’u będą uzupełnione automatycznie na kolejnym.

Poniżej przykładowe zastosowanie:

UTM_EN1

Uwaga: Skrypty nie zadziałają, jeśli korzystasz z funkcji lejków (akcja po wypełnieniu formularza).

Krok I – na pierwszym landing page’u

1. Zaloguj się do platformy i wejdź w zakładkę Landingi. Wejdź w Dashboard landing page’a, z którego chcesz przesłać parametry, a następnie przejdź do zakładki Kody JavaScript i kliknij Dodaj kod.

2. Umieść poniższy kod na pozycji head na stronie po konwersji i zapisz zmiany. Więcej na temat dodawania własnych kodów znajdziesz w instrukcji JavaScript – dodawanie własnych skryptów.

<script>
var out = [];
for (var key in conversion) {
if (conversion.hasOwnProperty(key)) {
out.push(key + '=' + conversion[key]);
}
}
location.href= 'https://www.example.com' + '?' + out.join('&');
</script>

W miejscu “example.com” wstaw adres URL drugiego, docelowego landing page’a, na który ma zostać przekierowany użytkownik po wypełnieniu formularza.

Krok II – na docelowym landing page’u

1. Wejdź w Dashboard landing page’a, na który chcesz wysłać parametry UTM, a następnie przejdź do zakładki Kody JavaScript i kliknij Dodaj kod.

2. Wklej poniższy kod dla niestandardowych parametrów UTM na pozycji Body na dole na stronie głównej landinga i zapisz zmiany.

<script>
    var urlParam = getUrlVars();


    for (var prop in urlParam) {
      if (urlParam.hasOwnProperty(prop)) {
        var input = document.querySelector('[name="' + prop + '"]');
        
        if (input) {
          if (input.type === 'checkbox' && urlParam[prop] === '1') {
          input.checked = true;
        } else {
          input.value = urlParam[prop];  
        }
        }
       
      }
    }
</script>

Od tej pory dane wpisane w formularzu na pierwszym landing page’u zostaną przekazane do adresu URL kolejnego landinga i będa automatycznie uzupełniane w formularzu.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.