Add Klaviyo Web Tracking for BigCommerce - Stencil Themes

By adding the Klaviyo web tracking code to your site's main template, Klaviyo will begin tracking an Active on Site metric for you every time an identifiable visitor browses your site.
your site.

You can also add the Klaviyo web tracking code to your ProductDetails panel in BigCommerce in order to track a Viewed Product metric. After adding this code, Klaviyo will track a Viewed Product event every time an identifiable visitor browses a product page on your site. The Klaviyo tracking code will populate a Viewed Product metric in your Metrics tab. You can use the Viewed Product metric to create segments of people who view certain products without purchasing and/or create a Browse Abandonment flow.

NOTE: This guide is for BigCommerce stores using Stencil Themes. If you're using a Blueprint Theme check out this guide.

Add Home Page Web Tracking - Stencil Themes

You will be prompted to add a snippet of code to your site's main JavaScript template.

  1. From your BigCommerce dashboard, navigate to Storefront Designs > Design Options and click the Scripts tab.
  2. Paste the following snippet into the text form and save.

NOTE: Where you see YOUR_SITE_ID below, replace with your account's Public API Key/Site ID (found in Account > Settings > API Keys)

<script type="text/javascript">

 var _learnq = _learnq || [];

 _learnq.push(['account', 'YOUR_SITE_ID']);

 (function () {

 var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true;

 b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'a.klaviyo.com/media/js/analytics/analytics.js';

 var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);

 })();

</script>

Add Product Page Web Tracking - Stencil Themes

Editing Stencil Theme Files

In order to edit Stencil theme files you need to make a copy the theme and apply it to your store.
  1. Navigate to Storefront Design > My Themes
  2. Click the Advanced dropdown, select Make a Copy
  3. Find the theme under My Themes, click the options menu, and select Apply
You now have the option under Current Theme > Advanced to Edit Theme Files.

Adding Product Page Web Tracking - Stencil Themes

To add Klaviyo's Viewed Product tracking to your site you will paste a snippet of code to your site's main product page template.
  1. Navigate to Storefront Design > My Themes. Click the Advanced dropdown and select Edit Theme Files.
  2. From the editor navigate to Templates > Pages > product.html
  3. At the end of the file paste the following snippet:
<script type="text/javascript">    

 var _learnq = _learnq || [];
 
   var item = {
    Name: "{{product.title}}", 
    ProductID: "{{product.id}}",
    ImageURL: "{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}",
    URL: window.location.origin + window.location.pathname,
    Brand: "{{product.brand.name}}",
    Price: "{{product.price.without_tax.value}}",
    CompareAtPrice:"{{product.price.rrp_without_tax.value}}"
  };

 _learnq.push(['track', 'Viewed Product', item]); 

 _learnq.push(['trackViewedItem', {
   Title: item.Name, 
   ItemId: item.ProductID,
   ImageUrl: item.ImageURL, 
   Url: item.URL,

   Metadata: { 
     Brand: item.Brand,
     Price: item.Price, 
     CompareAtPrice: item.CompareAtPrice
   } 
 }]);

</script>

Click Save & apply to complete adding product tracking code to your BigCommerce store.

 
Was this article helpful?
0 out of 0 found this helpful