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

# Jak zainstalować Rokt Thanks na Tapcart

> Przewodnik konfiguracji dla TapCart App Studio

<div id="what-is-rokt-thanks">
  ## Czym jest Rokt Thanks?
</div>

Rokt Thanks wyświetla Twoim klientom spersonalizowane, nienachalne oferty na ekranie potwierdzenia po zakupie. To prosty sposób na generowanie pasywnego przychodu z każdego zamówienia bez wpływu na doświadczenie klienta.

Ten przewodnik pokazuje, jak zainstalować Rokt Thanks w aplikacji mobilnej TapCart za pomocą Custom Code Block. Konfiguracja zajmuje tylko kilka minut.

<div id="before-you-start">
  ## Zanim zaczniesz
</div>

Będziesz potrzebować:

* **Planu TapCart Enterprise** — Custom Code Blocks są dostępne tylko w planie Enterprise. Jeśli nie masz pewności co do swojego planu, zapytaj opiekuna konta TapCart.
* **Twojego Rokt Account ID** — przekaże go Twój opiekun konta Aftersell. Jeśli jeszcze go nie masz, po prostu napisz do nas, a go prześlemy.

<div id="step-1-create-a-custom-block">
  ## Krok 1: Utwórz Custom Block
</div>

Zaloguj się do panelu TapCart i otwórz edytor App Studio. Utwórz nowy Custom Block.

<div id="step-2-paste-the-code-snippet">
  ## Krok 2: Wklej fragment kodu
</div>

W edytorze Custom Block przejdź do sekcji Dev. Usuń wszelki kod zastępczy i wklej poniższy fragment:

```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">
    ### Zastąp swój Account ID
  </div>

  W powyższym fragmencie znajdź linię `accountId: "YOUR_ACCOUNT_ID"` i zastąp `YOUR_ACCOUNT_ID` identyfikatorem Account ID przekazanym przez Twojego opiekuna konta Aftersell.

  Po aktualizacji zapisz Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Krok 3: Dodaj do strony Post Purchase
</div>

Przejdź do strony Post Purchase w edytorze wizualnym TapCart. Przeciągnij utworzony przed chwilą Custom Block na stronę i upuść go w miejscu, w którym mają pojawiać się oferty.

<div id="step-4-let-us-know">
  ## Krok 4: Daj nam znać
</div>

Po wykonaniu powyższych kroków poinformuj swojego opiekuna konta Aftersell. Sfinalizujemy krótką konfigurację po naszej stronie i potwierdzimy, kiedy wszystko będzie aktywne.

Fragment kodu jest początkowo ustawiony w trybie sandbox (`sandbox: true`), który ładuje oferty testowe, abyś mógł/mogła zobaczyć podgląd rozmieszczenia. `sandbox` to opcja launchera w samym fragmencie, a nie ustawienie po naszej stronie — więc gdy potwierdzimy, że wszystko wygląda dobrze, edytuj Custom Block, zmień `sandbox: true` na `sandbox: false` i zapisz. Od tego momentu zaczniesz zarabiać.

<div id="summary">
  ## Podsumowanie
</div>

| Krok | Działanie                                                                                |
| ---- | ---------------------------------------------------------------------------------------- |
| 1    | Utwórz Custom Block w edytorze App Studio TapCart                                        |
| 2    | Wklej fragment kodu do sekcji Dev (zastąp `YOUR_ACCOUNT_ID` swoim faktycznym Account ID) |
| 3    | Przeciągnij Custom Block na stronę Post Purchase                                         |
| 4    | Powiadom swojego opiekuna konta Aftersell, abyśmy mogli sfinalizować konfigurację        |

<div id="frequently-asked-questions">
  ## Najczęściej zadawane pytania
</div>

**Czy potrzebuję planu TapCart Enterprise?**

Tak. Custom Code Blocks w App Studio wymagają planu Enterprise TapCart.

**Czy to spowolni moją aplikację?**

Nie. Skrypt ładuje się asynchronicznie i nie zablokuje renderowania strony.

**Czy mogę wybrać, gdzie na stronie pojawi się oferta?**

Oczywiście. Po zapisaniu Custom Block możesz przeciągnąć go w dowolne miejsce na stronie Post Purchase za pomocą edytora wizualnego TapCart.

**Jakie oferty zobaczą moi klienci?**

Rokt Thanks wyświetla trafne, nienachalne oferty od renomowanych reklamodawców, dopasowane do każdego klienta.