Czy kiedykolwiek zastanawiałeś się, jak zmierzyć efektywność swoich formularzy HubSpot? Czy chciałbyś wiedzieć jakie działania użytkownicy podejmują po ich wypełnieniu? Jeśli odpowiedź brzmi tak, to czytaj dalej. Dowiesz się, jak wykorzystać Google Tag Manager do śledzenia formularzy HubSpot i zwiększenia swojego sukcesu w generowaniu leadów i konwersji.

Od czego zacząć mierzenie formularzy?

Pierwszym krokiem jest oczywiście skonfigurowanie konta Google Tag Manager. Jeśli jeszcze nie masz konta, możesz je bezpłatnie założyć na stronie Google Tag Manager. Po zainstalowaniu kodu GTM na swojej stronie internetowej, możesz rozpocząć proces śledzenia formularzy HubSpot. Zakładam, że masz już konto HubSpot i skonfigurowany przynajmniej jeden formularz, który będziemy za chwilę śledzić, dlatego przechodzimy do działania.

Masz już wszystko podpięte, strona działa, formularz został opublikowany, kod GTM zainstalowany. Jeśli się spieszysz, to poniżej wklejam niestandardowy kod HTML, który będziemy używać do nasłuchiwania czy też monitorowania tzw. callbacku po wysłaniu formularza HubSpot. Callback ten jest wysyłany kiedy użytkownik poprawnie wypełni i wyśle formularz na stronie. W ten sposób mamy pewność, że skrypt uruchamiamy tylko wtedy, kiedy doszło do konwersji.

Skrypt do śledzenia wysłania formularza

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>

Dokładne wyjaśnienie co ten kod robi:

1. Skrypt reaguje na zdarzenia, które mają miejsce w oknie przeglądarki, a dokładniej nasłuchuje na zdarzenie "message" (wiadomość).
2. Gdy zostanie wywołane zdarzenie "message", skrypt sprawdza, czy wiadomość ma określony typ ('hsFormCallback') oraz czy nazwa zdarzenia (eventName) jest równa 'onFormSubmitted' (czyli formularz został wysłany).
3. Jeśli warunki te są spełnione, skrypt wykonuje następujące czynności:

• Dodaje do tablicy "dataLayer" w obiekcie "window" nowy element, który opisuje sukces formularza wysłanego przy użyciu platformy HubSpot.
• W tym elemencie ustawia 'event' na 'hubspot-form-success' (sukces formularza w HubSpot) oraz 'hs-form-guid' na wartość identyfikatora formularza, który został wysłany (przekazywanego w wiadomości jako event.data.id).

W skrócie, ten skrypt nasłuchuje na zdarzenie wysłania formularza i po jego wysłaniu wysyła odpowiednie dane do obiektu "dataLayer" w celu śledzenia sukcesu formularza w HubSpot.

Wróćmy do Google Tag Managera.

Powyższy kod posłuży nam do stworzenia tagu w GTM. W tym przypadku będziemy korzystać z tagu niestandardowego. Przejdź do sekcji "Tagi" w GTM, kliknij przycisk "Nowy" i wybierz typ tagu "Niestandardowy kod HTML". Wklej kod śledzenia HubSpot w polu kodu niestandardowego i ustaw "Regułę uruchamiającą" na wyświetlenie strony, na której umieszczony jest formularz. To pozwoli tagowi śledzić każde jego wypełnienie.

Ok, mamy uruchomione śledzenie wysłania formularza, ale wklejony kod tworzy nam nowe zdarzenie i wysyła je tylko do dataLayer, dlatego chcąc wyświetlać te eventy w Google Analytics 4 musimy jeszcze skonfigurować drugi tag w GTM.

Tworzenie zdarzenia konwersji w Google Analytics 4

Powyższy skrypt wysyła dwie zmienne do dataLayer - event oraz hs-form-guid. Pozwól, że skupimy się tylko na event, ponieważ hs-form-guid to parametr dodatkowy do zdarzenia (pamiętaj, że tych parametrów dodatkowych możemy wysyłać więcej jak np. kolor, typ, rodzaj i inne własne zmienne w formie liczb lub znaków).

Podobnie jak w przypadku śledzenia callbacku z Hubspota, musimy również obsłużyć zdarzenie, które zostało wysłane do dataLayer. Tym razem tworzymy nowy Tag w GTM, w którym monitorować będziemy czy zostało wykonane zdarzenie hubspot-form-success na stronie.

Zacznijmy od stworzenia reguły:

Po stworzeniu reguły tworzymy tag, który wyśle to zdarzenie do GA4:

Teraz pozostaje przetestować naszą konfigurację.

Po potwierdzeniu, że wszystko zbiera się poprawnie możemy się zastanowić co jeszcze byśmy chcieli mierzyć na stronie, a jeśli szukasz kogoś kto mógłby Ciebie wesprzeć i wdrożyć zaawansowaną analitykę na stronie - napisz w komentarzu lub skontaktuj się z nami. Chętnie pomożemy!

Przy okazji polecam te 4 artykuły, które być może mogą Ciebie zainteresować:

1. Jak przekazywać Google user_pseudo_id do Mautic lub systemu CDP, CRM
2. PORADNIK Jak Utworzyć Własne Zdarzenie (Custom Event) GA4, GTM, DLV
3. Jak Dobrze Zarządzać Monitorowaniem Wielu Zdarzeń na Stronie - GTM Tips
4. Blendowanie Danych w Google Looker Studio. Co To Takiego?

‍

Skrypt do śledzenia formularzy został znaleziony na stronie 3WhiteHats.