Installing Web Tracking in BigCommerce Stencil Theme Editor

Important note: Remarkety currently supports Abandoned Cart emails for the Stencil theme framework only. If your store is still on Blueprint, you will not be able to use the Abandoned Cart campaigns.

If you are on Stencil, here's how to easily set up Remarkety's tracking and abandoned cart support:

Step 1: Adding Remarkety's tracking code to the "Footer Scripts" box 

1. Login to the store's back end.

2. Go to "Storefront Design" > "Footer Scripts"
bc_stencil_1.png

 

3. Add the following code to the scripts box:

<script type="text/javascript" src="https://d3ryumxhbd2uw7.cloudfront.net/bigcommerce/rmBcUtils.js"></script>
<script>var _rmData = _rmData || [];
   _rmData.push(['setStoreKey', 'STORE_ID']);
   {{#if customer}}
     _rmData.push(["setCustomer", "{{customer.email}}"]);
   {{/if}}
   {{#if product}}
    var _rmData = _rmData || [];
    _rmData.push(['productView', {
       productId: {{product.id}},
       productCategories: [],
       productCategoriesIds: [],
    }]);
   {{/if}}
</script>
<script>(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = 'https://d3ryumxhbd2uw7.cloudfront.net/webtracking/track.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));</script>

4.  Make sure to replace STORE_ID with the store id from the API Key page on Remarkety - https://app.remarkety.com/account/storesettings#tab_api_keys
1.png

5. Save :)

 

Step 2: Adding the cart updates script

  1. Go to "My Themes" > "Customize" > "Edit Theme Files"
  2. Open template file: templates > pages > cart.html
  3. Add the following code to the end of the "cart.html" template file before {{/partial}}:
    <!-- Remarkety cart update start -->
    <script>
    {{inject "cartItems" cart.items}} {{inject "cartCoupons" cart.coupons}} {{inject "cartShipping" cart.shipping_handling}} {{inject "cartGrandTotal" cart.grand_total}} {{inject "cartSubTotal" cart.sub_total}}
    var rmJSContext = JSON.parse({{jsContext}});
    var rmCart = { items: rmJSContext.cartItems, grand_total: rmJSContext.cartGrandTotal, sub_total: rmJSContext.cartSubTotal, shipping_handling: rmJSContext.cartShipping, coupons: rmJSContext.cartCoupons };
    var _rmData = _rmData || [];
    var rmCartUpdate = function(t){ t = t || 0; if(typeof rmBcUtils === "object"){ _rmData.push(["track", "carts/updated", rmBcUtils.stencilCartMapper(rmCart)]); } else if(t < 5){ window.setTimeout(function(){rmCartUpdate(t+1)}, 1000); }}
    rmCartUpdate();
    </script>
    <!-- Remarkety cart update end -->
  4. Click "Save & apply file".
  5. Open template file: templates > components > cart > preview.html
  6. Add the following code to the end of the "preview.html" template file:
    <!-- Remarkety cart update start -->
    <script>
    {{inject "cartItems" cart.items}} {{inject "cartCoupons" cart.coupons}} {{inject "cartShipping" cart.shipping_handling}} {{inject "cartGrandTotal" cart.grand_total}} {{inject "cartSubTotal" cart.sub_total}}
    var rmJSContext = JSON.parse({{jsContext}});
    var rmCart = { items: rmJSContext.cartItems, grand_total: rmJSContext.cartGrandTotal, sub_total: rmJSContext.cartSubTotal, shipping_handling: rmJSContext.cartShipping, coupons: rmJSContext.cartCoupons };
    var _rmData = _rmData || [];
    var rmCartUpdate = function(t){ t = t || 0; if(typeof rmBcUtils === "object"){ _rmData.push(["track", "carts/updated", rmBcUtils.stencilCartMapper(rmCart)]); } else if(t < 5){ window.setTimeout(function(){rmCartUpdate(t+1)}, 1000); }}
    rmCartUpdate();
    </script>
    <!-- Remarkety cart update end -->
  7. Click "Save & apply file".

 

You're all set!

You can monitor your recent website tracking events on Remarkety here: https://app.remarkety.com/account/storesettings#tab_webtracking

If you have any additional questions, please feel free to contact support@remarkety.com. 

Have more questions? Submit a request

0 Comments

Article is closed for comments.