Jak skonfigurować Klaviyo Customer Hub z Headless? Shopify

Około 9 min czytania

Zaktualizowano 16 paź 2025, 15:58 EST

Połącz Klaviyo Customer Hub ze swoją bezgłową witryną sklepu Shopify. Włącz logowanie, widżet powierzchniowy (Ulubione, FAQ) i zasil aktywni / ostatnio oglądane doświadczenia produktowe, aby zwiększyć zaangażowanie i konwersję.

Czego się dowiesz?

Połączysz Klaviyo Customer Hub z bezgłową witryną sklepu Shopify, wybierzesz metodę logowania i opublikujesz Hub, aby kupujący mieli do niego dostęp w całej witrynie.

Klaviyo Customer Hub obsługuje obecnie Shopify witryn sklepowych, w tym Shopify Headless. Dodatkowa platforma e-commerce pomoc jest planowana.

Aby uzyskać informacje zwrotne na temat funkcji Klaviyo Customer Hub, wyślij wiadomość e-mail na adres customerhub@klaviyo.com.

Kilka słów na początek

Wymagania wstępne

Bezgłowa witryna sklepowa Shopify z dostępem do witryny Storefront API (publiczny token dostępu / klucz publiczny witryny Storefront API w administratorze Headless Shopify).
Twój identyfikator firmy Klaviyo (używany przez wbudowany program ładujący JavaScript).
Podejmij decyzję o zalogowaniu się do sklepu: Shopify Konto klienta API lub Klaviyo Hasło jednorazowe (OTP).
1. Jeśli korzystasz z istniejącego konta, przygotuj opcje logowania, wylogowania i (opcjonalnie) zarządzania kontem i adresami.
Możliwość edycji kodu witryny sklepu i wdrażania zmian.
Kto może to skonfigurować: Potrzebujesz roli konta, która może edytować ustawienia Klaviyo Customer Hub i publikować widżet (właściciel, administrator lub niestandardowa rola, która ma dostęp do zapisu do treści i klucz API).

Przegląd

Klaviyo Customer Hub to nakładka na całą witrynę, która zapewnia kupującym szybszy dostęp do działań na koncie i pomocnych narzędzi zakupowych. W przypadku headless Shopify, łączysz się ze skryptem onsite Klaviyo, wybierasz metodę logowania (konto klienta API lub Klaviyo OTP) i opcjonalnie dodajesz:

aktywni Produkt: pokazuje produkt, który kupujący przegląda w hubie.
Ostatnio oglądane: lista ostatnio oglądanych produktów przy użyciu śledzenia Klaviyo.
Widżet ulubionych i najczęściej zadawanych pytań: renderuj na PDP i wewnątrz Hub.

Skorzystaj z Klaviyo Customer Hub, jeśli potrzebujesz warstwy pomocy na stronie, która ułatwia odkrywanie produktów i szybsze dokonywanie zakupów, poprawiając konwersję i wartość życiową.

Konfiguracja

1 - Skonfiguruj ustawienia Klaviyo Customer Hub

Najpierw wykonaj Pierwsze kroki z Klaviyo Customer Hub i ukończ kreator wdrażania, tak jak w przypadku każdej innej konfiguracji. Po zakończeniu przejdź do Klaviyo Customer Hub > Ustawienia. Zobaczysz sekcję konfiguracji Headless Shopify.

Włącz konfigurację Headless Shopify, a następnie wklej klucz publiczny Storefront API od administratora Headless Shopify (publiczny token dostępu).

W sekcji Logowanie kupującego wybierz konto klienta Shopify API (zalecane, aby wszystkie aplikacje sklepu mogły współdzielić login Shopify) lub Klaviyo One Time Password (OTP, działa tylko z Klaviyo i nie loguje kupujących do żadnych innych aplikacji).

Jeśli wybierzesz Shopify Konto klienta API, wprowadź również logowanie, wylogowanie i opcjonalne trasy Zarządzaj kontem/Zarządzajadresami (używane do przekierowań między Hubem a Twoją witryną).

Opublikuj widoczność: ustaw Klaviyo Customer Hub na Live.

2 - Załaduj Klaviyo Customer Hub JavaScript (instrukcje dla deweloperów)

Wskazówka: Jeśli korzystasz już z funkcji Klaviyo na miejscu, być może masz już ładowarkę. Potwierdź przed dodaniem drugiego skryptu.

Utwórz plik /public/customerHub.js (lub jego odpowiednik) z następującym programem ładującym (zastąp COMPANY_ID swoim Klaviyo kluczem publicznym API, znanym również jako identyfikator Twojej firmy):

// customerHub.js
// TODO: Konfiguracja
const COMPANY_ID = '';
const script = document.createElement('script');
script.src = `https://static.Klaviyo.com/onsite/js/${COMPANY_ID}/Klaviyo.js`;
script.async = true;
script.onload = () => { console.log('Klaviyo JS script loaded successfully'); };
script.onerror = () => { console.error('Failed to load Klaviyo JS script'); };
document.body.appendChild(script);

Skrypt lokalny ładuje się na każdej stronie. Poszukaj komunikatu konsoli: "Skrypt Klaviyo JS załadowany pomyślnie". W twoim głównym układzie (np. root.tsx), dołącz ładowarkę:

// root.tsx
return (
  <html>
    <body>
      < script src="/customerHub.js" defer></script>
    </body>
  </html>
)

Po wykonaniu tego kroku, window.customerHubApi staje się dostępny na stronach, na których działa Hub.

3 - Pokaż aktywny produkt w Klaviyo Customer Hub

Dodaj wywołanie hydratacji na stronie szczegółów produktu (PDP), aby bieżący produkt pojawił się w hubie:

<!-- products.tsx -->
< script type="text/javascript"> 
 (function() {
 function waitForCustomerHubApi() {
 return new Promise((resolve) => {
 const check = () => {
 if (window.customerHubApi && window.customerHubApi.hydrateProduct) {
            resolve();
          } else {
            requestAnimationFrame(check);
          }
        };
 check();
 });
 }
 waitForCustomerHubApi().then(() => {
      window.customerHubApi.hydrateProduct("your-product-handle");
    });
 })();
</script>

Hubpowinien teraz wyświetlać dodatkową kartę produktu dla PDP przeglądanego przez kupującego na karcie "Chat", jeśli masz ją włączoną.

4 - Włącz ostatnio oglądane produkty w Klaviyo Customer Hub

Zaimplementuj śledzenie ostatnio oglądanych produktów, aby hub mógł wypełniać ostatnio oglądane produkty i abyś mógł użyć metryki w innym miejscu na Klaviyo. Poniższe fragmenty śledzenia można również dodać bezpośrednio do witryny sklepu, instrukcje można znaleźć tutaj w naszej dokumentacji dla programistów Klaviyo: Zintegruj platformę e-commerce bez wbudowanego, wstępnie zbudowanego Klaviyo integracje.

5 - Włącz przejęcie łącza do konta

Aby Klaviyo'Klaviyo Customer Hub otworzyło się po kliknięciu ikony konta w nagłówku Twojego sklepu, musisz mieć już istniejący a-znacznik, który odwołuje się do linku z /konto (w takim przypadku automatycznie go dla Ciebie zastąpimy). Możesz też ręcznie zdefiniować łącze ikony, aby wskazywało na #k-hub w celu otwarcia szuflady.

6 - Skonfiguruj Klaviyo Customer Hub z uwierzytelnianiem konta klienta API (zalecane)

Aby korzystać z istniejącego konta klienta i konfiguracji uwierzytelniania w witrynie sklepu, Klaviyo Customer Hub będzie wymagać dodania nowej trasy API do witryny sklepu, która będzie obsługiwać bezpieczne przekazywanie tokenu dostępu logującego się klienta do naszych usług. Co ważne, nowa trasa API jest nazwana i może być docierana za pomocą "/API/authenticateCustomerHub".

Uwaga: poniższy przykład wycinka kodu źródłowego dotyczy frameworka Hydrogen Shopify, bardziej niestandardowe witryny sklepowe mogą wymagać dodatkowych obejść, jednak ogólne podejście zostanie tutaj opisane.

// ./app/routes/API.authenticateCustomerHub.js
// TODO: Konfiguracja
const COMPANY_ID = '';
export async function action({context}) {
 // Pull the Customer account API Client from your storefront's context
 const {customerAccount} = context;
 try {
 // Get the access token for the current customer
 const accessToken = await customerAccount.getAccessToken();
    if (!accessToken) {
 return new Response(JSON.stringify({message: 'User not logged in'}), {
        status: 200,
      });
 }
   // Wyślij token dostępu do Klaviyo Customer Hub API
    const response = await fetch(
 'https://atlas-app.services.klaviyo.com/api/onsite/headless-shopify-login',
      {
 method: 'POST',
 headers: {
          'Content-Type': 'application/json',
        },
 body: JSON.stringify({
          access_token: accessToken,
          company_id: COMPANY_ID,
        }),
 },
 );
 const responseData = await response.text();
    // Zwróć rzeczywistą odpowiedź z Klaviyo Customer Hub z tym samym kodem statusu
 return new Response(responseData, {
 status: response.status,
      headers: {
        'Content-Type':
          response.headers.get('content-type') || 'application/json',
      },
 });
 } catch (error) {
 return new Response(null, {status: 500});
 }
}.

Po skonfigurowaniu tego, a także tras sklepu zdefiniowanych w ustawieniach Klaviyo, Klaviyo Customer Hub będzie w stanie połączyć się z istniejącą konfiguracją uwierzytelniania i zapewnić płynny punkt wejścia do istniejącego konta klienta.

7 - Dodaj widżet Ulubione (zalecane)

Zarówno Ulubione, jak i najczęściej zadawane pytania będą działać w szufladzie Klaviyo Customer Hub. Możesz jednak dodać te widżety również na PDP, aby uzyskać dodatkowe zaangażowanie.

Aby dodać punkt dostępu do Ulubionych na PDP i w Hubie:

// products.tsx
// Przykładowe identyfikatory:
// id: gid://Shopify/Product/12345
// data-product-id: 12345
const gid = "gid://Shopify/Product/12345";
const productId = gid.podział('/').pop();

return (
 < div
 className="kl-hub-favorites-slot"
 data-product-id={productId}
  />
 )

Kupujący mogą teraz kliknąć przycisk Dodaj do ulubionych na PDP; pozycja pojawi się w zakładce Ulubione w hubie.

8 - Dodaj bloki FAQ (zalecane)

Podobnie jak w przypadku dodawania Ulubionych, dodawanie bloków FAQ jest tak proste, jak dodanie elementu div na stronie produktu z przekazanym identyfikatorem produktu w celu renderowania często zadawanych pytań, które możesz edytować i projektować w Klaviyo.

Dodaj blok FAQ dla konkretnego produktu, który zaprojektujesz w Klaviyo:

// products.tsx
// Przykład:
const gid = "gid://Shopify/Product/12345";
const productId = gid.podział('/').pop();

return (
 < div className="klaviyo-faqs-slot" data-product-id={productId} />
 )

Chipy/przyciski FAQ powinny teraz renderować się na PDP, jeśli są skonfigurowane i można je edytować w Klaviyo.

Najlepsze praktyki

Publikuj do wersji produkcyjnej dopiero po weryfikacji - ukryj staging do czasu zakończenia kontroli jakości; następnie ustaw Live, aby ujawnić Hub. Wpływ: mniej problemów z pomocą techniczną, krótszy czas uzyskania wartości.
Zawsze nawilżaj aktywny produkt na PDP - utrzymuje kontekst produktu widoczny w hubie i zachęca do dodania do koszyka. Wpływ: wskaźnik konwersji, wskaźnik powtórnych zakupów.
Wdróż wczesne śledzenie przeglądanych produktów - wypełnia ostatnio przeglądane i odblokowuje sekwencję opartą na przeglądaniu. Wpływ: zaangażowanie i przychody z odzyskiwania przeglądarek.
Dodaj ulubione - tworzy akcję zapisywania o niskim współczynniku tarcia i trwałą krótką listę. Wpływ: ponowne wizyty, dodawanie do koszyka.
Korzystaj z często zadawanych pytań - odpowiadaj na pytania dotyczące wysyłki, materiałów lub zwrotów, aby ograniczyć liczbę rezygnacji. Wpływ: wskaźnik konwersji.
Preferuj autoryzację po stronie serwera z kontem klienta API, jeśli jest dostępna - poprawia ciągłość dla zalogowanych klientów. Wpływ: jakość doświadczenia, odchylenie pomocy.

Pomiar sukcesu

Gdzie wyświetlić wyniki: Skorzystaj z metryki Analytics > , aby monitorować wyświetlaną aktywność produktu i dalszą sekwencję / wydajność kampanii. Skorzystaj z pulpitu e-commerce przychody / przychód, aby śledzić konwersję i średnią wartość zamówień po włączeniu Klaviyo Customer Hub. Kluczowe metryki do obserwowania: wskaźnik konwersji z PDP, wskaźnik add-to-cart, sesje z otwarciami Hub (jeśli są oprzyrządowane), przychody na odbiorcę (wskaźnik powtórnych zakupów) oraz przychody / przychody związane z przeglądaniem powiązane ze zdarzeniami Viewed Product. Lista kontrolna szybkich poprawek: Niski poziom ostatnio oglądanych aktywności? Sprawdź, czy snippet Viewed Product śledzenie jest uruchamiany, a zdarzenia są przypisywane do profilu. Niski poziom dodawania do koszyka z Hub? Upewnij się, że aktywni Product hydration działa na każdym PDP i że warianty/ceny są poprawne. Kilka ulubionych dodatków? Przesuń slot Ulubione w pobliże głównych wezwań do działania PDP i potwierdź, że data-product-id pasuje do produktu.

Rozwiązywanie problemów

Objaw: Klaviyo Customer Hub nie pojawia się na stronie.

Prawdopodobna przyczyna: Skrypt nie ładuje się lub Hub jest ukryty.

Poprawka: Upewnij się, że customerHub.js ładuje się (sprawdź konsolę), identyfikator firmy jest ustawiony, a widoczność Klaviyo Customer Hub jest aktywna w Klaviyo Customer Hub > Ustawienia.

Objaw: Konsola pokazuje "Nie udało się załadować skryptu Klaviyo JS".

Prawdopodobna przyczyna: Nieprawidłowy adres URL skryptu lub brak identyfikatora firmy.

Poprawka: Sprawdź https://static.Klaviyo.com/onsite/js/<COMPANY_ID>/Klaviyo.js i czy COMPANY_ID jest wypełniony.

Objaw: aktywni Karta produktu nie jest wyświetlana w hubie na PDP.

Prawdopodobna przyczyna: brak nazwy hydrateProduct lub nieprawidłowy uchwyt produktu.

Poprawka: Upewnij się, że działa pętla oczekiwania i wywołaj window.customerHubApi.hydrateProduct("<handle>" ). z odpowiednim uchwytem produktu.

Objaw: Ostatnio przeglądana sekcja jest pusta.

Prawdopodobna przyczyna: Wyświetlane śledzenie produktu nie zostało zaimplementowane.

Poprawka: Dodaj fragment śledzenia wyświetlanego produktu z przewodnika dla programistów i zweryfikuj zdarzenia w Klaviyo.

Objaw: Ulubione lub widżet FAQ nie są renderowane na PDP.

Prawdopodobna przyczyna: Brakujący kontener lub nieprawidłowy atrybut.

Poprawka: Dodaj <div class="kl-hub-favorites-slot" data-product-id="..."> i/lub <div class="klaviyo-faqs-slot" data-product-id="..."> z poprawnym identyfikatorem produktu.

Objaw: Kliknięcie ikony konta nie powoduje otwarcia aplikacji Hub.

Prawdopodobna przyczyna: Link nagłówka nie wskazuje na /konto lub #k-hub.

Poprawka: Upewnij się, że kotwica konta używa /konto (automatyczne przejmowanie) lub ustaw href="#k-hub".

Objaw: Kupujący nie są rozpoznawani jako logujący się w Hubie.

Prawdopodobna przyczyna: Brakująca trasa /API/authenticateCustomerHub lub nieudane żądanie API.

Poprawka: Zaimplementuj przykład Hydrogen (lub odpowiednik Twojego frameworka), wyślij access_token i company_id do punktu końcowego logowania Klaviyoi zwróć odpowiedź.

Najczęściej zadawane pytania

P: Czy muszę używać konta klienta Shopify API do logowania?

O: Nie. Zamiast tego możesz użyć Klaviyo One Time Password (OTP). Jeśli korzystasz już z konta Shopify, połącz się za pośrednictwem konta klienta API, aby uzyskać płynną obsługę.

P: Jakie trasy sklepowe muszę zapewnić?

O: Jeśli korzystasz z istniejącego konta, podaj ścieżki logowania i wylogowania; Zarządzaj kontem i Zarządzaj adresami są opcjonalne dla głębszego powiązania.

P: Gdzie mogę znaleźć klucz publiczny API Storefront?

O: W Shopify'Headless administrator pod Storefront API > Publiczny token dostępu (zwany również kluczem publicznym Storefront API ).

P: Czy Klaviyo Customer Hub może przejąć moją ikonę konta?

Tak. Jeśli link do konta w Twoim nagłówku używa /konto, Klaviyo Customer Hub może otworzyć się automatycznie; możesz również skierować go na #k-hub.

P: Czy Shopify Hydrogen jest wymagany?

O: Nie. Przykład uwierzytelniania wykorzystuje Hydrogen, ale każdy framework może zaimplementować trasę serwera pod adresem /API/authenticateCustomerHub, która wysyła token dostępu i identyfikator firmy do Klaviyo.

P: Czy Ulubione i najczęściej zadawane pytania mogą znajdować się na PDP i w Hubie?

Tak. Dodaj odpowiednie divy kontenera na PDP; pojawią się one również w szufladzie Hub.

Czy ten artykuł był pomocny?

Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność

Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.

Odwiedź stronę społeczności

Partnerzy

Zatrudnij certyfikowanego eksperta Klaviyo, który pomoże Ci w konkretnym zadaniu lub w ciągłym zarządzaniu marketingiem.

Zatrudnij partnera

Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
Dostępność różni się w–zależności od lokalizacji i typu planu.

Zaloguj się