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

# كيفية تثبيت Rokt Thanks على Tapcart

> دليل إعداد لـ TapCart App Studio

<div id="what-is-rokt-thanks">
  ## ما هو Rokt Thanks؟
</div>

يعرض Rokt Thanks عروضًا مخصصة وغير مزعجة لعملائك على شاشة تأكيد ما بعد الشراء. إنها طريقة بسيطة لتوليد إيرادات سلبية من كل طلب دون التأثير على تجربة العميل.

يشرح هذا الدليل كيفية تثبيت Rokt Thanks داخل تطبيق TapCart للجوال الخاص بك باستخدام Custom Code Block. يستغرق الإعداد بضع دقائق فقط.

<div id="before-you-start">
  ## قبل البدء
</div>

ستحتاج إلى ما يلي:

* **خطة TapCart Enterprise** - كتل الشيفرة المخصصة متاحة فقط في خطة Enterprise. إذا لم تكن متأكدًا من خطتك، فتحقق من ذلك مع مندوب حسابك لدى TapCart.
* **معرّف حساب Rokt الخاص بك** - سيوفره لك مدير حسابك في Aftersell. إذا لم يكن لديك بعد، فما عليك سوى التواصل معنا وسنرسله إليك.

<div id="step-1-create-a-custom-block">
  ## الخطوة 1: إنشاء Custom Block
</div>

سجّل الدخول إلى لوحة تحكم TapCart وافتح محرر App Studio. أنشئ Custom Block جديدًا.

<div id="step-2-paste-the-code-snippet">
  ## الخطوة 2: لصق مقتطف الشيفرة
</div>

في محرر Custom Block، انتقل إلى قسم Dev. امسح أي شيفرة تعبئة موجودة والصق المقتطف أدناه:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
import * as React from "react"
 
export default function RoktPlacement({
  blockConfig,
  tapcartData,
  translations,
  pageState,
  useActions,
}) {
  const containerRef = React.useRef(null)
 
  React.useEffect(() => {
    const loadRokt = async () => {
      try {
        await new Promise((resolve, reject) => {
          if (document.getElementById("rokt-launcher")) {
            resolve()
            return
          }
          const script = document.createElement("script")
          script.type = "text/javascript"
          script.src =
            "https://apps.rokt.com/wsdk/integrations/launcher.js"
          script.fetchPriority = "high"
          script.crossOrigin = "anonymous"
          script.async = true
          script.id = "rokt-launcher"
          script.addEventListener("load", () => resolve())
          script.addEventListener("error", (error) => reject(error))
          document.head.appendChild(script)
        })
 
        const launcher = await window.Rokt.createLauncher({
          accountId: "YOUR_ACCOUNT_ID",
          sandbox: true,
        })
 
        await launcher.selectPlacements({
          identifier: "TapCart.success",
          attributes: {
            email: tapcartData?.customer?.email || "",
            firstname:
              tapcartData?.customer?.firstName || "",
            lastname:
              tapcartData?.customer?.lastName || "",
          },
        })
      } catch (error) {
        console.error("Rokt SDK failed to load:", error)
      }
    }
 
    loadRokt()
  }, [])
 
  return <div id="rokt-placeholder" ref={containerRef} />
}
```

<Info>
  <div id="replace-your-account-id">
    ### استبدل معرّف حسابك
  </div>

  في المقتطف أعلاه، ابحث عن السطر `accountId: "YOUR_ACCOUNT_ID"` واستبدل `YOUR_ACCOUNT_ID` بمعرّف الحساب الذي زوّدك به مدير حسابك في Aftersell.

  بعد التحديث، احفظ الـ Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## الخطوة 3: الإضافة إلى صفحة ما بعد الشراء
</div>

انتقل إلى صفحة Post Purchase الخاصة بك في المحرر المرئي لـ TapCart. اسحب الـ Custom Block الذي أنشأته للتو إلى الصفحة وأفلته حيثما تريد أن تظهر العروض.

<div id="step-4-let-us-know">
  ## الخطوة 4: أخبرنا
</div>

بمجرد إكمال الخطوات أعلاه، أخبر مدير حسابك في Aftersell. سننهي تكوينًا سريعًا من جانبنا ونؤكد لك عندما يصبح كل شيء مباشرًا.

المقتطف مضبوط في البداية على وضع الاختبار (`sandbox: true`)، الذي يحمّل عروضًا تجريبية حتى تتمكن من معاينة الموضع. `sandbox` هو خيار على المشغّل في المقتطف نفسه وليس إعدادًا من جانبنا — لذا بمجرد تأكيدنا أن كل شيء يبدو صحيحًا، حرّر الـ Custom Block وغيّر `sandbox: true` إلى `sandbox: false` واحفظ. ستبدأ في تحقيق الإيرادات من تلك اللحظة.

<div id="summary">
  ## الملخص
</div>

| الخطوة | الإجراء                                                                      |
| ------ | ---------------------------------------------------------------------------- |
| 1      | أنشئ Custom Block في محرر App Studio الخاص بـ TapCart                        |
| 2      | الصق مقتطف الشيفرة في قسم Dev (استبدل `YOUR_ACCOUNT_ID` بمعرّف حسابك الفعلي) |
| 3      | اسحب الـ Custom Block إلى صفحة Post Purchase الخاصة بك                       |
| 4      | أبلغ مدير حسابك في Aftersell حتى نتمكن من إنهاء الإعداد                      |

<div id="frequently-asked-questions">
  ## الأسئلة الشائعة
</div>

**هل يجب أن أكون على خطة TapCart Enterprise؟**

نعم. تتطلب كتل الشيفرة المخصصة في App Studio خطة Enterprise من TapCart.

**هل سيؤدي هذا إلى إبطاء تطبيقي؟**

لا. تُحمَّل الشيفرة بشكل غير متزامن ولن تمنع صفحتك من العرض.

**هل يمكنني اختيار مكان ظهور العرض على الصفحة؟**

بالتأكيد. بمجرد حفظ الـ Custom Block، يمكنك سحبه إلى أي موضع في صفحة Post Purchase الخاصة بك باستخدام المحرر المرئي لـ TapCart.

**ما نوع العروض التي سيراها عملائي؟**

يقدم Rokt Thanks عروضًا ملائمة وغير مزعجة من معلنين مميزين مصممة خصيصًا لكل عميل.