概要

デフォルトでは、Upcart は Shopify のカート機能を引き継ぐため、Klaviyo のようなサードパーティアプリがカートの更新を検知できなくなることがあります。幸い、Upcart を有効なまま Klaviyo の**カート追加(ATC)**トラッキングを復元する信頼性の高い方法が 2 つあります。始める前に、Klaviyo Onsite Tracking が正しく設定されていることを確認してください。セットアップガイドはこちらをご覧ください:
👉 Klaviyo オンサイトトラッキングのセットアップガイド

オプション 1: AJAX 互換性を使用する(最速のセットアップ)

Upcart には、Shopify のネイティブなカート更新の動作を公開することで、他のアプリとの互換性を復元する設定が含まれています。これを有効にすると、Klaviyo は再びカート追加イベントを検知できるようになります。

有効にする方法:

Upcart > Cart Editor > Settings > Cart settings に移動します
Advanced Settings までスクロールして展開します
Enhanced Ajax API compatibility にチェックを入れます
Save をクリックして結果をテストします

⚠️ 重要: Enhanced AJAX API Compatibility のトレードオフ
この設定は、ほとんどのストアでデフォルトで無効になっています。ストアが非標準の AJAX カート API を使用しており、Upcart がカート追加イベントをインターセプトできない場合にのみ有効にしてください。有効にすると、他のアプリがカートの動作をより制御できるようになり、リダイレクトループが発生したり、Upcart のドロワーを開く代わりに顧客が Shopify のカートページに送られたりすることがあります。この設定を有効にしてリダイレクトが発生する場合は、無効にして、代わりに手動の Upcart API(upcartRegisterAddToCart)を使用するオプション 2 に切り替えてください。この設定の完全なガイダンスについては、Enhanced AJAX API Compatibility を参照してください。

オプション 2(推奨): カスタム Klaviyo スクリプトを追加する

この方法は両方の利点を兼ね備えています。Upcart が完全な制御を維持しながら、Klaviyo のトラッキングも機能し続けます。

手順:

Upcart > Cart Editor > Settings を開きます
Custom HTML セクションまでスクロールします
ドロップダウンから Scripts (Before Load) を選択します
次のスクリプトを貼り付けます:

モダン API(推奨):

<script>
  function TrackATC(){
    var _learnq = window._learnq || [];
    _learnq.push(['track', 'Added to Cart']);
    console.log("Klaviyo ATC");
  }

  window.upcartSubscribeAddedToCart(function(event) { TrackATC(); });
  window.upcartSubscribeUpsellsAddedToCart(function(event) { TrackATC(); });
</script>

TrackATC 関数を含むブロック全体を貼り付けてください。サブスクライバーがこの関数を呼び出すため、2 行の upcartSubscribe… だけのスニペットでは、カートに追加するたびに Uncaught ReferenceError: TrackATC is not defined がスローされ、Klaviyo には何も送信されません。

レガシー API(引き続き動作しますが非推奨):

<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    fetch(`${window.location.origin}/cart.js`)  
      .then((res) =>  
        res.clone().json().then((data) => {  
          var cart = {  
            total_price: data.total_price / 100,  
            $value: data.total_price / 100,  
            total_discount: data.total_discount,  
            original_total_price: data.original_total_price / 100,  
            items: data.items,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>

このスクリプトの動作:

Upcart を使用して商品またはアップセルが追加されるたびに、Klaviyo に「Added to Cart」イベントを送信します
動作していることが確認できるように、ブラウザーのコンソールに確認メッセージ(Klaviyo ATC)を追加します

セットアップをテストする方法

Klaviyo との統合が正しく機能していることを確認するには:

Klaviyo のカート追加イベントのテストガイドに従います
ブラウザーの Console タブを使用して、商品を追加した後に「Klaviyo ATC」のログが表示されることを確認します
Klaviyo の分析ダッシュボードで ATC イベントデータを確認します

それでもトラッキングデータが表示されない場合は、Klaviyo のオンサイトスクリプトがインストールされ、有効になっていることを確認してください。サポートが必要な場合は、Klaviyo ヘルプセンターにお問い合わせください。

まとめ


方法	メリット	使用するタイミング
オプション 1 – AJAX 互換性を有効にする	最速のセットアップ、コード不要	他のアプリが干渉しない場合
オプション 2 – カスタムスクリプトを追加する	最も信頼性が高く、Upcart が制御を維持	オプション 1 でカートのリダイレクトが発生する場合

Klaviyo と Upcart を併用している場合、このガイドを使えば、cart drawer の体験を損なうことなくイベントをスムーズにトラッキングできるはずです。

さらにサポートが必要ですか? アプリ内サポートからお問い合わせください。

はじめに

カートモジュール

カート設定

スティッキーカートボタン

Multicart

カスタマイズ

アナリティクス

連携と互換性

請求とアカウント

トラブルシューティング

Upcart での Klaviyo のカート追加イベントトラッキング

概要

オプション 1: AJAX 互換性を使用する(最速のセットアップ)

有効にする方法:

オプション 2(推奨): カスタム Klaviyo スクリプトを追加する

手順:

このスクリプトの動作:

セットアップをテストする方法

まとめ

​概要

​オプション 1: AJAX 互換性を使用する(最速のセットアップ)

​有効にする方法:

​オプション 2(推奨): カスタム Klaviyo スクリプトを追加する

​手順:

​このスクリプトの動作:

​セットアップをテストする方法

​まとめ

概要

オプション 1: AJAX 互換性を使用する(最速のセットアップ)

有効にする方法:

オプション 2(推奨): カスタム Klaviyo スクリプトを追加する

手順:

このスクリプトの動作:

セットアップをテストする方法

まとめ