ヘルプセンター
/
カスタマーハブ
/
Customer Hub の設定
/
Customer Hub のスタートガイド

Headless Shopify でカスタマーハブを設定する方法

推定 2 分で読めます
|
更新日 2026年3月13日 0:00 EST

カスタマーハブをヘッドレス Shopify ストアフロントに接続します。ログインを有効にし、ウィジェット（お気に入り、FAQ）を表示し、アクティブ/最近閲覧した商品エクスペリエンスを強化して、エンゲージメントとコンバージョンを向上させます。

このページで学べること

カスタマーハブをヘッドレス Shopify ストアフロントに接続し、ログイン方法を選択して Hub を公開すると、買い物客はサイト全体でアクセスできるようになります。

Shopify 向け カスタマーハブは、現在標準のストアフロントと Shopify Headless をサポートしています。WooCommerce の場合は、https://help.klaviyo.com/hc/en-us/articles/47792369863451 に移動してください。

始める前に

要チェック

  • Storefront API へのアクセスを備えたヘッドレス Shopify ストアフロント（Shopify の Headless Admin での Storefront API（パブリック アクセス トークン／Storefront API パブリック キー））。
  • オンサイト JavaScript ローダーで使用される Klaviyo 会社 ID。
  • 購入者ログインの決定：Shopify Customer Account API または Klaviyo ワンタイムパスワード（OTP）。
    • 既存のアカウントを使用する場合は、ストアフロントのログイン、ログアウト、（任意で）アカウント管理と住所管理のルートを用意してください。
  • ストアフロント コードを編集して、変更をデプロイする機能。
  • オーナーや管理者など、カスタマーハブを編集する権限を持つアカウントロールです。カスタムロールの場合は、カスタマーハブの表示および編集権限を含めてください。
  • これらの機能を使用する場合は、カスタマーハブのトライアル、またはお気に入りとFAQを含むプランが必要です。

概要

カスタマーハブはサイト全体に表示されるオーバーレイで、お客様がアカウントの操作や便利なショッピングツールにより素早くアクセスできるようにします。ヘッドレスShopifyの場合は、Klaviyoのオンサイトスクリプトを接続し、ログイン方法（Shopify Customer Account APIまたはKlaviyo OTP）を選択し、必要に応じて次を追加します：

  • アクティブな商品：Hub 内で買い物客が閲覧している商品を表示します。
  • 最近閲覧した商品：Klaviyo のトラッキングを使用して、最近閲覧した商品を一覧表示します。
  • お気に入りとFAQのウィジェット：商品詳細ページ（PDP）とハブ内に表示されます。

ページ内の支援レイヤーによって商品発見とより迅速なチェックアウトを促進し、コンバージョンと生涯価値を向上させたい場合は、カスタマーハブを使用します。

設定

1. カスタマーハブの設定を構成する

まず、カスタマーハブのスタートガイドに従い、オンボーディングウィザードを完了してください。ヘッドレス設定の準備が整うまで、カスタマーハブを非表示のままにしてください。次に、カスタマーハブ > 設定に移動し、ヘッドレスShopify設定を見つけます。

Headless Shopify configurationをオンに切り替え、ShopifyのパブリックアクセストークンをStorefront API public keyに貼り付けてください。

購入者ログインで、既存のShopifyログインを使用するにはShopify Customer Account APIを選択するか、Klaviyoでのみ機能するログインにはKlaviyoワンタイムパスワード（OTP）を選択してください。

Shopify Customer Account APIを選択した場合は、ストアフロントのログインルートとログアウトルートを入力してください。アカウント管理ルートと住所管理ルートは任意です。これらのルートは、Hubとサイト間で買い物客をリダイレクトします。

Klaviyo One Time Password（OTP）を選択した場合は、ストア表示名と返信先メールアドレスを入力してください。返信先メールアドレスにgmail.comまたはklaviyo.comのアドレスは使用できません。

[保存]をクリックして設定を保存してください。Hubの公開ステータスを確認するには、[エディターを開く]をクリックしてください。以下のストアフロントの設定とテストが完了するまで、ステータスを[非表示]のままにしてください。

2. カスタマーハブJavaScriptを読み込む（開発者向け手順）

ヒント：すでに Klaviyo のオンサイト機能を実行している場合は、ローダーがすでに設置されている可能性があります。2 つ目のスクリプトを追加する前に確認してください。

次のローダーを使用して /public/customerHub.js（または同等のもの）を作成します（COMPANY_ID を、Company ID とも呼ばれる Klaviyo の 公開 API キー に置き換えます）。

javascript
// 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);

ルートレイアウト（例：root.tsx）で、すべてのページでオンサイトスクリプトが読み込まれるように、ローダーを含めます。コンソールメッセージ「Klaviyo JS script loaded successfully.」を探してください。

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

Hubの読み込みが完了すると、window.customerHubApiが使用可能になります。ローダーの成功メッセージは、スクリプトが読み込まれたことを確認します。以下に示すように、hydrateProductを呼び出す前にHub APIを待機してください。

3. カスタマーハブでアクティブな商品を表示する

次のスクリプトを商品ページのHTMLに追加し、your-product-handleを現在のShopifyの商品ハンドルに置き換えてください。ストアフロントでReactや他のクライアントサイドナビゲーションを伴うフレームワークを使用している場合は、商品の変更時に、そのフレームワークのページライフサイクルからhydration呼び出しを実行してください。

html
<!-- Product page HTML -->
<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>

デスクトップでは、ウェブチャットが有効になっている場合、ハブはチャットタブに現在の商品カードを表示できます。このカードはモバイルでは表示されません。

4. カスタマーハブで最近閲覧した商品を有効にする

商品ページに商品の閲覧のトラッキングを実装して、Klaviyoでこのメトリックを使用できるようにします。また、trackViewedItemを呼び出して、ハブ用に最近閲覧した商品を購入者のブラウザに保存します。構築済みのKlaviyo外部連携がないEコマースプラットフォームを外部連携するのトラッキング例に従ってください。

5. アカウントリンクの乗っ取りを有効にする

カスタマーハブがLiveの場合、末尾が/accountまたは/account/loginで終わるアカウントリンクを置き換えて、ハブが開くようにできます。カスタムアカウントアイコンからハブを開くには、リンクを#k-hubに設定してください。ストアフロントのアカウントページを引き続き開く必要がある場合は、アカウントリンクにdata-k-hub-ignoreを追加してください。

6. Shopify Customer Account API認証を接続（推奨）

Shopper loginでShopify Customer Account APIを選択した場合にのみ、この手順を完了してください。Klaviyo One Time Password（OTP）を選択した場合は、手順7に進んでください。

/api/authenticateCustomerHubにPOSTリクエストを受け付け、ログイン中の購入者のアクセストークンをKlaviyoに渡すサーバールートを追加します。例のCOMPANY_IDをKlaviyoの会社IDに設定してください。

次の例では、ShopifyのHydrogenフレームワークを使用しています。別のストアフロントを使用している場合は、サーバールートを使用しているフレームワークに合わせて調整してください。

text
// ./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});
  }
}

このルートとKlaviyoの設定内のストアフロントルートを構成すると、カスタマーハブが既存の顧客アカウントログインに接続できるようになります。

7. お気に入りウィジェットを追加する（推奨）

お気に入りとFAQは、カスタマーハブのドロワー内に表示できます。商品詳細ページにも追加できます。これにより、買い物客は閲覧中に商品を保存したり、回答を見つけたりできます。

まず、ハブエディターでお気に入りを有効にしてください。次に、カスタマーハブ > デザインに移動し、お気に入りを選択して、どのショッパーがサイト上のウィジェットを表示できるかを選択してください。公開をクリックしてウィジェット設定を保存し、次に以下のコンテナを商品ページに追加してください。Shopifyの商品IDの例を、現在の商品のIDに置き換えてください。

typescript
// 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}
  />
)

カスタマーハブが公開され、ウィジェットが購入者に表示されると、商品ページでお気に入りに追加をクリックできます。保存した商品は、Hubのお気に入りエクスペリエンスに表示されます。

8. FAQブロックを追加（推奨）

KlaviyoでFAQブロックを作成します。カスタマーハブ > デザインでFAQを選択し、商品ページに表示する質問を選んで、オンサイトの表示設定とデザインを設定します。以下のコンテナを追加する前に設定を保存するには、公開をクリックしてください。

現在のShopifyプロダクトIDを使用して、このコンテナを商品ページに追加してください。同じ選択済みFAQが複数の商品ページに表示されます。プロダクトIDでは、商品ごとに異なる質問は選択されません。

typescript
// 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ボタンは、表示設定に従って商品ページに表示されます。質問をクリックすると、カスタマーハブで回答が表示されます。

9.カスタマーハブをテストしてライブに設定する

本番環境にデプロイする前に、ステージング環境でストアフロントのコードをテストしてください。自動アカウントリンク乗っ取りとサイト上のお気に入りウィジェットにはLiveが必要なため、最終的な本番チェックに含めてください。

  1. 公開する準備ができたら、カスタマーハブ > 設定に移動し、エディターを開くをクリックしてください。
  2. 保留中のHubデザイン変更を保存してください。次に、ステータスのドロップダウンでライブを選択するか、Hubが非表示で未保存の変更がない場合は公開するをクリックしてください。
  3. カスタマーハブが公開されたことを確認できるまで待機してください。本番用ストアフロントで、ログインとログアウト、アカウントアイコン、有効になっている場合はデスクトップのChat商品カード、最近閲覧した商品、追加したお気に入りまたはFAQのウィジェットを確認してください。

ベストプラクティス

  • サポート上の問題を回避できるよう、テスト後にのみ本番環境へ公開してください。セットアップの準備が整うまで本番Hubを非表示にしておき、準備ができたらHubエディタで公開に設定してください。
  • PDPでアクティブな商品をハイドレーションして、Hubで商品コンテキストを利用できるようにし、買い物客がカートに追加しやすくします。効果を評価するために、コンバージョン率と受信者あたりの売上（RPR）をモニタリングしてください。
  • 最近閲覧した商品を表示できるようにし、閲覧ベースのフローをサポートするために、早い段階で商品トラッキングを実装してください。閲覧回復によるエンゲージメントと売上をモニタリングします。
  • お気に入りを追加して、買い物客が候補を簡単に保存できるようにします。リピート訪問とカート追加アクティビティを監視します。
  • 買い物客が閲覧している間に、配送、素材、返品に関する質問にFAQで回答できます。離脱とコンバージョン率をモニタリングします。
  • 利用可能な場合は、ログイン中の購入者の継続性を維持し、ログイン関連のサポート依頼の削減に役立てるために、Shopify Customer Account APIでサーバーサイド認証を使用してください。

成功の測定

アナリティクス > メトリックを使用して、商品の閲覧アクティビティをモニタリングします。フローとキャンペーンで下流のパフォーマンスを確認します。Eコマース収益ダッシュボードを使用して、カスタマーハブを有効にした後のコンバージョンと平均注文額（平均注文額）の変化を追跡します。

商品ページからのコンバージョン率、カート追加率、Hubを開いたセッション（計測されている場合）、受信者あたりの売上（リピート購入率）、およびViewed Productイベントに紐づく閲覧起点の売上を確認してください。

クイックチェック

  • 最近閲覧アクティビティが少ない場合は、商品のトラッキングを確認し、商品を閲覧イベントがプロファイルに紐付けられていることを確認してください。また、ブラウザベースの最近閲覧トラッキングも確認してください。
  • Hubからのカート追加アクティビティが少ない場合は、各PDPでアクティブな商品ハイドレーションが実行されていること、およびバリエーションと価格が正しいことを確認してください。
  • 少数のお気に入り追加の場合は、お気に入りスロットをメインの商品ページの行動喚起の近くに配置し、data-product-idが商品と一致することを確認してください。

トラブルシューティング

症状：サイトにカスタマーハブが表示されません。

考えられる原因： スクリプトが読み込まれていない、または Hub が 非表示 になっています。

修正：customerHub.jsが読み込まれること、会社IDが設定されていること、およびカスタマーハブがLiveであることを確認してください。ステータスを変更するには、カスタマーハブ > 設定 > エディタを開くに移動し、ステータスのドロップダウンを使用してください。

症状：コンソールに「Failed to load Klaviyo JS script.」と表示されます。

考えられる原因：スクリプト URL が正しくない、または 会社 ID がありません。

修正： https://static.klaviyo.com/onsite/js/<COMPANY_ID>/klaviyo.js を確認し、COMPANY_ID が入力されていることを確認してください。

症状：PDP で、ハブに Active Product カードが表示されません。

原因として考えられるのは、ハイドレーション呼び出しが欠落している、商品ハンドルが誤っている、またはモバイルでChatの商品カードを確認していることです。

修正：デスクトップで、ウェブチャットが有効になっている状態でチャットを開きます。待機ループが実行されることを確認し、正しい商品ハンドルでwindow.customerHubApi.hydrateProduct("<handle>")を呼び出します。

症状：最近閲覧したセクションが空です。

考えられる原因：商品トラッキングが不足しているか、不完全です。

修正：商品の閲覧イベントトラッキングとtrackViewedItemブラウザトラッキングを追加してください。認識されたプロファイル上でイベントを検証し、同じブラウザで最近閲覧した商品を確認してください。

症状：お気に入りまたは FAQ ウィジェットが PDP にレンダリングされません。

考えられる原因：コンテナの欠落、商品IDの誤り、非表示のウィジェット、またはその機能が含まれていないプラン。

修正：正しい商品IDで<div class="kl-hub-favorites-slot" data-product-id="..."></div>または<div class="klaviyo-faqs-slot" data-product-id="..."></div>を追加してください。Klaviyoで機能へのアクセスと表示を確認し、商品ページ用のFAQを選択してください。お気に入りウィジェットを表示するには、カスタマーハブもLiveになっている必要があります。

症状：アカウントアイコンをクリックしても Hub が開きません。

考えられる原因：アカウントのリンクがサポート対象のアカウントURLと一致していない、乗っ取り防止の対象外になっている、またはカスタマーハブが非表示になっています。

修正：カスタマーハブをライブに設定し、/accountまたは/account/loginで終わるアカウントリンクを使用するか、href="#k-hub"を設定してください。ハブを開く必要がないリンクからのみdata-k-hub-ignoreを削除してください。

症状：Shopify Customer Account APIを選択しているにもかかわらず、Hub内で購入者がログイン済みとして認識されません。

考えられる原因：/api/authenticateCustomerHub ルートがない、または API リクエストが失敗しています。

修正：Hydrogen の例（または同等のフレームワーク）を実装し、access_token と company_id を Klaviyo のログイン エンドポイントに送信して、レスポンスを返します。

FAQ

Q: ログインにはShopify Customer Account APIを使用する必要がありますか？

A: いいえ。代わりにKlaviyoワンタイムパスワード（OTP）を使用できます。すでにShopifyアカウントを使用している場合は、シームレスな体験のためにShopify Customer Account APIを介して接続してください。

Q: どのストアフロントのルートを提供する必要がありますか？

A：Shopify Customer Account APIの場合は、ログインルートとログアウトルートを指定してください。より詳細にリンクするには、アカウント管理ルートと住所管理ルートは任意です。

Q：ストアフロント 公開 API キーはどこで見つけられますか？

A：ShopifyのHeadlessチャネルにあるストアフロント用の公開アクセストークンを使用します。ShopifyのStorefront API設定ガイドに従ってから、公開トークンをKlaviyoのStorefront API公開キーフィールドに入力します。

Q:カスタマーハブでアカウントアイコンを置き換えられますか？

A：はい。カスタマーハブがライブの場合、末尾が/accountまたは/account/loginのリンクで、ハブを自動的に開くことができます。アカウントリンクを#k-hubに設定することもできます。

Q： Shopify Hydrogen は必須ですか？

A: いいえ。認証の例では Hydrogen を使用していますが、どのフレームワークでも /api/authenticateCustomerHub にサーバールートを実装して、アクセストークンと company_id を Klaviyo に投稿できます。

Q: お気に入りと FAQ を PDP 上および Hub 内に配置できますか？

A：はい。Klaviyoでお気に入りとFAQを設定してから、それらのコンテナdivを商品ページに追加してください。Hub内および商品ページでの表示は、選択した設定に従います。

この記事は役に立ちましたか？
この記事へのフィードバックは、上記のボタン・記入欄よりご提供ください。 サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ
同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。
コミュニティにアクセスする
パートナー
特定のタスクや継続的なマーケティング管理のためのサポートを、Klaviyo 認定エキスパートに依頼しましょう。
パートナーに依頼する
サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャル アシスタント
 利用可否は地域およびプランタイプによって異なります

ログイン