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

# Comment installer Rokt Thanks sur Tapcart

> Un guide de configuration pour TapCart App Studio

<div id="what-is-rokt-thanks">
  ## Qu'est-ce que Rokt Thanks ?
</div>

Rokt Thanks affiche des offres personnalisées et non intrusives à vos clients sur l'écran de confirmation post-achat. C'est un moyen simple de générer des revenus passifs sur chaque commande sans impacter l'expérience client.

Ce guide explique comment installer Rokt Thanks dans votre application mobile TapCart à l'aide d'un Custom Code Block. La configuration ne prend que quelques minutes.

<div id="before-you-start">
  ## Avant de commencer
</div>

Vous aurez besoin des éléments suivants :

* **Le plan TapCart Enterprise** — les Custom Code Blocks ne sont disponibles que sur le plan Enterprise. Si vous n'êtes pas sûr de votre plan, vérifiez auprès de votre représentant de compte TapCart.
* **Votre Rokt Account ID** — votre gestionnaire de compte Aftersell vous le fournira. Si vous ne l'avez pas encore, contactez-nous simplement et nous vous l'enverrons.

<div id="step-1-create-a-custom-block">
  ## Étape 1 : créer un Custom Block
</div>

Connectez-vous à votre tableau de bord TapCart et ouvrez l'éditeur App Studio. Créez un nouveau Custom Block.

<div id="step-2-paste-the-code-snippet">
  ## Étape 2 : coller l'extrait de code
</div>

Dans l'éditeur de Custom Block, passez à la section Dev. Effacez tout code d'exemple et collez l'extrait ci-dessous :

```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">
    ### Remplacez votre Account ID
  </div>

  Dans l'extrait ci-dessus, trouvez la ligne `accountId: "YOUR_ACCOUNT_ID"` et remplacez `YOUR_ACCOUNT_ID` par l'Account ID fourni par votre gestionnaire de compte Aftersell.

  Une fois la mise à jour effectuée, enregistrez le Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Étape 3 : ajouter à votre page Post Purchase
</div>

Accédez à votre page Post Purchase dans l'éditeur visuel de TapCart. Faites glisser le Custom Block que vous venez de créer sur la page et déposez-le là où vous souhaitez que les offres apparaissent.

<div id="step-4-let-us-know">
  ## Étape 4 : prévenez-nous
</div>

Une fois les étapes ci-dessus terminées, informez votre gestionnaire de compte Aftersell. Nous finaliserons une configuration rapide de notre côté et vous confirmerons quand tout sera en ligne.

L'extrait est initialement réglé en mode sandbox (`sandbox: true`), qui charge des offres de test afin que vous puissiez prévisualiser l'emplacement. `sandbox` est une option du launcher dans l'extrait lui-même, pas un paramètre de notre côté — donc une fois que nous avons confirmé que tout est correct, modifiez le Custom Block, changez `sandbox: true` en `sandbox: false`, puis enregistrez. Vous commencerez à générer des revenus à partir de ce moment-là.

<div id="summary">
  ## Résumé
</div>

| Étape | Action                                                                                                    |
| ----- | --------------------------------------------------------------------------------------------------------- |
| 1     | Créez un Custom Block dans l'éditeur App Studio de TapCart                                                |
| 2     | Collez l'extrait de code dans la section Dev (remplacez `YOUR_ACCOUNT_ID` par votre véritable Account ID) |
| 3     | Faites glisser le Custom Block sur votre page Post Purchase                                               |
| 4     | Informez votre gestionnaire de compte Aftersell afin que nous puissions finaliser la configuration        |

<div id="frequently-asked-questions">
  ## Questions fréquentes
</div>

**Dois-je être sur le plan TapCart Enterprise ?**

Oui. Les Custom Code Blocks dans App Studio nécessitent le plan Enterprise de TapCart.

**Cela va-t-il ralentir mon application ?**

Non. Le script se charge de manière asynchrone et ne bloquera pas le rendu de votre page.

**Puis-je choisir où l'offre apparaît sur la page ?**

Absolument. Une fois le Custom Block enregistré, vous pouvez le faire glisser à n'importe quel emplacement de votre page Post Purchase à l'aide de l'éditeur visuel de TapCart.

**Quel type d'offres mes clients verront-ils ?**

Rokt Thanks propose des offres pertinentes et non intrusives d'annonceurs premium, adaptées à chaque client.