Wbudowane narzędzie audytu zostało zaprojektowane tak, aby było proste i łatwe do edycji. Celowo nie kompresujemy ani nie zaciemniamy kodu do osadzenia, jak robią to inne narzędzia innych firm, które wyraźnie uniemożliwiają dostosowywanie kodu. Zamiast tego udostępniamy cały kod CSS w prostym bloku kodu nad osadzonym kodem HTML, dzięki czemu możesz stylizować obiekty formularzy, o ile masz podstawową wiedzę o CSS.
Wystarczy dodać kilka linii CSS do odpowiednich sekcji, aby całkowicie dostosować wygląd i sposób działania. Jeśli masz średniozaawansowaną wiedzę na temat HTML, możesz modyfikować samą strukturę formularza. Możesz także dodać własne funkcje JavaScript (np. dodatkowa walidacja formularza) lub możesz wywołać inne funkcje/systemy onSubmit lub onClick w obrębie formularza.
Jedyne zalecenie dotyczące dostosowywania, jakie mamy, to nie wprowadzać żadnych zmian w bloku kodu JavaScript, ponieważ może to spowodować błędy. W związku z tym sugerujemy, aby nie przesuwać elementów formularza zbytnio w stosunku do ich pierwotnej kolejności, ponieważ niektóre odniesienia JavaScript opierają się na względnym rozmieszczeniu obiektów w formularzu. Poza tym zdecydowanie zalecamy i zachęcamy do dostosowania formularza tak, aby pasował do wyglądu i stylu Twojej witryny. Powinno sprawiać wrażenie naturalnej części witryny, a nie doczepianego widgetu. Sugerujemy to, ponieważ widzimy, że agencje osiągają wyższy poziom generowania potencjalnych klientów, gdy odpowiednio dostosowują formularz do stylu swojej witryny.
W tym przewodniku przyjrzymy się 3 najczęstszym zaawansowanym dostosowaniom formularza osadzania:
-
- Zaawansowana walidacja formularza
- Uruchomienie zdarzenia Google Analytics lub Facebook podczas przesyłania formularza
- Dostosowywanie stylu pola formularza lub przycisku przesyłania
Ale najpierw przyjrzyjmy się strukturze kodu do umieszczenia na stronie:
Eksploracja podstawowego kodu osadzania HTML
Aby wygenerować kod do umieszczenia na stronie, przejdź do zakładki Ustawienia osadzania i naciśnij przycisk „Zapisz ustawienia i wygeneruj kod do umieszczenia”. Poniżej znajduje się przykład kodu bazowego. Zauważysz, że pierwsza sekcja to CSS, następnie HTML i na końcu JavaScript. Powinieneś dostosować pierwsze dwie sekcje i pozostawić JavaScript bez zmian. Jak sugeruje komentarz w drugiej linijce, możesz przenieść sekcję CSS do swojego pliku CSS, aby wszystko było zarządzane centralnie w jednym miejscu.
1. Zaawansowana walidacja formularza
Formularz osadzania SEOptimera ma domyślnie wbudowaną prostą weryfikację formularza. OnSubmit JavaScript sprawdza wszystkie pola formularza pod kątem prawidłowych danych wejściowych, a w przypadku nieprawidłowych danych wejściowych wyzwala w przeglądarce komunikat ostrzegawczy JavaScript podobny do poniższego:
Dwie najpopularniejsze możliwości dodania solidnej walidacji do formularza osadzania to walidacja ograniczeń i walidacja w czasie rzeczywistym:
Walidacja ograniczeń
Sprawdź przewodnik CSS-Tricks walidacja ograniczeń który wykorzystuje komunikaty kontekstowe w polu formularza lub wokół niego, gdy staje się ono aktywne. Ta metoda uprzedza użytkownika i prowadzi go w kierunku przestrzegania oczekiwanego formatu wejściowego lub w poniższym przykładzie przynajmniej wpisania czegoś w polu:
Weryfikacja w czasie rzeczywistym
CSS-Tricks ma również świetny przewodnik weryfikacja w czasie rzeczywistym który zapewnia użytkownikowi weryfikację w polu podczas pisania. Może to być tak proste, jak ikonografia wskazująca prawidłowe dane wejściowe w formularzu:
2. Uruchomienie zdarzenia Google Analytics lub Facebook podczas przesyłania formularza
Uruchamianie zdarzeń śledzących, takich jak GA lub Facebook, w celu pomiaru celów lub retargetingu to świetny sposób na wykorzystanie ruchu za pomocą formularza osadzania. Najlepszym sposobem na osiągnięcie tego jest użycie narzędzia Menedżera tagów, takiego jak narzędzie Google Menedżer tagów (GTM). W ten sposób możesz zainstalować GTM jako pusty kontener na swojej stronie internetowej, a następnie zarządzać wszystkimi tagami i pikselami z samego GTM, bez konieczności każdorazowego zagłębiania się w kod.
Istnieją dwa sposoby, w jakie GTM może wywołać zdarzenia po przesłaniu formularza w Twojej witrynie:
- Korzystanie z wbudowanego wyzwalacza formularza, gdy formularz składać zdarzenie ma miejsce
- Opierając się na A zwyczaj Zdarzenie (linia JavaScript), które należy dodać do warstwy danych GTM
Dla większości użytkowników pierwsza opcja jest najlepsza, ponieważ jest najłatwiejsza do wdrożenia i działa dobrze. Formularz osadzania SEOptimera wykorzystuje standardowy kod HTML składać akcja, gdy użytkownik ją uzupełni, więc jeśli nie zmienisz sposobu przesyłania danych przez formularz, najlepszym rozwiązaniem będzie wbudowany wyzwalacz GTM.
Będziesz musiał utworzyć nowy wyzwalacz w GTM w oparciu o „Przesłanie formularza”:
Upewnij się także, że włączona jest wbudowana w GTM zmienna „ID formularza”. Ta zmienna będzie identyfikować identyfikator formularza osadzania na podstawie znacznika formularza w kodzie HTML.
Jeśli w końcu usuniesz akcję wysyłania formularza Osadź formularz i zastąpisz ją niestandardowym JavaScriptem, spowoduje to, że wbudowany wyzwalacz GTM nie będzie działał z formularzem. W tym miejscu musisz dodać wywołanie JavaScript, aby powiadomić warstwę danych GTM o wystąpieniu zdarzenia. To podejście i tak jest proste, ponieważ wystarczy je wykonać tylko raz, aby wszelkie przyszłe wydarzenia, które chcesz dodać, można było łatwo wykonać w samym GTM. JavaScript będzie wyglądał mniej więcej tak:
dataLayer.push({‘event’: ‘formularzSubmitted’, ‘formName’: ‘WebsiteAudit’});
Instrukcje krok po kroku dotyczące implementacji obu metod w GTM znajdują się w artykule Kliknij Przewodnik Insight.
3. Dostosowywanie stylu pola formularza lub przycisku przesyłania
Zaokrąglone elementy formy
Ten przykład z kanadyjskiej agencji cyfrowej, Dotrzyj pierwszy jest doskonałym przykładem tego, jak można wykorzystać kilka linijek CSS, aby zmodyfikować Narzędzie audytu, aby dopasować je do wyglądu i stylu witryny. W tym przypadku używają zaokrągleń we wszystkich pozostałych polach wejściowych i przyciskach w całej witrynie:
Tutaj możemy zobaczyć „promień granicy: 50 pikseli;” atrybut służy do uzyskania efektu zaokrąglenia pola wprowadzania tekstu Narzędzia audytu. Zwróć uwagę, że atrybut dopełnienia po prawej stronie jest ustawiony na 160 pikseli, aby zapewnić wystarczające dopełnienie między obszarem wejściowym a przyciskiem „Sprawdź”. Zapobiega to nakładaniu się wprowadzonego tekstu na przycisk.
W przypadku samego przycisku tylko atrybuty „border-top-right-radius” i „border-bottom-right-radius” zostały ustawione na 50 pikseli, aby uzyskać spójny efekt między polem wejściowym a przyciskiem:
Rozmiar i położenie elementów formularza
Australijskie doradztwo w zakresie marketingu cyfrowego, Stepy bardzo ładnie zintegrował Narzędzie audytu z oddzielną stroną docelową „Analizatora witryny”, używając zmiennych szerokości w 3 polach formularza i przesuwając przycisk w dół do własnego wiersza o pełnej szerokości:
Szerokości elementów formularza są względne w zależności od kontenera div, w którym się znajdują. Aby to osiągnąć, szerokość jest ustawiana w CSS na wartość procentową. W przypadku pola „Wprowadź swoją witrynę” widzimy, że to pole ma szerokość 25%:
Podczas gdy pola Imię i Adres e-mail są mniejsze i mają szerokość 15% każde:
Wreszcie przycisk „Generuj mój raport” ma szerokość o 1px większą niż suma pól wejściowych: 25 + 15 + 15 = 56%
Te przykłady pokazują, jak elastyczne i łatwe jest dostosowanie CSS narzędzia audytu do wyglądu i stylu witryny Twojej agencji. Jeśli napotkasz jakiekolwiek problemy podczas instalacji Narzędzia audytu, zapoznaj się również z naszym pełnym przewodnikiem!
