Obecnie 219 forumowiczów jest online
Porozmawiaj na temat implementacji kodu śledzenia w wielu domenach, ustaw śledzenie zdarzeń. Dowiedz się, czym jest Universal Analytics i jak korzystać z Menedżera tagów Google.
Poprowadź mnie
star_border
Odpowiedz

Wysłanie formularza

Nowicjusz ✭ ✭ ✭

Witam

Po poprawnym wysłaniu formularza na stronie pojawia się komunikat "Twoja wiadomość została wysłana. Dziękujemy."

Jest on generowany w części kodu:

 

div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Twoja wiadomość została wysłana. Dziękujemy.</div>

oraz
<div class="screen-reader-response" role="alert">Twoja wiadomość została wysłana. Dziękujemy.</div>

 

Komunikat jest doczytywany, a adres URL nie zostaje przeładowany

W przypadku braku poprawnego uzupełnienia formularza, a po przyciśnięciu wyślij - zmienia się jedynie treść

 

Jak do dowolnej zmiennej wyciągnąć wartość div calss=wpcf7-re... albo class="screen-read...

tak aby na podstawie tej treści wysłać event.

 

Chodzi mi o jakiś scrypt java, albo JQuery

Próby z gtm.element. przynoszą marny efekt - zawsze zaciągana jest poprzednia wartość. Problem chyba z tym, że zmienna musi wczytywać aktualną treść tego komunikatu, a tego nie potrafię zrobić w java.

Pomoże ktoś?

Odpowiedź eksperta 1verified_user

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Grzegorz P
lutego 2017

Dot.: Wysłanie formularza

Magister ✭ ✭ ✭

Cześć.

Tutaj masz wideo jak śledzić zdarzenia "wysłanie formularza dynamicznego"

https://www.youtube.com/watch?v=1BSVf7iKAjw

 

Kanał YT- Google Tag Manager: https://goo.gl/S2RM7X

Wyświetl rozwiązanie w oryginalnym poście


Wszystkie odpowiedzi

Dot.: Wysłanie formularza

[ Edytowane ]
Nowicjusz ✭ ✭ ✭

 

Nie jestem w stanie udzielić Tobie uniwersalnej odpowiedzi ale mogę wskazać kilka kwestii do 'zgooglowania'

  • musisz podpiąć zdarzenie 'onclick' do przycisku zatwierdzającego formularz.
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $( '#idTwojegoPrzyciskuFormularza' ).click(function(event){
            //pobranie wartości pola z formularza, wysłanie zdarzenia GA i inne czary mary
        });
    });
    </script>
     
  • skorzystaj z jquery bo jest o wiele łatwiej z użyciem tej bibiloteki niż w 'czystym' JavaScript'cie
  • w funkcji wywołanej poprzez kliknięcie w przycisk musisz pobrać wartość pola formularza, które Ciebie interesuje - łatwiej 'namierzyć' pole poprzez id niż poprzez klasę. ( http://api.jquery.com/val/ )
  • możliwe, że pomocne będzie użycie 'callbacka' - czyli wstrzymanie wysłania formularza, przesłanie danych do GA i zatwierdzenie formularza dopiero po potwierdzeniu otrzymania danych przez GA ( https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits )
  • warto zaprzyjaźnić się z zakładką 'console' w Chrome Developer Tools lub analogicznym narzędziu z Twojej ulubionej przeglądarki internetowej
  • jak już zaprzyjaźnisz się z zakładką 'console' to warto doinstalować rozszerzenie do Chrome "Google Analytics Debugger" ( https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna ) aby mieć podgląd czy zdarzenie GA 'wychodzi' z Przeglądarki 

Pozdrawiam

BOgumił

 

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Grzegorz P
lutego 2017

Dot.: Wysłanie formularza

Magister ✭ ✭ ✭

Cześć.

Tutaj masz wideo jak śledzić zdarzenia "wysłanie formularza dynamicznego"

https://www.youtube.com/watch?v=1BSVf7iKAjw

 

Kanał YT- Google Tag Manager: https://goo.gl/S2RM7X

Dot.: Wysłanie formularza

[ Edytowane ]
Wschodząca Gwiazda

Ten kod wygląda mi na wtyczkę "Contact Form 7" w Wordpressie Emotikon: Szczęśliwy

 

A w takiej sytuacji najszybszą i najpewniejszą opcją śledzenia zdarzenia polegającego na wysłaniu formularza jest dodanie w ustawieniach dodatkowych formularza w panelu WP odpowiedniego kodu, który wygląda tak:

on_sent_ok: "ga('send','event','category','action','label');"

 

Przy czym oczywiście zamiast category, action i label wprowadź własne nazwy dla kategorii, akcji i etykiety.

Poniższy zrzut ekranu pokazuje, gdzie dokładnie są te ustawienia:

 

wpcf7-ga-event.png

 

Ta metoda nie tylko jest najszybsza do wdrożenia (pod warunkiem oczywiście, że masz możliwość dokonania edycji ustawień formularza), ale również najskuteczniejsza, gdyż zdarzenie jest wysyłane dopiero gdy faktycznie nastąpi wysłanie wiadomości email.

 

 

 

 

Tomasz Ciepłucha

Wysłanie formularza

[ Edytowane ]
Nowicjusz ✭ ✭ ✭

Dzięki wszystkim za pomoc

Wykorzystałem jednak wartości w value według filmu Bartka i jest ok

Znalazłem jeszcze take wyrażenie regularne do sprawdzenia maila

[a-zA-Z0-9\-_.]+@[a-z0-9\-.]+\.[a-z0-9]{1,4}

Wykorzystałem do od Bartka

(\W|^)[\w.+\-]{1,25}@([a-z\-]+\.)+[a-z]{2,25}$

Które jest bardziej uniwersalne i bezpieczne? Testowałem i oba dobrze weryfikują

 

Za, bardzo chciałem wykorzystać ten komunikat z poprawnym wysłaniem formularza i to był błąd, bo za dużo czasu zmarnowałem.

@Tomasz_C

Nie mam dostępu do panelu wrodpress, ale wysłałem info czy faktycznie można dodać event po stronie edycji formularza w CMS Emotikon: Mrugający. Ale faktycznie najprościej i najszybciej jest to to zrobienia

 

Jak będę miał jeszcze chwilę sprawdzę to co napisał Bogumił - może nauczę się czegoś nowego Emotikon: Bardzo szczęśliwy

Wysłanie formularza

Nowicjusz ✭ ✭ ✭

He He

Okazało się, że można edytować w ten sposób formularz. Szkoda, że nie znałem tego wcześniej