Voraussetzungen
Du musst uns zuerst deine Shop-URL (wie z.B. mybrand.com) schicken, damit sie auf die Whitelist gesetzt wird. Du kannst uns entweder hier direkt eine Nachricht schreiben oder dich an deinen Customer Success Manager wenden.
Außerdem muss bereits ein Produkt mit einer aktiven Produktstory auf dem Retraced-Dashboard vorhanden sein, das auf deiner Website öffentlich verfügbar ist.
Installation
Wir haben zwei Methoden zur Produktidentifikation, mit denen du deine Produktdaten abrufen kannst: entweder über (1) SKU oder (2) productExtendedIdentifier.
(1) Verwendung der SKU:
Die grundlegende Datenebene
Um loszulegen, kannst du Folgendes tun:
<script name="retraced-tag">
window.retraced = {
shop: "<?php echo $your_domain; ?>",
initialSku: "<?php echo $your_sku; ?>",
locale: "<?php echo $detected_locale; ?>" || (window.navigator ? window.navigator.language : "en") };
</script>
<script async src="https://rtcd.me/shop-components.js"></script>
Um die richtigen Informationen auszufüllen, folge dieser Tabelle:
Variabel | Beschreibung | Typ | Beispiel |
window.retraced.initialSku | Die erste ausgewählte SKU beim Aufrufen der Produktseite. | String | 0736347156260 |
window.retraced.shop | Der Host (nicht die vollständige URL) deines Shops. Das ist normalerweise das, was in der Adressleiste des Browsers steht, wie mybrand.com oder www.otherbrand.com. | String | mybrand.com |
window.retraced.locale | Die Spracheinstellung deines Shops. Du kannst auf die window.navigator-Spracheinstellung zurückgreifen. | String | en |
Das gibt dir bereits ein solides Ergebnis für die erste Seitenansicht.
Die erweiterte Datenebene
Diese ist notwendig, wenn du Variantenänderungen für Retraced implementieren möchtest. Zum Beispiel, wenn die Farben eines Produkts unterschiedliche Lieferketten anzeigen, musst du diesen Ansatz verwenden.
Zusätzlich zur grundlegenden Datenebene benötigen wir Folgendes:
Für PHP:
<script name="retraced-tag">
window.retraced = {
...
variants: <?php echo json_encode($your_variants); ?>
};
</script>
Für vorgefertigtes HTML wie bei Shopify sieht das so aus:
<script name="retraced-tag">
window.retraced = {
...
variants: {{product.variants | json}}
};
</script>
So muss die Datenstruktur aussehen:
Variabel | Beschreibung | Typ | Beispiel |
window.retraced.variants | Die Varianten des Shops. Es enthält Objekte mit der Varianten-ID und der passenden SKU. | Array | [ |
Die erweiterte Datenebene erfordert außerdem, dass du die URL bei der Auswahl einer Variante mit folgendem Abfrageparameter-Stil änderst, wobei die Varianten-ID in der vorherigen Variablen zugeordnet ist.
https://mybrand.com/products/tshirt-cotton?variant=32568148885548
Du kannst dir auch das Tag in unserem Beispiel-Shopify-Store anschauen. Wenn du das DOM inspizierst, siehst du die ausgefüllten Werte.
(2) Verwendung des erweiterten Produktidentifikators:
Um deine Produktinformationen mithilfe des erweiterten Produktidentifikators abzurufen, muss dein Produkt auf unserer Seite die Eigenschaft „Produktcode“ gesetzt haben und mindestens eine Variante mit Farbe und anderen Attributen aufweisen. Dann verwendest du eine Kombination aus den drei Angaben productCode.productColor.otherAttribute, um den Wert für den Schlüssel productExtendedIdentifier wie folgt festzulegen:
<script name="retraced-tag">
window.retraced = {
shop: "<?php echo $your_domain; ?>",
productExtendedIdentifier: "<?php echo $yourProductCode . '.' . $yourProductColor . '.' . $yourProductOtherAttribute; ?>",
locale: "<?php echo $detected_locale; ?>" || (window.navigator ? window.navigator.language : "en") };
</script>
<script async src="https://rtcd.me/shop-components.js"></script>
Um die richtigen Informationen auszufüllen, folge dieser Tabelle:
Variabel | Beschreibung | Typ | Beispiel |
window.retraced.productExtendedIdentifier | Ein String, der deinen Produkt-Identifikator in diesem Format enthält: productCode.color.otherAttribute | String | 1234.red.45 |
window.retraced.shop | Der Host (nicht die vollständige URL) deines Shops. Normalerweise das, was in der Adressleiste des Browsers steht, z.B. mybrand.com oder www.otherbrand.com. | String | mybrand.com |
window.retraced.locale | Die Spracheinstellung deines Shops. Du kannst auf die window.navigator-Spracheinstellung zurückgreifen. | String | en |
Die Retraced Komponente
Du kannst die Retraced-Tags oder -Komponenten nun überall platzieren. Ein Beispiel ist:
<retraced-cards></retraced-cards>
Or use any other (or multile or all!):
<retraced-icons></retraced-icons>
<retraced-button-verified></retraced-button-verified>
Schau dir unsere Shop-Komponentenbibliothek an, um Details zu den Optionen hier zu erhalten.
Debug Installation
Um herauszufinden, was schiefgelaufen ist, kannst du immer einfach feste Werte für die grundlegende Retraced-Datenebene setzen. Der Shop, die anfängliche SKU / der productExtendedIdentifier und die Spracheinstellung können beispielsweise fest auf Folgendes gesetzt werden:
for sku:
window.retraced.initialSku = "mysku001"
window.retraced.shop = "www.mybrand.com"
window.retraced.locale = "en"
for productExtendedIdentifier:
window.retraced.productExtendedIdentifier = "myProductCode.color.otherAttribute"
window.retraced.shop = "www.mybrand.com"
window.retraced.locale = "en"
Auf diese Weise kannst du alle Parsing-Probleme eliminieren und eine bestimmte SKU / einen productExtendedIdentifier erzwingen, damit sie mit Retraced abgeglichen werden.
Besorgt über die Ladezeit?
Wir verteilen die Loader-Komponente für die Snippets über das CloudFlare-CDN, das das schnellste CDN weltweit ist. Dieses Skript überprüft, ob Komponenten geladen werden müssen. Wir haben eine Vielzahl an Komponenten, und nur die notwendigen Snippets werden danach geladen.
Um zusätzlichen Datenverkehr zu reduzieren, werden die Komponentenskripte für mindestens mehrere Stunden im Browser-Cache des Nutzers gespeichert. Ein Neuladen eines beliebigen Komponentensnippets erfolgt daher frühestens 4 Stunden nach dem ersten Besuch einer Produktseite.