Custom webshop integration guide

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


You must first send us your actual store URL like 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.


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 async src=""></script>

To fill out the correct information follow this table:

Variable Explanation Type Example


The first selected SKU when entering the product page.



The host (not the full URL) of your shop. Typically what's in the browser URL bar, like, or



The locale of your shop. You can fallback to the window.navigator locale.



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); ?>

For templated HTML like Shopify it looks like this:

<script name="retraced-tag">
window.retraced = {

Have a look how the data structure must look like.






The variants of the shop.
It contains objects of variant ID and the matching SKU.


{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 variable.
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:

If you fancy any other components, feel free to reach out to us. 

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