Installing Justuno on Bigcommerce Stencil Themes

If you are using a Stencil theme in Bigcommerce follow these steps to install Justuno.


Step 1: Go to your Justuno dashboard and in the settings area find the embed code tab. Copy the embed code



Step 2: Log into your Bigcommerce store and navigate to "Storefront Design" > "Footer Scripts"

Step 3: Paste in the Justuno embed code. If you already have some scripts there, don't worry! Simply paste the Justuno code below all other scripts! 



Cart Tracking Code

Step 4: You can copy the following code and paste it right underneath the code you just pasted in you BigCommerce footer script section to enable our cart tracking features.

<script data-cfasync="false">
    window.juapp = window.juapp || function() {(window.juapp.q = window.juapp.q || []).push(arguments)};
    var ju_cart_arrary = [];
    {{#each cart.items}}
    {{#if type '===' 'Item' }}
        var juitem_pid = "{{product_id}}";
        var juitem_qty = {{ quantity }};
        var juitem_pr = {{ price.value }};
        var juitem_nm = "{{ name }}";
ju_cart_arrary.push({ itemid: juitem_pid, quantity: juitem_qty, price: juitem_pr, name: juitem_nm }); {{/if}} {{/each}}

jju(document).on("click","#form-action-addToCart",function(){var t=jju(this).closest("form").find('input[name="product_id"]').val(),e=jju(".productView-title").length?jju(".productView-title").text():jju(".breadcrumb-label").text(),r=parseFloat(jju(".price.price--withoutTax").text().replace(/[^\d.-]/g,"")),a=parseInt(jju(".form-increment .form-input.form-input--incrementTotal").attr("value"));juapp("cartItemAdd",t,{quantity:a,price:r,name:e})}); }


Step 4: Follow step 1 above to now copy both your "Embed Code" and also this time your "Conversion Code" located at the bottom of the justuno embed code page 


Step 5: Go to Advanced Settings › Affiliate Conversion Tracking. Then, paste the code you copied into the Conversion Tracking Code area.


Step 6: While still on your conversion tracking code page in your Bigcommerce portal paste the following code after the conversion code you just pasted in there.

<script data-cfasync="false">
(function() {
    // Bigcommerce doesn't provide variables for individual product info, so we grab it from their GA script
    var products = [];
    var scripts = document.getElementsByTagName('script');
    for(var i=0;i<scripts.length;i++)if(scripts[i].innerHTML.match(/pageTracker\._addItem/)){for(var stuff=scripts[i].innerHTML.match(/_addItem\(([^\)]+)/g),c=0;c<stuff.length;c++){var txt=stuff[c],fields=(txt=(txt=(txt=(txt=txt.replace("_addItem(","")).replace(/'|\n/g,"")).replace(/,\s+/g,",")).trim()).split(",");products.push({orderId:fields[0],sku:fields[1],name:fields[2],category:fields[3],price:fields[4],quantity:fields[5]})}break}
    // now product info is available to pass to a conversion tracking script

currency:'USD' }); for (var i=0; i < products.length; i++) { juapp('orderItem',products[i].sku,{ name:'Unknown', quantity:products[i].quantity, price:products[i].price, color:'Unknown', size:'Unknown' }); } })(); </script>


TAGS: Bigcommerce stencil theme, install on bigcommerce stencil, stencil theme

Have more questions? Submit a request


Please sign in to leave a comment.