> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> この記事では、顧客が Upcart を使用してアイテムをカートに追加した際に、Klaviyo で正確なイベントトラッキングを有効にする方法を説明します。

<div id="overview">
  # 概要
</div>

デフォルトでは、Upcart は Shopify のカート機能を引き継ぐため、**Klaviyo** のようなサードパーティアプリがカートの更新を検知できなくなることがあります。幸い、Upcart を有効なまま Klaviyo の\*\*カート追加(ATC)\*\*トラッキングを復元する信頼性の高い方法が 2 つあります。

始める前に、**Klaviyo Onsite Tracking** が正しく設定されていることを確認してください。セットアップガイドはこちらをご覧ください:\
👉 [Klaviyo オンサイトトラッキングのセットアップガイド](https://help.klaviyo.com/hc/en-us/articles/4425956184731)

***

<div id="option-1-use-ajax-compatibility-fastest-setup">
  ## オプション 1: AJAX 互換性を使用する(最速のセットアップ)
</div>

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

<div id="how-to-enable">
  ## 有効にする方法:
</div>

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

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

この設定の完全なガイダンスについては、[Enhanced AJAX API Compatibility](/ja/upcart/enhanced_ajax_api_compatibility) を参照してください。

***

<div id="option-2-recommended-add-a-custom-klaviyo-script">
  ## オプション 2(推奨): カスタム Klaviyo スクリプトを追加する
</div>

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

<div id="steps">
  ## 手順:
</div>

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

モダン 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>
```

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

レガシー 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>
```

***

<div id="what-this-does">
  ## このスクリプトの動作:
</div>

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

***

<div id="how-to-test-your-setup">
  ## セットアップをテストする方法
</div>

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

* [Klaviyo のカート追加イベントのテストガイド](https://help.klaviyo.com/hc/en-us/articles/4425956184731)に従います
* ブラウザーの **Console** タブを使用して、商品を追加した後に「Klaviyo ATC」のログが表示されることを確認します
* Klaviyo の分析ダッシュボードで ATC イベントデータを確認します

それでもトラッキングデータが表示されない場合は、Klaviyo のオンサイトスクリプトがインストールされ、有効になっていることを確認してください。サポートが必要な場合は、[Klaviyo ヘルプセンター](https://help.klaviyo.com/hc/en-us)にお問い合わせください。

***

<div id="summary">
  ## まとめ
</div>

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

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

***

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