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

# So installierst du Rokt Thanks auf Tapcart

> Eine Einrichtungsanleitung für das TapCart App Studio

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

Rokt Thanks zeigt deinen Kunden personalisierte, nicht aufdringliche Angebote auf dem Bestätigungsbildschirm nach dem Kauf an. Es ist eine einfache Möglichkeit, mit jeder Bestellung passive Einnahmen zu erzielen, ohne das Kundenerlebnis zu beeinträchtigen.

Diese Anleitung zeigt, wie du Rokt Thanks über einen Custom Code Block in deiner TapCart-Mobile-App installierst. Die Einrichtung dauert nur wenige Minuten.

<div id="before-you-start">
  ## Bevor du beginnst
</div>

Du benötigst Folgendes:

* **TapCart-Enterprise-Plan** – Custom Code Blocks sind nur im Enterprise-Plan verfügbar. Wenn du dir bei deinem Plan unsicher bist, frage bei deinem TapCart-Ansprechpartner nach.
* **Deine Rokt Account ID** – dein Aftersell Account Manager stellt sie dir bereit. Wenn du sie noch nicht hast, melde dich einfach und wir senden sie dir zu.

<div id="step-1-create-a-custom-block">
  ## Schritt 1: Erstelle einen Custom Block
</div>

Melde dich in deinem TapCart-Dashboard an und öffne den App-Studio-Editor. Erstelle einen neuen Custom Block.

<div id="step-2-paste-the-code-snippet">
  ## Schritt 2: Füge das Code-Snippet ein
</div>

Wechsle im Custom-Block-Editor zum Dev-Bereich. Entferne jeglichen Platzhaltercode und füge das folgende Snippet ein:

```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">
    ### Ersetze deine Account ID
  </div>

  Suche im obigen Snippet die Zeile `accountId: "YOUR_ACCOUNT_ID"` und ersetze `YOUR_ACCOUNT_ID` durch die Account ID, die dir dein Aftersell Account Manager bereitgestellt hat.

  Speichere den Custom Block nach der Aktualisierung.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Schritt 3: Zu deiner Post-Purchase-Seite hinzufügen
</div>

Navigiere im visuellen Editor von TapCart zu deiner Post-Purchase-Seite. Ziehe den soeben erstellten Custom Block auf die Seite und lege ihn dort ab, wo die Angebote erscheinen sollen.

<div id="step-4-let-us-know">
  ## Schritt 4: Sag uns Bescheid
</div>

Sobald du die obigen Schritte abgeschlossen hast, informiere deinen Aftersell Account Manager. Wir schließen dann eine kurze Konfiguration auf unserer Seite ab und bestätigen dir, wenn alles live ist.

Das Snippet ist zunächst auf den Sandbox-Modus eingestellt (`sandbox: true`), wodurch Testangebote geladen werden, damit du das Placement in der Vorschau ansehen kannst. `sandbox` ist eine Option des Launchers im Snippet selbst, keine Einstellung auf unserer Seite. Sobald wir bestätigt haben, dass alles korrekt aussieht, bearbeite den Custom Block, ändere `sandbox: true` in `sandbox: false` und speichere. Ab diesem Zeitpunkt erzielst du Einnahmen.

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

| Schritt | Aktion                                                                                                       |
| ------- | ------------------------------------------------------------------------------------------------------------ |
| 1       | Erstelle einen Custom Block im App-Studio-Editor von TapCart                                                 |
| 2       | Füge das Code-Snippet in den Dev-Bereich ein (ersetze `YOUR_ACCOUNT_ID` durch deine tatsächliche Account ID) |
| 3       | Ziehe den Custom Block auf deine Post-Purchase-Seite                                                         |
| 4       | Benachrichtige deinen Aftersell Account Manager, damit wir die Einrichtung abschließen können                |

<div id="frequently-asked-questions">
  ## Häufig gestellte Fragen
</div>

**Muss ich den TapCart-Enterprise-Plan haben?**

Ja. Custom Code Blocks im App Studio erfordern den Enterprise-Plan von TapCart.

**Verlangsamt das meine App?**

Nein. Das Skript wird asynchron geladen und blockiert das Rendern deiner Seite nicht.

**Kann ich wählen, wo das Angebot auf der Seite erscheint?**

Auf jeden Fall. Sobald der Custom Block gespeichert ist, kannst du ihn im visuellen Editor von TapCart an jede beliebige Position auf deiner Post-Purchase-Seite ziehen.

**Welche Art von Angeboten sehen meine Kunden?**

Rokt Thanks liefert relevante, nicht aufdringliche Angebote von Premium-Werbetreibenden, die auf jeden Kunden zugeschnitten sind.