Custom webshop integration guide

You want to see the retraced widgets in your custom webshop? Find out how to get started!

Prerequisites

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

Further, there must be already one product with an active product story on the retraced dashboard, that is publicly available on your website.

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:

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 colours 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: 
  };
</script>

Have a look how the data structure must look like.

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

The retraced component

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

<retraced-cards></retraced-cards>

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 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 can eliminate any parsing problems and you can force a specific SKU 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.