Installing Web Tracking in BigCommerce Stencil Theme Editor

If you are using BigCommerce's Stencil new theme framework you can follow these steps in order to install Remarkety's website tracking codes.

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

1. Login to the store's back end.

2. Go to "Storefront Design" > "Design Options" > "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 > components > cart > content.html
  3. Add the following code to the end of the "content.html" template file:
    <!-- Remarkety cart update start -->
    <script>
    {{inject "cart" cart}}
    var rmJSContext = JSON.parse({{jsContext}});
    var _rmData = _rmData || [];
    var rmCartUpdate = function(t){ t = t || 0; if(typeof rmBcUtils === "object"){ _rmData.push(["track", "carts/updated", rmBcUtils.stencilCartMapper(rmJSContext.cart)]); } 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 "cart" cart}}
    var rmJSContext = JSON.parse({{jsContext}});
    var _rmData = _rmData || [];
    var rmCartUpdate = function(t){ t = t || 0; if(typeof rmBcUtils === "object"){ _rmData.push(["track", "carts/updated", rmBcUtils.stencilCartMapper(rmJSContext.cart)]); } 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.