跳转到主要内容

BigCommerce 集成: 蓝图片段

了解如何将 Blueprint 代码添加到您的 BigCommerce 店铺

作者：Paulius

Omnisend 代码片段将您的 BigCommerce 店铺与 Omnisend 连接，从而实现 购物车找回、销售跟踪、注册表单、产品选择器等功能。Omnisend 会自动为新店铺添加代码片段。如果您使用的是旧版本，则需要使用 BigCommerce 的 Script Manager 或通过编辑主题文件手动安装它们。

本文将解释如何添加 Blueprint 代码片段以完成您的 BigCommerce 集成。

使用 Stencil 主题？ 请遵循BigCommerce Stencil Snippets 指南，而不是

开始之前

  • 在添加代码片段之前，您需要连接您的 BigCommerce 店铺到 Omnisend

  • 您一次只能使用一种代码片段类型：Stencil 或 Blueprint。混合使用两者将导致功能失效。如果您不确定正在使用哪个主题，请查看 BigCommerce 的指南。

  • 切换主题时，您必须重新添加代码片段。主题更改会移除现有代码。

  • Omnisend 会自动为新的 BigCommerce 店铺添加代码片段。如果您看到如下所示的错误消息，则需要按照本指南中的步骤手动添加它们。

添加代码片段

您需要在您的 BigCommerce 店铺中，在不同的模板文件中添加五段代码片段。每个代码片段都跟踪客户旅程的特定部分——从页面浏览到购物车更新再到订单完成。

请仔细遵循每条说明，并确保更新代码中的 店铺 ID 占位符 (XXXXXX)。

步骤 1.查找您的店铺 ID

要激活跟踪代码片段，您必须将 XXXXXX 替换为您的实际店铺 ID。如果未使用正确的 ID，代码将无法运行。

您可以在登录到您的 BigCommerce 控制面板时，在 URL 中找到您的 shop ID。它通常显示为：https://store-XXXXXX.mybigcommerce.com/

地址栏中的 Store Hash

找不到店铺 ID？请查看BigCommerce 的指南 以获取分步说明。

步骤 2.添加代码片段到您的 BigCommerce 店铺

1. Google Analytics Tab 脚本

位置：Advanced Settings → Web Analytics → Google Analytics tab

如果已存在 Google Analytics 跟踪代码，请将 Omnisend 代码粘贴到 GA 标签下方。

<script type="text/javascript">
    // SOUNDEST-V6-1
    // Do not remove these comments, they are super important!
    window.SOUNDEST = window.SOUNDEST || {};
    // Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
    SOUNDEST.shopID = "XXXXXX";
    SOUNDEST.shopType = "bigcommerce";
    SOUNDEST.eventsHost = "https://events.soundestlink.com/";
    (function(r,s,c){try{if(0<r.length&&0<s.length&&0<c.length){var u=!0,e=null,l=[],p=function(n){var e,t,o,a=document.cookie.split(";"),i=n+"=";for(/mybigcommerce.com/.test(location.hostname)&&(i=n+"-"+r+"="),t=0;t<a.length;t+=1)0===(o=a[t].trim()).indexOf(i)&&(e=o.substring(i.length,o.length));return e},n=function(){if(!u&&0<l.length){for(var n=0;n<l.length;n++){var e=document.createElement("img"),t=["timestamp="+(new Date).getTime(),"shopBaseURL="+window.location.protocol+"//"+window.location.hostname+"/","shopID="+r,"shopType="+s,"orderID="+l[n],"source=ga"],o=p("omnisendAnonymousID"),a=p("omnisendSessionID"),i=p("omnisendContactID"),d=p("omnisendAttributionID");void 0!==o&&t.push("anonymousID="+o),void 0!==a&&t.push("sessionID="+a),void 0!==i&&t.push("contactID="+i),void 0!==d&&t.push("attributionID="+d),e.src=c+"events/saveNewsletterOrder/?"+t.join("&"),document.body.appendChild(e)}l=[]}};if(void 0!==window.pageTracker){var t=window.pageTracker._addTrans,o=window.pageTracker._addItem,a=window.pageTracker._trackTrans;window.pageTracker._addTrans=function(n){e=n,t.apply(this,arguments)},window.pageTracker._addItem=function(n){e=n,o.apply(this,arguments)},window.pageTracker._trackTrans=function(){null!=e&&-1===l.indexOf(e)&&l.push(e),e=null,n(),a.apply(this,arguments)}}else window.pageTracker={_addTrans:function(n){e=n},_addItem:function(n){e=n},_trackTrans:function(){null!=e&&-1===l.indexOf(e)&&l.push(e),e=null,n()}};"loading"!==document.readyState?(u=!1,n()):document.addEventListener?document.addEventListener("DOMContentLoaded",function(){u=!1,n()}):document.attachEvent("onreadystatechange",function(){"loading"!==document.readyState&&(u=!1,n())})}}catch(n){}})(SOUNDEST.shopID,SOUNDEST.shopType,SOUNDEST.eventsHost);
</script>

2. Panels/Footer.html 脚本


<script type="text/javascript">
    // SOUNDEST-V6-2-B
    // Do not remove these comments, they are super important!
    window.SOUNDEST = window.SOUNDEST || {};
    // Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
    SOUNDEST.shopID = "XXXXXX";
    SOUNDEST.shopType = "bigcommerce";
    SOUNDEST.baseURL = "https://omnisrc.com/";
    SOUNDEST.version = new Date().toISOString().slice(0, 13);
    SOUNDEST.productID = SOUNDEST.productID || "";
    SOUNDEST.additionalData = SOUNDEST.additionalData || {};
    SOUNDEST.additionalData.email = "%%GLOBAL_CurrentCustomerEmail%%";
    SOUNDEST.cartItems = "%%GLOBAL_CartItems%%";
    (function(t,e){try{if(t.length>0&&e.length>0&&window.location.hash.length>0&&"recoverCart"===JSON.parse(decodeURIComponent(window.location.hash.substring(1))).action){var i=document.createElement("div"),n=document.getElementById("soundest-container");i.id="soundest-cart";i.innerHTML='<div id="soundest-cart-overlay" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#ffffff;z-index:1100000001;opacity:0.9;"></div><img id="soundest-cart-loader" style="position:fixed;top:50%;left:50%;margin-top:-20px;margin-left:-20px;width:40px;height:40px;z-index:1100000002;border-width:0px;" alt="" src="'+t+"inshop/images/loading.gif?v="+e+'" width="40" height="40" />';n.appendChild(i)}}catch(f){}})(SOUNDEST.baseURL,SOUNDEST.version);
    (function(e,t){try{if(e.length>0&&t.length>0){var n=document.createElement("script"),c=document.getElementById("soundest-container");n.type="text/javascript";n.id="soundest-launcher";n.src=e+"inshop/bigcommerce-launcher.js?v="+t;c.parentNode.insertBefore(n,c)}}catch(f){}})(SOUNDEST.baseURL,SOUNDEST.version);
</script>

3. Snippets/ProductAddToCart.html 脚本

<script type="text/javascript">
    // SOUNDEST-V6-3-B
    // Do not remove these comments, they are super important!
    window.SOUNDEST = window.SOUNDEST || {};
    SOUNDEST.productID = "%%GLOBAL_ProductId%%";
</script>

4.Snippets/FastCartThickBoxContent.html 脚本

<!-- SOUNDEST-V6-4-B -->
<!-- Do not remove these comments, they are super important! -->
<!-- SOUNDEST-FASTCART-QUANTITY:%%GLOBAL_fastCartQuantity%% -->
<!-- SOUNDEST-FASTCART-PRICE:%%GLOBAL_fastCartProdTotal%% -->
<!-- SOUNDEST-FASTCART-LINK-IMAGE:%%GLOBAL_fastCartProdImg%% -->
<!-- SOUNDEST-CART-ITEMS:%%GLOBAL_fastCartNumItemsTxt%% -->

5.Snippets/CartItem.html 脚本

<!-- SOUNDEST-V6-5-B -->
<!-- Do not remove these comments, they are super important! -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-ID:%%GLOBAL_ItemId%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-QUANTITY:%%GLOBAL_ProductQuantity%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-VARIATION:%%GLOBAL_VariationId%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-PRICE:%%GLOBAL_ProductPrice%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-LINK-IMAGE:%%GLOBAL_ProductImage%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-ATTRIBUTES:%%GLOBAL_ProductOptions%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-EVENT:%%GLOBAL_EventDate%% -->
<!-- SOUNDEST-ITEM-%%GLOBAL_CartItemId%%-WRAPPING:%%GLOBAL_GiftWrappingName%% -->
<!-- SOUNDEST-CART-ITEMS:%%GLOBAL_CartItems%% -->

联系人同步

所有通过 BigCommerce 添加或更新的联系人将自动添加到您的 Omnisend 受众 → Contacts 联系人名单。这些联系人也将收到标签 source: bigcommerce。

这使您能够轻松地筛选和细分（Segment）从 BigCommerce 同步的联系人。您可以基于 标签是 source:bigcommerce 创建细分（Segment）。在此处了解有关细分的更多信息。

常见问题

为什么在我连接我的店铺后，snippets 没有自动安装？
自动代码片段安装适用于大多数新的 BigCommerce 店铺，但一些较旧的店铺或自定义 Blueprint 主题需要手动安装。连接您的店铺后，请在 10 分钟内检查 Script Manager。如果没有出现 Omnisend 脚本，请按照本指南中的手动安装步骤操作。

我可以同时使用 Blueprint 和 Stencil 代码片段吗？
不可以。同时使用两者将导致功能失效。请根据您的主题仅使用一种代码片段类型。如果您从 Blueprint 切换到 Stencil（反之亦然），请先移除旧的代码片段，然后添加正确的代码片段。

如果我已经在 Script Manager 中有 Omnisend 脚本，还需要添加 Blueprint 代码片段吗？

否 如果您在 BigCommerce → Storefront → Script Manager 中看到 Omnisend 脚本，则代码段已自动添加。请勿手动添加代码片段，因为重复的脚本将导致功能失效。

我添加了代码片段，但表单/弹窗仍然没有出现。我应该检查什么？

  1. 确认您已在所有五个代码片段中将 XXXXXX 替换为您的实际店铺 ID（不是完整 URL，仅是哈希值）。

  2. 前往 BigCommerce 中的 Storefront → Script Manager。确保您没有添加重复的脚本。

  3. 清除您的浏览器缓存并在无痕模式下测试。

需要帮助？通过应用内聊天联系我们的支持团队，或发送电子邮件（Email）至[email protected]

相关文章
BigCommerce 集成: Stencil Snippets
BigCommerce 集成: 自定义域名
BigCommerce 集成: 所需权限
连接您的BigCommerce店铺到Omnisend
BigCommerce 集成: 推送通知（Push Notification）设置
这是否解答了您的问题？