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 strony gwarantuje jego działanie wraz 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. Skopiuj kod osadzania formularza z okna modalnego publikowania.
3. Wklej kod osadzania do plików swojej strony.

Kilka słów na początek

Zanim zaczniesz tworzyć formularz rejestracyjny, upewnij się, że masz włączoną na koncie Klaviyo funkcję formularzy rejestracyjnych. Opcja ta gwarantuje poprawne wyświetlanie na Twojej stronie formularzy opublikowanych w Klaviyo oraz synchronizację wszystkich niezbędnych danych. 

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

• włączoną funkcję formularzy rejestracyjnych, często określaną również jako „śledzenie aktywności na stronie”;
• kod osadzania wklejony na stronie w miejscu, w którym formularz ma być wyświetlany.

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.: w Klaviyo ulepszono sposób obliczania wyświetleń formularzy osadzonych, co umożliwia dokładniejszy pomiar zaangażowania odbiorców. Wyświetlenia takich formularzy są od teraz rejestrowane tylko, jeśli formularz będzie widoczny w rzutni użytkownika. To może skutkować zauważalną zmianą liczby wyświetleń i wzrostem wskaźnika wypełnień, zwłaszcza w przypadku formularzy osadzonych w stopce witryny – będą one zliczane tylko wtedy, gdy odwiedzający przewinie stronę w dół na tyle, by formularz częściowo wszedł do jego widoku. 

Dodawanie na stronę formularza osadzonego

Jeśli korzystasz z Shopify, BigCommerce lub WooCommerce, subskrybenci, którzy zarejestrują się za pośrednictwem widocznego na Twojej platformie formularza osadzonego, zostaną w ramach integracji automatycznie dodani do Twojej listy Klaviyo. Z tego powodu nie trzeba zastępować formularza osadzonego integracji formularzem z Klaviyo. Jeśli chcesz, aby subskrybenci byli dodawani do innej listy, możesz jednak utworzyć taki formularz w Klaviyo. 

Tworzenie i dostosowywanie w Klaviyo nowego formularza osadzonego

1. W menu nawigacyjnym Klaviyo po lewej stronie wybierz kartę Formularze rejestracyjne.
2. Wybierz opcję Utwórz formularz. Następnie będziesz mieć dwie opcje:
   • Spersonalizuj wstępnie zbudowany szablon z biblioteki formularzy. Kliknij listę rozwijaną obok opcji Wszystkie typy, a następnie wybierz opcję Osadzony, aby przefiltrować bibliotekę formularzy w celu wyświetlenia wszystkich wstępnie zbudowanych szablonów formularzy osadzonych.
   • Zacznij od pustego szablonu formularza osadzonego. W prawym górnym rogu wybierz opcję Utwórz nowy formularz.
3. Wyświetli się okno modalne edytora:
   • Nadaj formularzowi nazwę. 
   • Wybierz listę, do której nowy subskrybent zostanie dodany.
   • Potwierdź Osadzony jako wybrany typ formularza.
     
4. 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.
   

   Jeśli chcesz osadzić formularz w stopce strony, sugerujemy, żeby o adresy e-mail prosić tylko w celu zwiększenia liczby wyrażonych zgód marketingowych.

6. Kiedy formularz będzie gotowy, kliknij Opublikuj. Pamiętaj, że nie pojawi się on na Twojej stronie od razu – aby aktywować formularz, najpierw musisz wkleić na stronie kod jego osadzania.
7. W wyświetlonym oknie modalnym Opublikowano pomyślnie kliknij przycisk Kopiuj, aby skopiować kod osadzania do schowka. Kod ten należy wkleić do plików strony, które omawiamy w następnej sekcji tego artykułu.
   

Pamiętaj, że kod osadzania formularza znajdziesz również w edytorze formularzy na karcie Targetowanie i zachowanie.

Wklejanie na stronie kodu osadzania

Aby formularz się wyświetlał się na stronie, po jego opublikowaniu w Klaviyo i skopiowaniu kodu jego osadzania należy wkleić go do plików witryny. Miejsce wklejenia kodu zależy od tego, gdzie formularz ma się pojawić (np. w pliku motywu lub pliku konkretnej strony) oraz od typu integracji. 

Na poniższej liście znajdź platformę, z której korzystasz, a następnie przejdź do artykułu poniżej. Uzyskasz w nim bardziej szczegółowe wskazówki dotyczące wklejania kodu osadzania dla danej integracji. 

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 formularz ma się pojawić. 
  • Przejdź do Dodawanie kodu osadzania do swojej strony BigCommerce.
• Shopify
  W przypadku Shopify do szablonu strony dodaj aplikację Klaviyo formularzy osadzonych, a następnie wklej kod osadzania formularza.
  • Przejdź do Dodawanie kodu osadzania do swojej strony Shopify.
• Square
  W przypadku Square kod osadzania wklej w plikach witryny w miejscu, w którym formularz ma się pojawić.
  • Przejdź do Dodawanie kodu osadzania do swojej strony Square.
• WooCommerce
  W przypadku WooCommerce kod osadzania wklej do kodu HTML witryny. 
  • Przejdź do Dodawanie kodu osadzania do stopki strony WooCommerce.
• Inne platformy
  Jeżeli Twoja platforma nie została wymieniona powyżej lub używasz niestandardowej integracji, która nie integruje się natywnie z Klaviyo, aby formularz osadzony działał, na Twoją stronę trzeba wkleić dwa wycinki kodu źródłowego: 
   
  • Śledzenie aktywności na stronie (czyli Klaviyo.js) w celu włączenia funkcji formularzy rejestracyjnych: 
    • 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. 
      • Kod osadzania formularza można skopiować z karty Targetowanie i zachowanie edytora formularzy.

Kolejne kroki

Kiedy opublikujesz formularz osadzony w Klaviyo, wkleisz jego kod osadzania na swoją stronę i zapiszesz zmiany, przejdź do witryny i odśwież stronę.

Formularz osadzony powinien pojawić się na stronie w miejscu wklejenia kodu osadzania. 

Rozwiązywanie problemów z formularzami osadzonymi

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

• Odśwież pamięć podręczną przeglądarki.
• Upewnij się, że Twoja strona została prawidłowo zintegrowana z Klaviyo i jest aktywna.
• Sprawdź, czy masz na swoim koncie włączoną funkcję formularzy rejestracyjnych (czyli funkcję śledzenia aktywności na stronie).
• Upewnij się, czy po wklejeniu kodu osadzania na stronie zapisano wszelkie zmiany.
• W edytorze formularzy rejestracyjnych Klaviyo przejdź do sekcji Targetowanie i zachowanie, a następnie sprawdź następujące funkcje:
  • W sekcji Wyświetlanie, czy: 
    • wklejony na stronie kod osadzania jest zgodny z kodem otrzymanym od Klaviyo;
    • ustawienia urządzenia w Klaviyo odpowiadają urządzeniu, na którym wyświetlasz formularz.
  • W sekcji Targetowanie, czy:
    • spełniasz wszystkie zawężone ustawienia dotyczące odwiedzających;
    • formularz ustawiono tak, aby pokazywał się na wyświetlanym adresie URL i zawierał wszelkie wskazane parametry UTM;
    • Twoja lokalizacja należy do dowolnego zbioru lokalizacji geograficznych formularza;
    • Twój koszyk spełnia wszelkie wymagania dotyczące zawartości koszyka skonfigurowane dla formularza.
• Ponownie uruchom test w nowym oknie przeglądarki w trybie incognito („prywatnym”).
• 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 strona zawiera niestandardowy CSS, to może powodować konflikt z wycinkiem kodu do śledzenia aktywności na stronie przez Klaviyo (Klaviyo.js) i zakłócać działanie formularza. 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

• Kontaktowanie się z zespołem ds. pomocy
• Rozwiązywanie problemów z formularzami rejestracyjnymi
• Formularze rejestracyjne: pierwsze kroki