Add Klaviyo Web Tracking for Shopify Stores

The Active on Site Metric

First, copy your unique (but public) Klaviyo API key. You can find this API key by navigation to Account > Settings > API Keys.
647278
Next, go to your Shopify store's backend. Click Sales Channels > Online Store then click the Themes tab. Navigate to the "..." button that looks like this:

647283

Select Edit HTML/CSS,  then select theme.liquid

Copy and paste the code below at the very bottom of that page, but replace the API_KEYplaceholder with your public API key / site ID.

<script type="text/javascript"> 
     var _learnq = _learnq || [];
     _learnq.push(['account', '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>

Click Save in the Shopify editor.

Here's what it will look like:

647284

The Viewed Product Metric

Open the product.liquid template the the editor. Copy and paste the code below to the bottom of the template:

<script text="text/javascript">
 var _learnq = _learnq || [];
 var item = {
   Name: {{ product.title|json }},
   ProductID: {{ product.id|json }},
   Categories: {{ product.collections|map:'title'|json }},
   ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
   URL: "{{ shop.secure_url }}{{ product.url }}",
   Brand: {{ product.vendor|json }},
   Price: {{ product.price|money|json }},
   CompareAtPrice: {{ product.compare_at_price_max|money|json }}
 };

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

 _learnq.push(['trackViewedItem', {
   Title: item.Name,
   ItemId: item.ProductID,
   Categories: item.Categories,
   ImageUrl: item.ImageURL,
   Url: item.URL,
   Metadata: {
     Brand: item.Brand,
     Price: item.Price,
     CompareAtPrice: item.CompareAtPrice
   }
 }]);
</script>

​Here's what the editor will look like:
647285

Testing Web Tracking

To test that tracking is set up properly. Go to a product page for your store. Add ?utm_email=email@example.com to the end the URL replacing email@example.com with your email address. After your reload the page, search in Klaviyo for your email address. You should see a profile has been created and has tracked your product view.

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