Jak dodać osadzony formularz Klaviyo do witryny BigCommerce
Czego się dowiesz?
Dowiedz się, jak dodać osadzony formularz Klaviyo do swojej witryny BigCommerce. Wymaga to utworzenia formularza w Klaviyo, a następnie wklejenia jego kodu osadzania do plików witryny w miejscu, w którym ma się wyświetlać (np. w stopce).
Ten przewodnik pokazuje, jak zastąpić domyślny formularz rejestracyjny BigCommerce formularzem osadzonym Klaviyo.
Kilka słów na początek
Przed utworzeniem formularza osadzanego w Klaviyo musisz najpierw zintegrować BigCommerce, a następnie włączyć funkcję formularzy rejestracyjnych (nazywaną też „śledzeniem na stronie”). Jeśli podczas integracji z BigCommerce zaznaczono ustawienie Automatycznie dodaj skrypt JavaScript Klaviyo na stronie, wszystko jest gotowe.
Jeśli nie:
- Wybierz zakładkę Integracje w Klaviyo.
- Kliknij BigCommerce.
- Zaznacz ustawienie Automatycznie dodaj javascript na stronie Klaviyo.
- Kliknij Zapisz.
W przykładzie w tym artykule użyto domyślnego motywu Cornerstone w BigCommerce. Pamiętaj, że motyw może się różnić, podobnie jak nazwy niektórych plików lub lokalizacje wycinków kodu źródłowego.
Dodawanie kodu osadzania formularza do witryny
Najpierw utwórz i opublikuj formularz osadzony w Klaviyo. W tej sekcji omówimy kolejne kroki wklejania kodu osadzenia formularza w witrynie BigCommerce, aby prawidłowo się wyświetlał i synchronizował dane.
- Jeśli jeszcze tego nie zrobiono, skopiuj kod osadzania dla osadzonego formularza. Dostęp do kodu osadzania formularza uzyskasz, otwierając formularz w edytorze i klikając sekcję Targeting & behavior.
- Przejdź do swojej witryny i znajdź domyślny formularz rejestracyjny BigCommerce. Jeśli używasz motywu Cornerstone, znajduje się on w stopce witryny.
- Jeśli na stronie nie widać formularza domyślnego:
- Otwórz pulpit BigCommerce.
- Przejdź do Marketing > marketing e-mailowy
- Zaznacz pole wyboru z etykietą Zezwalaj na subskrypcje newslettera. Umożliwia to zbieranie zgody na e-maile od odwiedzających Twoją stronę, a także dodaje domyślne pole zapisu na e-maile w Twojej witrynie BigCommerce. Jeśli to pole jest już zaznaczone, a mimo to nie widzisz domyślnego formularza, motyw może go nie zawierać.
- Otwórz pulpit BigCommerce, a następnie przejdź do Storefront > Themes.
- W sekcji Bieżący motyw kliknij menu rozwijane Zaawansowane, a następnie wybierz Edytuj pliki motywu.
- Jeśli używasz domyślnego motywu, nie będzie można wybrać tej opcji. Zamiast tego:
- Kliknij Utwórz kopię, nadaj jej nazwę, a następnie wybierz Zapisz kopię.
- Gdy zostanie dodany do sekcji Motywy, wybierz 3 kropki, a następnie wybierz Edytuj pliki motywu. Pamiętaj, że wszelkie wprowadzone zmiany będą dotyczyć tylko edytowanego motywu, a aby zobaczyć ich efekt, musisz zastosować ten motyw na swojej stronie internetowej.
- Na lewym pasku bocznym otwórz plik odpowiadający miejscu, w którym domyślny formularz pojawiał się w witrynie. Jeśli domyślny formularz znajdował się w stopce, jak w przykładzie, przejdź do szablon > komponenty > common i kliknij plik footer.html.
- Użyj skrótu wyszukiwania (Command+F na Macu lub Control+F w systemie Windows), aby wyszukać słowo „newsletter” w pliku stopki.
- W kodzie poniżej znajdź odwołanie do formularza. W przykładzie do formularza odwołano się w innej ścieżce pliku: {{> components/common/subscription-form}}.
- Na lewym pasku bocznym postępuj zgodnie ze ścieżką pliku wskazaną w kodzie (w tym przykładzie wybierz components > common > subscription-form). Stąd zobaczysz faktyczne komponenty domyślnego formularza.
- Ponieważ nagłówek i język domyślnego formularza pasują do stylów reszty naszej witryny, zamienimy tylko samo pole wejściowe formularza. W kodzie źródłowym widać, że pole wejściowe domyślnego formularza znajduje się w elemencie <form>.
- Zaznacz wszystko między otwierającymi i zamykającymi znacznikami <form>, a następnie wklej kod osadzenia skopiowany z Klaviyo, aby zastąpić zaznaczony tekst.
- Kliknij Zapisz i zastosuj plik, aby zastosować te zmiany w swojej witrynie.
- Jeśli przycisk pokazuje tylko Zapisz plik, oznacza to, że plik, który właśnie edytowano, nie jest jeszcze bieżącym motywem. Musisz kliknąć Zapisz plik, a następnie przewinąć do góry i wybrać Edytuj pliki motywu > Zapisz > Użyj jako aktywnego motywu w prawym górnym rogu, aby zastosować motyw do swojej witryny.
Po wklejeniu kodu osadzenia, zapisaniu i zastosowaniu zmian w BigCommerce wróć do swojej witryny i odśwież stronę. Osadzony formularz Klaviyo wyświetli się w witrynie i zacznie dodawać nowych subskrybentów do listy Klaviyo połączonej z formularzem.
Jeśli nie widzisz formularza, zapoznaj się z artykułem rozwiązywanie problemów z osadzonymi formularzami.
Kolejne kroki
Następnie utwórz sekwencję powitalną, aby natychmiast wywrzeć wpływ na nowych subskrybentów.
Dodatkowe źródła
- Tworzenie powitalnej sekwencji e-mailowej
Dowiedz się, jak utworzyć sekwencję e-maili wysyłanych bezpośrednio po tym, jak ktoś zasubskrybuje, aby otrzymywać wiadomości od Twojej marki. To kluczowy moment w cyklu życia klienta, ponieważ to Twoja szansa, aby przedstawić swoją firmę i ofertę produktową nowym, zainteresowanym potencjalnym klientom. W przypadku sekwencji powitalnej warto wykorzystać ten przejaw zainteresowania.
- Jak wyłączyć e-maile z powiadomieniami wysyłane przez BigCommerce
Dowiedz się, jak wyłączyć różne typy e-maili z powiadomieniami wysyłanych przez BigCommerce. Jeśli obecnie wysyłasz niektóre e-maile za pomocą BigCommerce — na przykład e-maile dotyczące porzuconego koszyka zakupowego lub statusu zamówienia — i planujesz zacząć wysyłać je za pośrednictwem Klaviyo, musisz wyłączyć te e-maile w BigCommerce, aby uniknąć ich podwójnego wysyłania.