先决条件
必须首先将实际商店URL（如mybrand.com）发送给我们以列入白名单。可以直接在这里给我们写信，也可以联系客户成功经理。
此外，必须已经有一个产品在retraced平台上有一个激活的产品故事，这在网站上是公开的。
安装
有两种产品识别方法，能够获得产品数据。使用sku或productextendeidentifier：
使用SKU:
基础数据层
要开始，可以：
<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>
要填写正确的信息，请按下表填写：
变量 | 解释 | 类型 | 例子 |
window.retraced.initialSku | 进入产品页面时选择的第一个SKU | 字符串 | 0736347156260 |
window.retraced.shop | 商店主机（不是完整URL）。通常在浏览器的URL栏里，比如mybrand.com，或www.otherbrand.com. | 字符串 | mybrand.com |
window.retraced.locale | HTML Language code请查看如下链接 locale | 字符串 | en |
这将为初始页面视图提供一个可靠的结果。
扩展数据层
如果想实现变化这是必须的。比如不同的产品颜色显示不同的供应链，必须使用这种方法。
除了基础数据层，我们还需要
For PHP:
<script name="retraced-tag">
window.retraced = {
...
variants: <?php echo json_encode($your_variants); ?>
};
</script>
对于像Shopify这样的模板化HTML，它看起来是这样的：
<script name="retraced-tag">
window.retraced = {
...
variants: {{product.variants | json}}
};
</script>
看看数据结构应该是什么样的。
变量 | 解释 | 类型 | 例子 |
window.retraced.variants | 商店的变体。它包含不同ID的对象和匹配的SKU。 | 数组 | [ |
扩展数据层还要求使用以下查询参数样式更改变体选择的URL，并将变体ID映射到前一个变量中。
https://mybrand.com/products/tshirt-cotton?variant=32568148885548
也可以查看我们的示例Shopify商店中的标签example Shopify store。如果检查DOM，可以看到已填写的值。
使用产品扩展标识符:
要使用产品扩展标识符获取产品信息，产品应该设置产品代码属性，并且至少有一个颜色和其他属性设置的变体。然后使用其中三个的组合productCode.productColor.otherAttribute设置为productExtendedIdentifier键的值，如下所示：
<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>
按照表格填写正确的信息:
变量 | 解释 | 类型 | 例子 |
window.retraced.productExtendedIdentifier | 产品标识符的字符串，格式为productCode.color.otherAttribute | 字符串 | 1234.red.45 |
window.retraced.shop | 商店主机（不是完整URL）。通常在浏览器的URL栏里，比如mybrand.com，或www.otherbrand.com. | 字符串 | mybrand.com |
window.retraced.locale | HTML Language code请查看如下链接 locale | 字符串 | en |
Retraced组件
现在可以将retraed标记或组件放置在任何地方。一个例子是：
<retraced-cards></retraced-cards>
Or use any other (or multile or all!):
<retraced-icons></retraced-icons>
<retraced-button-verified></retraced-button-verified>
调试安装
为了找出哪里出了问题，可以为retraced基本数据层设置硬编码值。因此，商店、初始SKU / productExtendedIdentifier和区域设置可以固定设置为：
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"
通过这种方式，可以消除任何解析问题，并且可以强制特定SKU / productExtendedIdentifier与retraced匹配。
担心装载时间？
我们通过CloudFlare CDN分发片段的加载器组件，这是全球最快的CDN。该脚本确定是否必须从组件加载任何内容。我们有各种各样的组件，之后只加载必要的代码片段。
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.