> ## 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.

# تتبّع الإضافة إلى السلة في أداة خارجية

> أرسل أحداث سلة Aftersell إلى Klaviyo أو Triple Whale أو GA4 أو أي بكسل تحليلات باستخدام ناقل أحداث Cart SDK.

تتولى Aftersell عملية الإضافة إلى السلة بنفسها، مما يعني أن أدوات التحليلات التي تراقب طلبات السلة الافتراضية في Shopify قد لا تراها. الاشتراك في أحداث SDK يستعيد التتبع، ويمنحك حمولة بيانات أنظف من استخلاص Ajax API.

هذا هو الاستخدام الأكثر شيوعًا لـ SDK لدى التجار.

<div id="the-pattern">
  ## النمط
</div>

كل تكامل هو نفس الأسطر الثلاثة: اشترك في حدث، اقرأ الحمولة، أرسلها إلى أداتك.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  myAnalytics.track('Added to cart', {
    variantId: payload.item.variantId,
    title: payload.item.title,
    quantity: payload.item.quantity,
    value: payload.item.finalLinePrice / 100, // SDK prices are in cents
  });
});
```

الصقه في **Cart settings → Custom script → Initialization**. الاشتراك هو استدعاء إعداد، لذا فهو آمن في الأعلى تمامًا، ولا تحتاج إلى انتظار تحميل السلة.

<div id="klaviyo">
  ## Klaviyo
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return;

  window._learnq ??= [];
  window._learnq.push(['track', 'Added to Cart', {
    $value: state.totalPrice / 100,
    AddedItemProductName: payload.item.productTitle,
    AddedItemProductID: payload.item.productId,
    AddedItemVariantID: payload.item.variantId,
    AddedItemQuantity: payload.item.quantity,
    AddedItemPrice: payload.item.finalLinePrice / 100,
    ItemNames: state.items.map((line) => line.productTitle),
    CheckoutURL: `${window.location.origin}/cart`,
  }]);
});
```

تأكد أولًا من تثبيت [تتبع Klaviyo داخل الموقع](https://help.klaviyo.com/hc/en-us/articles/4425956184731). هذا النص البرمجي يطلق الحدث فقط؛ فهو لا يحمّل Klaviyo.

<div id="triple-whale">
  ## Triple Whale
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  window.TriplePixel('AddToCart', {
    item: payload.item.variantId,
    q: payload.item.quantity,
  });
});
```

<div id="google-analytics-4">
  ## Google Analytics 4
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  const line = payload.item;
  window.gtag('event', 'add_to_cart', {
    currency: window.aftersell.cart.actions.getCart().currency,
    value: line.finalLinePrice / 100,
    items: [{
      item_id: String(line.variantId),
      item_name: line.productTitle,
      item_variant: line.variantTitle,
      price: line.finalLinePrice / line.quantity / 100,
      quantity: line.quantity,
    }],
  });
});
```

<div id="other-events-worth-tracking">
  ## أحداث أخرى تستحق التتبع
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Cart viewed.
window.aftersell.cart.events.on('cart_opened', () => {
  myAnalytics.track('Cart viewed');
});

// Item removed.
window.aftersell.cart.events.on('item_removed', (payload) => {
  myAnalytics.track('Removed from cart', { variantId: payload.item.variantId });
});

// Checkout intent: fires just before the browser navigates.
window.aftersell.cart.events.on('checkout', () => {
  const state = window.aftersell.cart.actions.getCart();
  navigator.sendBeacon('/my-endpoint', JSON.stringify({
    event: 'checkout_started',
    value: state ? state.totalPrice / 100 : 0,
  }));
});
```

<Warning>
  استخدم [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) في معالج `checkout`. الصفحة على وشك التفريغ، وقد يُلغى استدعاء `fetch` عادي في منتصف الطريق. كما أنك **لا تستطيع إلغاء الدفع** من هذا المعالج؛ فهو إشعار وليس بوابة.
</Warning>

<div id="things-to-get-right">
  ## أمور يجب ضبطها بشكل صحيح
</div>

* **الأسعار بالسنتات.** اقسم على 100 للأدوات التي تتوقع مبلغًا عشريًا. [`formatMoney`](/ar/aftersell/cart/sdk-actions#formatmoneycents) مخصص للعرض فقط، لذا لا ترسل سلسلة منسّقة إلى أداة تحليلات.
* **زيادة الكمية ليست `item_added`.** الانتقال من 1 إلى 3 على سطر موجود يطلق `cart_updated` وليس `item_added`. إذا كانت أداتك بحاجة إلى رؤية ذلك، قارن مع الحالة السابقة داخل معالج `cart_updated`.
* **لا تتتبّع من `cart_updated` إذا كنت تقصد "تمت الإضافة".** فهو ينطلق عند كل تغيير، بما في ذلك عمليات الإزالة وتعديلات الكمية، لذا ستبالغ في الإبلاغ.
* **تحقق من الاحتساب المزدوج.** إذا كانت أداتك تلتقط الإضافة إلى السلة بالفعل بطريقة أخرى، فسيبلغ هذا النص البرمجي عنها مرتين. تحقق في العرض المباشر للأداة قبل الإطلاق.

<div id="testing-it">
  ## اختباره
</div>

أضف `console.log` إلى جانب استدعاء التتبع الخاص بك، ثم افتح وحدة تحكم المتصفح وأضف منتجًا:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  console.log('[tracking] item_added', payload.item.title);
  // …your tracking call
});
```

إذا لم يظهر السجل، فالنص البرمجي لا يعمل، لذا تحقق من أنه حُفظ في خانة **Initialization**. إذا ظهر السجل لكن الأداة لا تعرض شيئًا، فالمشكلة في تنسيق حمولة الأداة وليست في SDK.

<div id="where-to-go-next">
  ## إلى أين تذهب بعد ذلك
</div>

* **[الأحداث](/ar/aftersell/cart/sdk-events)**: كل حدث ومتى ينطلق.
* **[كائن السلة](/ar/aftersell/cart/sdk-cart-object)**: كل حقل يمكنك إرساله.
* **[تحليلات السلة](/ar/aftersell/cart/analytics)**: التقارير التي توفرها Aftersell جاهزة.