> ## 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.
# Benutzerdefinierte Web-SDK-Integration für Rokt Thanks
> Dieser Artikel richtet sich an Brands, die nicht den Shopify-Checkout verwenden, aber trotzdem die Rokt-Thanks-Angebote von Aftersell nutzen möchten.
Überblick
Wenn dein Store einen **benutzerdefinierten Checkout-Flow** verwendet, kannst du trotzdem auf Rokt-Thanks-Angebote zugreifen, indem du das **Rokt Web SDK** (ein kleines JavaScript-Snippet) installierst.
Die Installation des SDK ist in der Regel unkompliziert und erfordert nur minimale technische Kenntnisse. Bei Bedarf kann dich das technische Support-Team von Aftersell während des gesamten Prozesses unterstützen.
***
## Erste Fragen
Bevor du beginnst, beantworte die folgenden Fragen, um eine reibungslose Integration sicherzustellen:
1. **Kannst du (oder jemand aus deinem Engineering-Team) ein Code-Snippet zur Bestätigungsseite hinzufügen?**\
Die Bestätigungsseite, auch als **Danke-Seite** bekannt, erscheint unmittelbar nach dem Checkout.
2. **Welche Nutzerdaten oder Eigenschaften sind auf der Bestätigungsseite verfügbar?**\
Wir benötigen Zugriff auf [bestimmte Eigenschaften](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) zu gekauften Artikeln und Kundeninformationen. Je mehr Daten verfügbar sind, desto relevanter und genauer werden deine Rokt-Thanks-Angebote.
3. **Gibt es eine einfache Möglichkeit, mit JavaScript auf diese Daten zuzugreifen?**\
Kannst du zum Beispiel die Warenkorb- oder Bestelldetails auf der Bestätigungsseite abfragen?
***
## Implementierungsschritte
## Schritt 1: Prüfen und bestätigen
* Gehe die obigen Fragen durch und bestätige, auf welche Dateneigenschaften zugegriffen werden kann.
* Sobald du bereit bist fortzufahren, benötigst du eine **accountId**, die dir ein Aftersell-Engineer bereitstellt.
Um dein Konto zu erstellen, gib bitte die folgenden Details an:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## Schritt 2: Installationsmethode wählen
Entscheide, ob du:
* **die Integration selbst installieren** möchtest oder
* **direkt mit einem Aftersell-Engineer zusammenarbeiten** möchtest (für die begleitete Einrichtung kann eine Testumgebung erforderlich sein).
Wenn du dich für die Selbstinstallation entscheidest, kannst du der [**Dokumentation von Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) oder den unten zusammengefassten Schritten folgen.\
Nicht alle Schritte im Setup-Leitfaden von Rokt sind erforderlich, aber der Leitfaden dient als Referenz.
***
## Schritt 3: Das Integrationsskript installieren
a. **Kopiere das [Starter-Integrationsskript](#)** (unten bereitgestellt).
b. **Füge das Skript** zwischen den ``-Tags jeder Seite ein, auf der du ein Rokt-Thanks-Angebot anzeigen möchtest (in der Regel deine Bestellbestätigungsseite).
i. Befülle alle erforderlichen **Kunden- und Transaktionsdateneigenschaften**.
ii. Ersetze `"rokt_account_id_here"` durch die **accountId**, die dir dein Aftersell-Engineer bereitgestellt hat.
c. **Teste deine Implementierung** mit dem [Testleitfaden von Rokt](https://docs.rokt.com/developers/integration-guides/web/testing), um sicherzustellen, dass die Platzierungen korrekt geladen werden.
d. Arbeite mit unserem Team zusammen, um die Platzierung so anzupassen, dass sie zum Look-and-Feel deiner Brand passt.
## Eigenschaften (***fett und kursiv*** dargestellte Eigenschaften werden dringend empfohlen)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
Kunden-/Bestelleigenschaften
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
attributes: {
// Required
amount: '', //In $
firstname: '',
lastname: '',
billingzipcode: '',
Country: '',
Language: '',
currency: '',
cartItems: JSON.stringify(cartItems), //From above
email: '',
//Order Data
clientcustomerid: '',
cartId: '',
subtotal: '',
totalTax: '',
totalShipping: '',
margin: '',
paymenttype: '',
ccbin: '',
//Customer Data
customerType: '',
hasAccount: '',
isReturning: '',
lastVisited: '',
isLoyalty: '',
loyaltyTier: '',
mobile: '',
title: '',
age: '',
gender: '',
dob: '',
billingAddress1: '',
billingAddress2: '',
billingCity: '',
billingState: '',
billingCountry: '',
shippingAddress1: '',
shippingAddress2: '',
shippingCity: '',
shippingState: '',
shippingZipcode: '',
shippingCountry: '',
},
```
## Starter-Skript
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```