Prerequisites

You must send us your actual store URL like mybrand.com to be whitelisted.

Further, there must be already one product on an order in the retraced dashboard.

Installation

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. In case e.g. the colors of a product are actually 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.
It contains objects of variant ID and the matching SKU.

Array

[
{id: "123", sku: "mysku-123"},
{id: "456", sku: "m4y5s6k7u"},
{id: "999", sku: "999-othersku"}]

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

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.

The retraced component

You can now place the retraced components anywhere. An example is:

<retraced-cards></retraced-cards>

If you fancy any other components, please find a lot of other options in the retraced components library.

Debug installation

In order to find out what went wrong, you can always just set hardcoded values for the retraced basic data layer. So, the shop, initial SKU and locale can be fixed set to e.g.:

window.retraced.initialSku = "mysku001"
window.retraced.shop = "www.mybrand.com"
window.retraced.locale = "en"

This way, you eliminate any parsing problems and you can force a specific SKU to appear to be matched with retraced.

Concerned about loading time?

We distibute the loader component for the snippets through CloudFlare CDN, which is the fastest worldwide CDN. That script, it determining 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 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.

Did this answer your question?