Prerequisites
You must first send us your actual store URL like mybrand.com to be whitelisted. You can either write us directly here via message or contact your dedicated Customer Success Manager.
Further, there must be already one product with an active product story on the Retraced dashboard, which is publicly available on your website.
Installation
We have 2 methods of product identification to enable you to get your product data. Using sku OR productExtendedIdentifier :
Using SKU:
The basic data layer
To get started, you can:
<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>
To fill out the correct information follow this table:
Variable | Explanation | Type | Example |
window.retraced.initialSku | The first selected SKU when entering the product page. | String | 0736347156260 |
window.retraced.shop | The host (not the full URL) of your shop. Typically what's in the browser URL bar, like mybrand.com, or www.otherbrand.com. | String | mybrand.com |
window.retraced.locale | The locale of your shop. You can fallback to the window.navigator locale. | String | en |
This will already give you a solid result for the initial page view.
The extended data layer
This is necessary if you want to implement variation changes for Retraced. For example, in case the colours of a product are showing different supply chains, you must use this approach.
Besides the basic data layer, we need the following:
For PHP:
<script name="retraced-tag">
window.retraced = {
...
variants: <?php echo json_encode($your_variants); ?>
};
</script>
For templated HTML like Shopify it looks like this:
<script name="retraced-tag">
window.retraced = {
...
variants: {{product.variants | json}}
};
</script>
Have a look how the data structure must look like.
Variable | Explanation | Type | Example |
window.retraced.variants | The variants of the shop. | Array | [ |
The extended data layer also requires you to change the URL on variation selection with the following query param style with the variant ID mapped in the previous variable.
https://mybrand.com/products/tshirt-cotton?variant=32568148885548
You can also look at the tag in our example Shopify store. If you inspect the DOM, you can see the values filled out.
Using product Extended Identifier:
To get your product info using the product extended identifier, your product should have product code property set on our side and have at least one variation with color and other attribute set as well. then you use a combination of the 3 of them productCode.productColor.otherAttribute to be set as a value for productExtendedIdentifier key as follows:
<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>
To fill out the correct information follow this table:
Variable | Explanation | Type | Example |
window.retraced.productExtendedIdentifier | A string of your your product identifier in this format productCode.color.otherAttribute | String | 1234.red.45 |
window.retraced.shop | The host (not the full URL) of your shop. Typically what's in the browser URL bar, like mybrand.com, or www.otherbrand.com. | String | mybrand.com |
window.retraced.locale | The locale of your shop. You can fallback to the window.navigator locale. | String | en |
The Retraced component
You can now place the Retraced tags or components anywhere. An example is:
<retraced-cards></retraced-cards>
Or use any other (or multile or all!):
<retraced-icons></retraced-icons>
<retraced-button-verified></retraced-button-verified>
Debug installation
In order to find out what went wrong, you can always just set hard-coded values for the Retraced basic data layer. So, the shop, initial SKU / productExtendedIdentifier and locale can be fixed set to e.g.:
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"
This way, you can eliminate any parsing problems and you can force a specific SKU / productExtendedIdentifier to appear to be matched with Retraced.
Concerned about loading time?
We distribute the loader component for the snippets through CloudFlare CDN, which is the fastest CDN worldwide. That script determines if there must be anything loaded from the components. We have a variety of components and only the necessary snippets are loaded afterwards.
To reduce any additional traffic, the component scripts are cached for at least several hours in the browser cache of the user. Thus, a reload of any component snippet will occur earliest 4h after the first product page visit.