Zsynchronizuj Shopify formularz rejestracyjny z listą w Klaviyo

Przegląd

Ten przewodnik obejmuje synchronizację Twojego Shopify formularza rejestracyjnego z listą na Twoim Klaviyo koncie. Jako przykładów używamy 10 darmowych szablonów Shopify. plan Jeśli chcesz użyć tej metody do synchronizacji formularza z niestandardowego motywu, pamiętaj, że jeśli edytowałeś swój formularz rejestracyjny, może być konieczna edycja niektórych elementów w wycinku kodu źródłowego używanego poniżej.

Snippet, który dodajesz do pliku Shopify theme. liquid różni się nieco w zależności od Twojego szablonu. Wybierz motyw z poniższej listy i postępuj zgodnie z instrukcjami. Możesz również przejść na stronę płatności przejść do kasy naszej sekcji dotyczącej korzystania z niestandardowego motywu, jeśli nie widzisz swojego motywu na poniższej liście.

Motywy Shopify zawierające jQuery w wersji 3.2.1 lub wyższej

Użyj poniższego fragmentu kodu, aby zsynchronizować swój Shopify formularz rejestracyjny z listą na koncie Klaviyo. Pamiętaj, aby zaktualizować identyfikator listy w snippecie. Podstawowy proces wygląda następująco:

1. W panelu administracyjnym Shopify kliknij sklep internetowy, a następnie z listy rozwijanej Akcje kliknij Edytuj kod, aby otworzyć edytor internetowy.
2. Otwórz plik theme.liquid i wklej wycinek kodu źródłowego poniżej. Wklej fragment przed zamknięciem </body > </body>znacznik.


   <script type="text/javascript"> 
    $("input[name='kontakt[e-mail]']").on('blur', function(e) {
    e.preventDefault();
    var e-mail = $(this).val();
           var settings = {
    " async": true,
    " crossDomain": true,
    " url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
               "metoda": "POST",
    " nagłówki": {
                   "content-type": "application/x-www-form-urlencoded",
                   "cache-control": "no-cache"
               },
    " dane": {
                   "g": "LIST_ID",
                   "$fields": "$source",
                   "email": email,
                   "$source": "Shopify form"
               }
           };
    $.ajax(settings).done(function (response) {
               console.log(response);
           });
    });
   </script>

3. Na koncie Klaviyo wybierz listę, którą chcesz zsynchronizować i skopiuj identyfikator listy.
   
4. Z konta Shopify dodaj identyfikator listy do wycinka kodu źródłowego w pliku theme.liquid. Na tym etapie możesz również zmodyfikować $source tego formularza, jeśli chcesz.
   
5. Zapisz plik aktualizacja .theme.liquid.

Możesz teraz przetestować swój formularz rejestracyjny, aby upewnić się, że działa. Najpierw wpisz swój adres e-mail w formularzu. Następnie sprawdź swoją skrzynkę odbiorczą i potwierdź subskrypcję za pomocą wiadomości e-mail ze zgodą opt-in. Na koniec wyszukaj swój adres e-mail na koncie Klaviyo, aby potwierdzić, że Twój profil został dodany.

Jeśli nadal napotykasz trudności, skontaktuj się z naszym zespołem ds. pomocy.

Szablony Shopify z wersją jQuery niższą niż 3.2.1 lub bez jQuery

Użyj poniższego fragmentu kodu, aby zsynchronizować swój Shopify formularz rejestracyjny z listą na koncie Klaviyo. Pamiętaj, aby zaktualizować identyfikator listy w snippecie. Podstawowy proces wygląda następująco:

1. W panelu administracyjnym Shopify kliknij sklep internetowy, a następnie z listy rozwijanej Akcje kliknij Edytuj kod, aby otworzyć edytor internetowy.
2. Otwórz plik theme.liquid i wklej wycinek kodu źródłowego poniżej. Wklej fragment przed zamknięciem </body > </body>znacznik.


   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>var $KL = jQuery.noConflict(true);</script>
   < script type="text/javascript"> 
    $KL("input[name='kontakt[e-mail]']").on('blur', function(e) {
    e.preventDefault();
    var e-mail = $KL(this).val();
    var settings = {
    " async": true,
    " crossDomain": true,
    " url": "https://manage.kmail-lists.com/subscriptions/ external/subscribe",
    " metoda": "POST",
    " nagłówki": {
                   "content-type": "application/x-www-form-urlencoded",
                   "cache-control": "no-cache"
               },
    " dane": {
                   "g": "LIST_ID",
                   "$fields": "$source",
                   "email": email,
                   "$source": "Shopify form"
               }
           };
    $KL.ajax(settings).done(function (response) {
               console.log(response);
           });
    });
   </script>

3. Na koncie Klaviyo wybierz listę, którą chcesz zsynchronizować i skopiuj identyfikator listy.
   
4. Z konta Shopify dodaj identyfikator listy do wycinka kodu źródłowego w pliku theme.liquid. Na tym etapie możesz również zmodyfikować $source tego formularza, jeśli chcesz.
   
5. Zapisz plik aktualizacja .theme.liquid.

Możesz teraz przetestować swój formularz rejestracyjny, aby upewnić się, że działa. Najpierw wpisz swój adres e-mail w formularzu. Następnie sprawdź swoją skrzynkę odbiorczą i potwierdź subskrypcję za pomocą wiadomości e-mail ze zgodą opt-in. Na koniec wyszukaj swój adres e-mail na koncie Klaviyo, aby potwierdzić, że Twój profil został dodany.

Jeśli nadal napotykasz trudności, skontaktuj się z naszym zespołem ds. pomocy.

Korzystanie z niestandardowego motywu

Jeśli korzystasz z niestandardowego motywu, musisz najpierw zweryfikować wersję jQuery, z której korzysta Twój motyw, a następnie odpowiednio wybrać wycinek kodu źródłowego. Ponadto, jeśli Twój szablon zmodyfikował standardowy formularz rejestracyjny Shopify, będziesz musiał zmodyfikować fragment, aby kierował na wejście e-mail element z prawidłowym identyfikatorem.

1. Przejdź do swojej witryny i otwórz konsolę przeglądarki internetowej (jeśli używasz Chrome na Macu, możesz nacisnąć ⌥-⌘-J).
2. Poniższe polecenie zwraca aktualną wersję jQuery w Twojej witrynie: $.fn. 
   
3. Jeśli Twoja wersja jQuery to 3.2.1 lub wyż sza, możesz skorzystać z instrukcji w sekcji Motywy Shopify zawierające jQuery 3.2.1 lub wyższe.
4. Jeśli twoja wersja jQuery jest niższa niż 3.2.1, Możesz skorzystać z instrukcji w sekcji Motywy Shopify z wersją jQuery niższą niż 3.2.1.

Jeśli nadal napotykasz trudności, skontaktuj się z naszym zespołem ds. pomocy.

Zmodyfikuj źródło $ swojego formularza

W domyślnych snippetach na tej stronie, możesz zmodyfikować linię z $source": "Shopify formularz" jeśli chcesz zmienić właściwość $source, która pojawia się w profilu klienta w Klaviyo. Zmień tylko wartość tego wyrażenia. Na przykład aktualizacja do "$source": "Formularz strony głównej" ustawi $source użytkownika na jego profilu w następujący sposób:

Zachowaj ostrożność podczas modyfikowania elementów tego formularza. Jeśli okaże się, że Twój formularz nie działa poprawnie, kontakt klient pomoc lub spróbuj dodać formularz od podstaw przy użyciu domyślnego wycinka kodu źródłowego w tym artykule.