Add Klaviyo Web Tracking for BigCommerce - Blueprint Themes

Overview

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.

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 Blueprint Themes. If you're using a Stencil Theme check out this guide.

Add Home Page Web Tracking - Blueprint Themes

To add Klaviyo's basic web tracking to your site, follow the instructions in your account's Setup Wizard.

You will be prompted to add a snippet of code to your site's main template. For BigCommerce stores, this is your default.html — this file defines the layout of a theme's homepage.

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

Place the following snippet before the </body> tag:

<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 - Blueprint Themes

To add Klaviyo's Viewed Product tracking to your site, follow the instructions in your account's Setup Wizard. Here, you will find more detailed instructions.

Finding the ProductDetails panel

Log into your BigCommerce store admin and navigate to Store Setup > Design.

Then click the Edit HTML/CSS link for your current theme.

647760

In the theme editor, locate Other Template Files and scroll down to PanelsHere, find the ProductDetails.html 

647761

Adding the Product Page Tracking Code

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

While editing the ProductDetails panel, add both of the following code snippets after line 33. 

 

 <script type="text/javascript">
  var _learnq = _learnq || [];

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

  (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>
 <script type="text/javascript">    
var _learnq = _learnq || []; var item = { Name: "%%GLOBAL_ProductName%%", ProductID: %%GLOBAL_ProductId%%, ImageURL: ThumbURLs[0], // or ZoomImageURLs[0] if you'd like to use 1280x1280 images. URL: window.location.origin + window.location.pathname, Brand: "%%GLOBAL_BrandLink%%", Price: "%%GLOBAL_ProductPrice%%", CompareAtPrice: "%%GLOBAL_RetailPrice%%" }; _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>
Note that if you would like Klaviyo to track the product price in numeric digits only, with no currency token, you will want to replace the %%GLOBAL_ProductPrice%% variable with this alternative variable: %%GLOBAL_RawProductPrice%%. This is necessary if you would like to target a Browse Abandonment flow based on the price of the viewed item.
 
Was this article helpful?
0 out of 0 found this helpful