Jak przechwycić adres email z formularza, po kliknięciu przycisku SUBMIT, za pomocą Google Tag Managera
Czasami istnieje potrzeba przechwycenia adresu email przez zewnętrzne oprogramowanie.
Jak to w świecie IT bywa, sposobów jest bardzo dużo.
Tutaj przedstawię taki który nie wymaga ingerencji w kod źródłowy strony ani modyfikacji kodu formularza, z wykorzystaniem Google Tag Managera oraz prostej funkcji JavaScript przeszukującej wprowadzoną treść w formularzu, w poszukiwaniu ciągu odpowiadającemu wartości email.
Taką funkcjonalność można wykorzystać np. do uzupełnienia danych w systemie analitycznym np. Matomo.
Pierwszą rzeczą, jaką potrzebujemy to oczywiście już zainstalowany Google Tag w naszej stronie, tego tutaj nie opisuję, wychodzę z założenia, że jest to już zrobione.
Po zalogowaniu do GTM klikamy REGUŁY:
Następnie dodaj REGUŁĘ (Trigger), kliknij Nowe:
Potem wybierz typ reguły, aby rozpocząć konfigurację…
I wybierz Przesłanie formularza
Teraz nadaj nazwę tej Reguły (Triggerowi) i kliknij Zapisz:
Teraz wybierz Zmienne:
Kliknij — Skonfiguruj, a następnie zaznacz wszystkie zmienne pod napisem Formularze:
Teraz potrzebna jest nam niestandardowa zmienna o nazwie np. emailInput, zawierająca kod JavaScript, który przeszuka nam powyższe zmienne, w celu znalezienie wyrażenia odpowiadającego emailowi, przesłanemu przez formularz, po kliknięciu przycisku SUBMIT.
Dlatego kliknij po prawej Nowa:
Następnie, Konfiguracja zmiennej.
Potem kliknij Niestandardowy kod JavaScript.
Wklej kod, który jest poniżej tego obrazka, nadaj nazwę dla tej zmiennej np. emailInput
Wklej poniższy kod:
function() {
try {
var searchEmail = function(input){
for(i=0; i<input.length; i++){
email = input[i].value;
if(email.match(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)){
return email;
}
}
}
return searchEmail({{Form Element}});
}catch(e) {
return „”;
}
}
Teraz zapisz tę zmienną.
Ostatnim elementem jest już dodanie i opublikowanie potrzebnego nam TAGu, który zostanie odpalony, po wysłaniu formularza i przekaże dane z tej zmiennej do naszej docelowej aplikacji np. Matomo.
Więc kliknij Tagi i kliknij Nowy.
Następnie wybierz Niestandardowy kod HTML i wklej tutaj kod ze swojej aplikacji:
Ostatnim elementem jest wybranie wcześniej utworzonej Reguły (Triggera), który wyzwoli ten TAG jak poniżej:
W ten sposób utworzyłeś dodatkowy kod, który wyszuka email w przesłanym formularzu i przekaże go jako wartość niestandardowej zmiennej do kod w utworzonym TAGU.
A jeżeli chciałbyś poznać najskuteczniejszy Model Biznesowy, dzięki któremu możesz skalować swój biznes usługowy lub produkcyjny, to zapraszam na moją listę e-mail, tam jest wideo, na którym bezpłatnie go omawiam.
Możesz też dołączyć do programu ZNWO, czyli Zarabiaj Na Wiedzy Online, o tym informacja jest również na mojej liście email: