Zbieranie UTM i automatyczne wypełnianie pól formularza

Zaktualizowano: 10 grudnia, 2020 Autor: Avatar Teresa
share
Spis treści
    share
    Spis treści

      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.

      Z tej instrukcji dowiesz się:

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

      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 bottom 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.

      share

      Czy ta instrukcja była pomocna?