Osadzanie formularza rejestracyjnego na stronie

Czego się dowiesz?

Poznasz sposób dodawania do danej strony lub jej lokalizacji witryny (np. stopki) osadzanych formularz rejestracyjnych, dzięki którym kupujący chcące dowiedzieć się o Twojej marce więcej będą mogli łatwo zarejestrować się newsletter. Osadzenie formularza rejestracyjnego w stopce witryny, aby działał w tandemie z innymi opublikowanymi formularzami, to według Klaviyo najlepsza praktyka w zakresie optymalizacji rozwoju listy.

Aby dodać na swoją stronę formularz osadzony:

1. Utwórz i spersonalizuj w Klaviyo nowy formularz osadzony.
2. Opublikuj formularz, a potem skopiuj jego kod osadzenia.
3. Dodaj formularz do swojej witryny, korzystając z instrukcji dla swojej platformy poniżej.

Kilka słów na początek

Zanim zaczniesz tworzyć formularz rejestracyjny, upewnij się, że funkcja formularzy rejestracyjnych jest włączona na Twojej stronie. Dzięki temu formularze opublikowane w Klaviyo będą wyświetlać się na Twojej stronie i synchronizować dane z Klaviyo.

Aby formularze osadzone działały, musisz mieć:

• Śledzenie na stronie (Klaviyo.js) zainstalowane w Twojej witrynie, aby umożliwić działanie formularza rejestracyjnego.
• Kod osadzania formularza umieszczony w miejscu, w którym chcesz, aby był wyświetlany, lub jego identyfikator formularza dodany do bloku aplikacji Klaviyo Embedded Form na Shopify.

Pamiętaj, że wklejanie kodu osadzania jest konieczne tylko w przypadku formularzy osadzonych. Formularze pop-up, rozwijane poziomo i pełnoekranowe nie wymagają wklejania kodu i mogą być publikowane bezpośrednio z kreatora formularzy Klaviyo.

Od 6 grudnia 2024 r.: Klaviyo ulepszyło sposób obliczania wyświetleń formularzy osadzonych, aby dokładniej mierzyć zaangażowanie. Wyświetlenia formularzy osadzonych są rejestrowane tylko wtedy, gdy formularz jest widoczny w rzutni użytkownika. Ta zmiana może spowodować zauważalną zmianę liczby wyświetleń oraz wzrost wskaźników przesłania, szczególnie w przypadku formularzy osadzonych w stopce witryny — będą one zliczane tylko wtedy, gdy odwiedzający przewinie stronę w dół na tyle, aby formularz częściowo znalazł się w jego rzutni.

Dodawanie na stronę formularza osadzonego

Jeśli korzystasz z formularza rejestracyjnego udostępnianego przez Shopify, BigCommerce lub WooCommerce, sprawdź, czy Twoja integracja jest skonfigurowana tak, aby synchronizować subskrybentów z listą Klaviyo, której potrzebujesz. Nie musisz wymieniać tego formularza, jeśli już wysyła subskrybentów na właściwą listę, ale możesz utworzyć formularz osadzony Klaviyo, aby zbierać subskrybentów na innej liście.

Tworzenie i personalizowanie w Klaviyo nowego formularza osadzonego

1. W nawigacji Klaviyo wybierz formularze rejestracyjne.
2. Wybierz opcję Utwórz formularz. Jeśli pojawi się selektor kanału, wpisz nazwę, wybierz Web, a następnie kliknij Utwórz, aby otworzyć bibliotekę formularzy. W bibliotece możesz:
   • Spersonalizuj wstępnie zbudowany szablon z biblioteki formularzy. Otwórz Styl formularza i wybierz Osadzony, aby wyświetlić szablony formularzy osadzonych. Wybierz szablon, którego chcesz użyć.
   • Zacznij od pustego formularza, wybierając Utwórz pusty formularz.
3. Skonfiguruj swój formularz w panelu, który się otworzy:
   • Wprowadź lub potwierdź nazwę formularza.
   • Wybierz listę subskrybentów dla każdego kanału, z którego korzysta Twój formularz.
   • Jeśli zaczynasz od pustego formularza, jako typ formularza wybierz Osadź.
     

4. Aby użyć szablonu, kliknij Utwórz formularz. Aby utworzyć pusty formularz, kliknij Zapisz i zaprojektuj.
5. Za pomocą edytora dowolnie wystylizuj swój formularz i dodaj do niego bloki lub pola wejściowe. Wskazówki dotyczące personalizowania znajdziesz w artykule Formularze rejestracyjne: pierwsze kroki.
   

1. Gdy formularz będzie gotowy, usuń wszystkie alerty blokujące. Kliknij Opublikuj lub zaplanuj, wybierz Opublikuj teraz, a następnie kliknij Opublikuj teraz. Formularz jest opublikowany w Klaviyo, ale zanim odwiedzający będą mogli go zobaczyć, musisz też dodać go do swojej witryny zgodnie z opisem poniżej.
2. Jeśli pojawi się okno Formularz został opublikowany! kliknij Kopiuj, aby skopiować kod osadzania do schowka. Jeśli to okno się nie pojawi, skopiuj kod, korzystając ze ścieżki edytora poniżej.
   

Aby skopiować kod do osadzenia z edytora, wybierz Targeting & behavior > Display. Skopiuj fragment kodu w sekcji Embed code.

Dodaj osadzony formularz do swojej strony

Po opublikowaniu formularza w Klaviyo i skopiowaniu kodu osadzania postępuj zgodnie z instrukcjami poniżej dla Twojej platformy, aby dodać formularz w miejscu, w którym ma się pojawić (np. w pliku motywu lub na konkretnej stronie). W przypadku bloku aplikacji Shopify Osadzony formularz Klaviyo użyj identyfikatora formularza (ID) z kodu zamiast pełnego fragmentu kodu.

Na poniższej liście znajdź platformę, z której korzystasz, a następnie przejdź do artykułu pod nią. Znajdziesz w nim bardziej szczegółowy przewodnik na temat dodawania osadzonego formularza do tej platformy.

Jeśli nie widzisz swojej platformy, zobacz punkt „Inne platformy”.

• BigCommerce
  W przypadku BigCommerce kod osadzania wklej w plikach witryny w miejscu, w którym ma się pojawić.
  • Przejdź do Dodawanie kodu osadzania do swojej strony BigCommerce.
• Shopify
  W przypadku Shopify dodaj blok aplikacji Klaviyo Embedded Form do szablonu strony i wklej identyfikator formularza z kodu osadzania. Na przykład w <div class="klaviyo-form-ABC123"></div> identyfikator formularza to ABC123.
  • Przejdź do Dodawanie kodu osadzania do swojej strony Shopify.
• Square
  W przypadku Square dodaj sekcję Kod osadzania w edytorze witryny Square Online i wklej kod osadzania w miejscu, w którym chcesz, aby pojawił się formularz.
  • Przejdź do Dodawanie kodu osadzania do swojej strony Square.
• WooCommerce
  W przypadku WooCommerce wklej kod osadzania do kodu HTML witryny.
  • Przejdź do Dodawanie kodu osadzania do stopki strony WooCommerce.
• Inne platformy
  Jeżeli platforma nie jest wymieniona powyżej lub używana jest niestandardowa integracja, która nie integruje się natywnie z Klaviyo, aby formularz osadzony działał, trzeba upewnić się, że na stronie wklejono 2 wycinki kodu źródłowego:
  
  • Śledzenie aktywności na stronie (znane również jako Klaviyo.js) w celu włączenia funkcji formularza rejestracyjnego.
    • Pamiętaj, że w przypadku wielu platform funkcja śledzenia aktywności na stronie dodawana jest podczas integracji automatycznie (m.in. z Wix, PrestaShop czy Magento 1 i 2). Aby potwierdzić, że wybrano tę opcję, sprawdź ustawienia integracji swojej platformy w Klaviyo.
      • Jeśli Twoja platforma nie ma natywnej integracji z Klaviyo, śledzenie aktywności na stronie trzeba dodać ręcznie.
  • Kod osadzania danego formularza
    • Po włączeniu śledzenia aktywności na stronie do kodu HTML / kodu źródłowego witryny należy w wybranym miejscu (np. w stopce) wkleić kod osadzania formularza.
      • Aby skopiować kod osadzania formularza, w edytorze formularza wybierz Kierowanie i zachowanie > Wyświetlanie, a następnie skopiuj fragment kodu w sekcji Kod osadzania.

Kolejne kroki

Kiedy opublikujesz formularz osadzony w Klaviyo, dodasz go do swojej strony zgodnie z instrukcjami Twojej platformy i zapiszesz zmiany, przejdź do witryny i odśwież stronę.

Osadzony formularz powinien wyświetlić się w wybranym przez Ciebie miejscu na Twojej stronie.

1. Prześlij formularz z testowymi danymi kontaktowymi. Jeśli zbiera adresy e-mail, użyj adresu, którego nie używałeś(-aś) wcześniej w tym formularzu.
2. W przypadku podwójnej zgody opt-in na e-mail potwierdź subskrypcję za pomocą e-maila potwierdzającego. Po ukończeniu wszelkich wymaganych potwierdzeń sprawdź, czy zostałeś(-aś) dodany(-a) do listy subskrybentów wybranej dla formularza.

Rozwiązywanie problemów z formularzami osadzonymi

Jeśli Twój formularz osadzony jest w Klaviyo aktywny, ale nie wyświetla się na Twojej stronie, zapoznaj się z poniższymi wskazówkami dotyczącymi rozwiązywania problemów:

• Wyczyść pamięć podręczną przeglądarki, a potem odśwież stronę.
• Upewnij się, że Twoja strona została prawidłowo zintegrowana z Klaviyo i jest aktywna.
• Sprawdź, czy masz włączone formularze rejestracyjne na swojej stronie internetowej (to to samo co włączenie śledzenia aktywności na stronie).
• Upewnij się, że po dodaniu kodu osadzania formularza zapisano zmiany na stronie internetowej lub, w Shopify, jego identyfikator formularza.
• W edytorze formularzy rejestracyjnych Klaviyo przejdź do sekcji Targetowanie i zachowanie, a następnie sprawdź następujące funkcje:
  • W sekcji Wyświetlanie sprawdź, czy:
    • Kod osadzania wklejony na Twojej stronie jest zgodny z kodem udostępnionym przez Klaviyo albo blok aplikacji Shopify zawiera pasujący identyfikator formularza
    • ustawienia urządzenia w Klaviyo odpowiadają urządzeniu, na którym wyświetlasz formularz.
  • W sekcji Targetowanie, czy:
    • Trafiasz na ustawienia Odbiorcy formularza
    • formularz ustawiono tak, aby pokazywał się na wyświetlanym adresie URL i zawierał wszelkie wskazane parametry UTM;
    • Twoja lokalizacja pasuje do dowolnego kierowania lokalizacją skonfigurowanego dla formularza
    • W przypadku Shopify, twój koszyk spełnia wszelkie wymagania dotyczące zawartości koszyka skonfigurowane dla formularza.
• Jeśli formularz może wyświetlać się nowym odwiedzającym, uruchom test ponownie w nowym oknie incognito (prywatnym). Jeśli formularz jest ograniczony do istniejących profili, subskrybentów lub członków listy albo segmentu, użyj przeglądarki, którą Klaviyo rozpoznaje jako profil spełniający te warunki.
• Upewnij się, że z Twoją stroną zintegrowano tylko jedno konto Klaviyo. Dowiedz się więcej o integracjach.

Inne możliwe przyczyny niewyświetlania się formularza

• Jeśli na swojej stronie masz niestandardowy CSS, może on nadpisywać stylizację formularza lub ukrywać formularz. Poproś swoich programistę lub programistkę o to, by skorzystali z narzędzi dla deweloperów przeglądarki w celu zbadania kodu witryny i zidentyfikowania problemu. Możesz też skontaktować się z naszym zespołem ds. pomocy.
• Jeżeli korzystasz ze strony typu single page application („SPA”), Twoja konfiguracja może spowodować, że formularz czasem będzie się wyświetlał, a czasem nie. Aby uzyskać pomoc, skonsultuj się ze swoimi programistą bądź programistką.

Dodatkowe źródła