Så ställer du in Klaviyo Customer Hub med headless Shopify
Anslut Klaviyo Customer Hub till din headless Shopify-webbutik. Aktivera inloggning, visa widgetar (Favoriter, vanliga frågor) och driv produktupplevelser för Aktiva/Tidigare visade för att öka engagemang och konvertering.
Du kommer att lära dig
Du ansluter Klaviyo Customer Hub till en headless Shopify-butik, väljer en inloggningsmetod och publicerar Huben så att kunder kan komma åt den på hela webbplatsen.
Klaviyo Customer Hub för Shopify har för närvarande stöd för standardbutiker och Shopify Headless. För WooCommerce går du till https://help.klaviyo.com/hc/sv-se/articles/47792369863451
Om du har feedback om Klaviyo Customer Hub-funktionalitet kan du mejla customerhub@klaviyo.com.
Innan du börjar
Förkrav
- En headless Shopify-butik med åtkomst till Storefront API (Public access token/Storefront API public key i Shopifys Headless Administratör).
- Ditt Klaviyo-företags-ID (används av JavaScript-inläsaren på webbplatsen).
- Beslut om inloggning för kunder: Shopify Customer Account API eller Klaviyo One Time Password (OTP).
- Om du använder befintliga Konto ska du ha din butiks vägar för Logga in, Logga ut och (valfritt) Hantera konto och Hantera adresser redo.
- Möjlighet att redigera din webbshopskod och driftsätta ändringar.
- Vem kan konfigurera detta: Du behöver en kontoroll som kan redigera inställningarna för Klaviyo Customer Hub och publicera widget (Ägare, Administratör eller en anpassad roll som har skrivåtkomst till Innehåll och API-nyckel).
Översikt
Klaviyo Customer Hub är ett webbplatsövergripande överlägg som ger kunder snabbare åtkomst till kontoåtgärder och hjälpsamma shoppingverktyg. För headless Shopify ansluter du Klaviyos onsite-skript, väljer en inloggningsmetod (Customer Accounts API eller Klaviyo OTP) och kan valfritt lägga till:
- Aktiv produkt: visar produkten som en kund tittar på i hubben.
- Nyligen visade: listar nyligen visade produkter med hjälp av Klaviyos spårning.
- Widgetarna Favoriter och Vanliga frågor: renderas på PDP:er och i hubben.
Använd Klaviyo Customer Hub när du vill ha ett hjälplager på sidan som driver produktupptäckt och snabbare kassa, vilket förbättrar konvertering och livstidsvärde.
Konfiguration
1 – Konfigurera inställningar för Klaviyo Customer Hub
Följ först Komma igång med Klaviyo Customer Hub och slutför introduktionsguiden, precis som med alla andra konfigurationer. När detta är klart går du till Klaviyo Customer Hub > Inställningar. Du ser avsnittet Rubriklös Shopify-konfiguration.
Slå på Headless Shopify-konfiguration och klistra sedan in din offentliga API-nyckel för Storefront API från Shopifys Headless Administratör (offentlig åtkomsttoken).
Under Shopper login väljer du Shopify Customer Account API (rekommenderas så att alla dina storefront-appar kan dela Shopifys inloggning) eller Klaviyo One Time Password (OTP, fungerar bara med Klaviyo och loggar inte in kunder i några andra appar).
Om du väljer Shopify Customer Account API, anger du även dina Inloggning-, Utloggning- och valfria Hantera konto/Hantera adresser -rutter för butiken (används för omdirigeringar mellan Hubben och din webbplats).
Publiceringssynlighet: ställ in Klaviyo Customer Hub på Live.
2 – Läs in Klaviyo Customer Hub JavaScript (instruktioner för utvecklare)
Tips: Om du redan använder Klaviyos funktioner på webbplatsen kan du redan ha en loader på plats. Bekräfta innan du lägger till ett andra skript.
Skapa /public/customerHub.js (eller motsvarande) med följande inläsare (ersätt COMPANY_ID med din offentliga API-nyckel för Klaviyo, även känd som ditt företags-ID):
// customerHub.js
// TODO: Configuration
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);Skriptet på plats läses in på varje sida. Leta efter konsolmeddelandet: ”Klaviyo JS script loaded successfully.” I din root-layout (t.ex. root.tsx), inkludera inläsaren:
// root.tsx
return (
<html>
<body>
<script src="/customerHub.js" defer></script>
</body>
</html>
)Efter det här steget blir window.customerHubApi tillgängligt på sidor där hubben körs.
3 – Visa den Aktiva produkten i Klaviyo Customer Hub
Lägg till hydrate-anropet på din produktsida (PDP) så att den aktuella produkten visas i hubben:
<!-- 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>Hubben ska nu visa ett extra produktkort för den PDP som kunden tittar på på fliken "Chatt" om du har den aktiverad.
4 – Aktivera nyligen visade produkter i Klaviyo Customer Hub
Implementera spårning för Visad produkt så att Hub kan fylla i Nyligen visade artiklar och du kan använda mättalet på andra ställen i Klaviyo. Följande spårningskodsnuttar kan också läggas till direkt i din webbshop; instruktioner finns här i vår dokumentation för Klaviyo-utvecklare: Integrera en e-handelsplattform utan en färdig Klaviyo-integration.
5 – Aktivera övertagande av kontolänk
För att Klaviyos Klaviyo Customer Hub ska kunna öppnas när du klickar på Konto-ikonen i sidhuvudet i din webbshop måste du redan ha en befintlig a-tagg som refererar till en länk med /account (i så fall ersätter vi den automatiskt åt dig). Eller så kan du även definiera ikonlänken manuellt så att den pekar på #k-hub för att öppna panelen.
6 – Konfigurera Klaviyo Customer Hub med autentisering via Customer Accounts API (rekommenderas)
För att kunna använda din befintliga kundkonton- och autentiseringskonfiguration för butiken måste du i Klaviyo Customer Hub lägga till en ny API-rutt i din butik som hanterar att på ett säkert sätt skicka åtkomsttoken för en inloggad kund till våra tjänster. Det viktiga är att den nya API-rutten har ett namn och går att nå med ”/api/authenticateCustomerHub”.
Obs! Följande kodsnippetsexempel är för Shopifys Hydrogen-ramverk. Mer anpassade butiker kan kräva ytterligare lösningar, men den allmänna metoden beskrivs här.
// ./app/routes/api.authenticateCustomerHub.js
// TODO: Configuration
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,
});
}
// Send the access token to the 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();
// Return the actual response from Customer Hub with the same status code
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});
}
}När detta har konfigurerats, tillsammans med butikens rutter som definierats i Klaviyos inställningar, kommer Klaviyo Customer Hub att kunna länka till din befintliga autentiseringskonfiguration och erbjuda en smidig ingång till dina befintliga kundkonton.
7 – Lägg till widgeten Favoriter (rekommenderas)
Både Favoriter och Vanliga frågor och svar fungerar i Klaviyo Customer Hub-lådan. Du kan dock lägga till de här widgetarna även på PDP:er för extra engagemang.
Så här lägger du till en ingångspunkt för Favoriter på PDP:er och i Hubben:
// products.tsx
// Example identifiers:
// id: gid://shopify/Product/12345
// data-product-id: 12345
const gid = "gid://shopify/Product/12345";
const productId = gid.split('/').pop();
return (
<div
className="kl-hub-favorites-slot"
data-product-id={productId}
/>
)Shoppare kan nu klicka på Lägg till i favoriter på PDP:er; artikeln visas i hubbens Favoritartiklar.
8 – Lägg till FAQ-block (rekommenderas)
Precis som när du lägger till Favoriter är det lika enkelt att lägga till FAQ-block som att lägga till en div på din produktsida med produkt-ID:t skickat i för att rendera vanliga frågor som du kan redigera och designa i Klaviyo.
Lägg till ett block med produktspecifika vanliga frågor som du designar i Klaviyo:
// products.tsx
// Example:
const gid = "gid://shopify/Product/12345";
const productId = gid.split('/').pop();
return (
<div className="klaviyo-faqs-slot" data-product-id={productId} />
)FAQ-chips/knappar ska nu renderas på PDP:er om de är konfigurerade, och kan redigeras i Klaviyo
Bästa praxis
- Publicera i produktion först efter verifiering – håll staging dolt tills QA är klart; ställ sedan in Live för att exponera hubben. Effekt: färre supportproblem, snabbare tid till värde.
- Hydrera alltid den Aktiva Produkten på PDP:er – håller produktkontexten synlig i Hubben och uppmuntrar till att lägga i kundvagn. Påverkan: konverteringsfrekvens, återköpsfrekvens.
- Implementera spårning av visad produkt tidigt – fyller i Nyligen visade och låser upp bläddringsbaserade flöde. Påverkan: engagemang och intäkter från återställning av bläddring.
- Lägg till favoriter – skapar en sparåtgärd med låg tröskel och en bestående lista med favoriter. Effekt: återkommande besök, lägg i varukorgen.
- Använd vanliga frågor för invändningar — besvara frågor om frakt, material eller returer direkt för att minska avhoppen. Påverkan: konverteringsfrekvens.
- Föredra autentisering på serversidan med Customer Accounts API när det är tillgängligt – förbättrar kontinuiteten för inloggade kunder. Påverkan: upplevelsekvalitet, avledning av support.
Mäta framgång
Var du kan se resultat: Använd Analytics > Mättal för att övervaka aktiviteten för Viewed Product och efterföljande flöde-/kampanjresultat. Använd dina intäktsinstrumentpaneler för e-handel för att spåra förändringar i konvertering och genomsnittligt beställningsvärde efter att du har aktiverat Klaviyo Customer Hub. Viktiga mättal att hålla koll på: konverteringsfrekvens från PDP, add-to-cart-frekvens, sessioner med Hub-öppningar (om instrumenterat), intäkt per mottagare (RPR) och bläddringsdrivna intäkter kopplade till Viewed Product-händelser. Checklista för snabba åtgärder: Låg aktivitet för Nyligen visade? Verifiera att spårningssnippeten för Viewed Product avfyras och att händelser tillskrivs profiler. Låg add-to-cart från Hub? Säkerställ att Active Product -hydrering körs på varje PDP och att variationer/priser är korrekta. Få tillägg till Favoriter? Flytta Favoriter-platsen närmare PDP:ns primära CTA:er och bekräfta att data-product-id matchar produkten.
Felsökning
Symtom: Klaviyo Customer Hub visas inte på webbplatsen.
Trolig orsak: Skriptet laddas inte eller så är hubben Dold.
Åtgärd: Bekräfta att customerHub.js läses in (kontrollera konsolen), att företags-ID är inställt och att synligheten för Klaviyo Customer Hub är Live i Klaviyo Customer Hub > Inställningar.
Symptom: Konsolen visar ”Det gick inte att läsa in Klaviyo JS-skript.”
Trolig orsak: Felaktig skript-URL eller saknat företags-ID.
Åtgärd: Verifiera https://static.klaviyo.com/onsite/js/<COMPANY_ID>/klaviyo.js och att COMPANY_ID är ifyllt.
Symptom: Produktkortet Aktiv visas inte i hubben på PDP:er.
Trolig orsak: hydrateProduct anropas inte eller fel produkthandtag.
Åtgärd: Se till att vänteloopen körs och anropa window.customerHubApi.hydrateProduct("<handle>") med rätt produkthandtag.
Symptom: avsnittet Senast visade är tomt.
Trolig orsak: Spårning av visade produkter är inte implementerad.
Lösning: Lägg till spårningskodavsnittet Viewed Product från utvecklarguiden och verifiera händelser i Klaviyo.
Symptom: Favorit- eller FAQ-widgetar återges inte på PDP.
Trolig orsak: Saknad behållare eller fel attribut.
Åtgärd: Lägg till <div class="kl-hub-favorites-slot" data-product-id="..."> och/eller <div class="klaviyo-faqs-slot" data-product-id="..."> med rätt produkt-ID.
Symptom: Om du klickar på Konto-ikonen öppnas inte Hubben.
Trolig orsak: Länken i sidhuvudet pekar inte på /Konto eller #k-hub.
Åtgärd: Se till att kontoankaret använder /account (auto‐takeover) eller ställ in href="#k-hub".
Symptom: Besökare känns inte igen som inloggade i Hubben.
Trolig orsak: Saknad /api/authenticateCustomerHub-rutt eller misslyckad API-begäran.
Åtgärd: Implementera Hydrogen-exemplet (eller motsvarande för ditt ramverk), skicka access_token och company_id till Klaviyos inloggningsslutpunkt och returnera svaret.
Vanliga frågor
F: Måste jag använda Shopify Customer Accounts API för inloggning?
S: Nej. Du kan använda Klaviyo-engångslösenord (OTP) i stället. Om du redan använder Shopify-konton kan du ansluta via Customer Accounts API för en sömlös upplevelse.
F: Vilka storefront-rutter behöver jag ange?
A: Om du använder dina befintliga Konton ska du ange rutter för Inloggning och Utloggning; Hantera Konto och Hantera adresser är valfria för djupare länkning.
F: Var hittar jag den offentliga nyckeln för butiks-API?
S: I Shopifys Headless-administratör under Storefront API > Public access token (kallas även Storefront API public key).
F: Kan Klaviyo Customer Hub ta över min kontoikon?
A: Ja. Om ditt kontolänk i sidhuvudet använder /account kan Klaviyo Customer Hub öppnas automatiskt; du kan också peka den till #k-hub.
F: Krävs Shopify Hydrogen?
S: Nej. Autentiseringsexemplet använder Hydrogen, men alla ramverk kan implementera en serverrutt på /api/authenticateCustomerHub som skickar åtkomsttoken och company_id till Klaviyo.
Q: Kan Favoriter och vanliga frågor visas på PDP:er och i Hubben?
A: Ja. Lägg till respektive container-div:ar på PDP:er; de kommer också att visas i Hub-lådan.