Jak dodać formularz osadzania Klaviyo do Twojej witryny BigCommerce?

Czego się dowiesz

Dowiedz się, jak dodać formularz osadzania Klaviyo do witryny BigCommerce, co wymaga utworzenia formularza w Klaviyo, a następnie wklejenia jego kodu osadzania do plików witryny w miejscu, w którym ma się pojawić (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 osadzania w Klaviyo, musisz najpierw zintegrować się z BigCommerce, a następnie włączyć funkcjonalność formularza rejestracyjnego (zwaną również "onsite śledzenie"). Jeśli zaznaczyłeś ustawienie Automatycznie dodawaj Klaviyo onsite JavaScript podczas integracji z BigCommerce, wszystko jest gotowe. 

Jeśli nie:

1. Na stronie Klaviyo wybierz zakładkę integracje.
   
2. Kliknij BigCommerce.
3. Zaznacz ustawienie Automatycznie dodawaj javascript Klaviyo onsite.
4. Kliknij Zapisz.

Przykład w tym artykule wykorzystuje domyślny motyw Cornerstone BigCommerce. Pamiętaj, że Twój motyw może się różnić, podobnie jak nazwy niektórych plików lub lokalizacje wycinka kodu źródłowego.

Dodaj kod osadzania formularza do swojej witryny

Najpierw utwórz i opublikuj formularz osadzania w Klaviyo. W tej sekcji omówione zostaną kolejne kroki wklejania kodu osadzania formularza w witrynie BigCommerce, aby poprawnie wyświetlał i synchronizował dane.

1. Jeśli jeszcze tego nie zrobiłeś, skopiuj kod osadzania dla swojego formularza osadzania. Możesz uzyskać dostęp do kodu osadzania formularza, otwierając formularz w edytorze i klikając sekcję Targetowanie & zachowania.
   
2. Przejdź do swojej witryny i znajdź domyślny formularz rejestracyjny BigCommerce. Jeśli korzystasz z motywu Cornerstone, znajduje się on w stopce witryny.
   
   • Jeśli nie widzisz domyślnego formularza na swojej stronie:
     • Otwórz pulpit nawigacyjny BigCommerce.
     • Przejdź do Marketing > marketing e-mailowy
     • Zaznacz pole Zezwalaj na subskrypcje newsletter . Włącza to zbieranie zgody na e-mail od odwiedzających Twoją witrynę, a także dodaje domyślne pole Zarejestruj się e-mail na Twojej stronie BigCommerce. Jeśli to pole jest już zaznaczone i nadal nie widzisz domyślnego formularza, oznacza to, że Twój szablon może go nie zawierać.
3. Otwórz pulpit nawigacyjny BigCommerce, a następnie przejdź do Storefront > Themes.
4. W sekcji Bieżący motyw kliknij menu rozwijane Zaawansowane, a następnie wybierz opcję Edytuj pliki motywu.
   
   • Jeśli używasz domyślnego motywu, nie będziesz mógł wybrać tej opcji. Zamiast tego:
     
     • Kliknij Utwórz kopię, nadaj jej nazwę, a następnie wybierz Zapisz kopię. 
     • Po dodaniu go do sekcji Motywy wybierz 3 kropki, a następnie wybierz opcję Edytuj pliki motywu. Pamiętaj, że wszelkie wprowadzone zmiany będą miały zastosowanie tylko do edytowanego motywu i będziesz musiał zastosować motyw na swojej stronie internetowej, aby zobaczyć odzwierciedlone zmiany.
5. Na lewym pasku bocznym otwórz plik odpowiadający miejscu, w którym domyślny formularz pojawił się w Twojej witrynie. Jeśli domyślny formularz znajdował się w stopce, tak jak w przykładzie, przejdź do szablonów > components > common i kliknij plik footer.html.
6. Użyj skrótu wyszukiwania (Command+F na Macu lub Control+F w Windows), aby wyszukać słowo "newsletter" w pliku stopki.
   
7. W kodzie pod nim znajdź odniesienie do formularza. W przykładzie formularz jest przywoływany w innej ścieżce pliku: {{> components/common/subscription-form}}.
   
8. Na lewym pasku bocznym podążaj za ścieżką pliku, do którego odwołuje się kod (w tym przykładzie wybierz komponenty > common > subscription-form). W tym miejscu zobaczysz rzeczywiste komponenty domyślnego formularza.
   • Ponieważ domyślny nagłówek i język formularza pasują do reszty stylów naszej witryny, zastąpimy tylko rzeczywiste dane wejściowe formularza. W kodzie źródłowym możesz zobaczyć, że dane wejściowe domyślnego formularza są zawarte w formularzu <form> element <> .
9. Podświetl wszystko pomiędzy otwierającym i <form> zamykającym znacznikiem, a następnie wklej kod osadzania skopiowany z,Klaviyo aby zastąpić podświetlony tekst. 
   
10. Kliknij Zapisz i zastosuj plik, aby zastosować te zmiany w swojej witrynie.
    • Jeśli przycisk mówi tylko Zapisz plik, oznacza to, że plik, który właśnie edytowałeś, nie jest jeszcze twoją aktualną kompozycją. Musisz kliknąć Zapisz plik, a następnie przewinąć w górę i wybrać Edytuj pliki motywu > Zapisz > Użyj jako aktywnego motywu w prawym górnym rogu, aby zastosować motyw na swojej stronie internetowej. 

Po wklejeniu kodu osadzania, zapisaniu i zastosowaniu zmian w BigCommerce, przejdź z powrotem do swojej witryny i odświeżyć stronę. Twój formularz Klaviyo zostanie wyświetlony na Twojej stronie i rozpocznie dodawanie nowych subskrybentów do listy Klaviyo powiązanej z formularzem. 

Jeśli nie widzisz swojego formularza, zobacz rozwiązywanie problemów z osadzonymi formularzami.

Kolejne kroki

Następnie stwórz sekwencję powitalną, aby wywrzeć natychmiastowy wpływ na swojego nowego subskrybenta.

Dodatkowe źródła

• Tworzenie powitalnej sekwencji e-mailowej
• Jak wyłączyć powiadomienia e-mail wysyłane przez BigCommerce