How to add Klaviyo onsite tracking using Google Tag Manager

You will learn

Learn how to add Klaviyo's onsite tracking snippets to your site using Google Tag Manager. Some site owners use Google Tag Manager as a single point to manage all third-party web snippets they need to add to their site. Klaviyo's onsite tracking falls into this category and can be added and managed through Google Tag Manager.

Before you begin

Setting up Google Tag Manager

If you have already created a Google Tag Manager account and installed its container on your site, you can skip these steps and head to the section on creating a tag.
1. Create a Google Tag Manager account.
2. Add the install scripts to your site.

If you're new to using Google Tag Manager, review their documentation on setting up an account and adding the install scripts to your site.

Creating a new tag

1. Within the workspace for your site, create a new tag for your Klaviyo Active on Site tracking. We recommend creating separate tags and triggers for your Active on Site and Viewed Product tracking. This is because Viewed Product tracking will only trigger on your product pages, whereas Active on Site tracking should trigger on every page of your site.
2. Select Custom HTML as the tag type.

3. In Klaviyo, select Integrations in the sidebar.
4. Select Manage data > Set up web tracking.

If prompted, select Set up manually, then Next to view your snippet. If the setup screen shows instructions for your ecommerce integration instead, use the manual Active on Site snippet and replace its public API key placeholder as directed.

6. From your Google Tag Manager, paste your Klaviyo Active on Site snippet into the HTML box.

7. Set your trigger to fire on a page view for all pages. This ensures that your Active on Site snippet will fire whenever customers view a page on your site.

8. Save your new tag. Preview your changes to check that the tag fires, then publish your container to make tracking live on your website. Saving the tag alone does not publish it.

You can add your Viewed Product snippet using the same method. Use the snippet for your ecommerce platform from the Viewed Product tracking guide. Modify the trigger to only fire on product detail pages. On some sites, this can be accomplished by limiting the trigger to only fire on pages where the URL includes the word "product". Check that your rule matches only product detail pages, then save, preview, and publish the tag.

Test your onsite tracking

1. Navigate to your website.
2. Add the following to the end of the URL:

?utm_email=klaviyogreen@gmail.com

Replace "klaviyogreen@gmail.com" with your own email address before loading the URL. If the URL already contains a ?, append &utm_email=your-email@example.com instead. Place the parameter before any # fragment, then press Enter to reload the page.

3. In Klaviyo, navigate to Analytics > Metrics, select Active on Site, and open Activity feed. Look for an event associated with the email address you used in the URL.

4. If you added Viewed Product tracking, visit a product detail page in the same browser. In Klaviyo, open Analytics > Metrics, select Viewed Product, and check its Activity feed for your test event and the product details.

If you have trouble getting your Viewed Product event to fire, make sure that your tags are set up to fire in a specific order. You always want your Active on Site snippet to fire before your Viewed Product snippet. Follow Google’s tag sequencing instructions to set the order.

If Google Tag Manager reports an error when you save a snippet, check the code against Google’s Custom HTML requirements. If you cannot resolve the error, you can install the snippets directly on your site instead.

Using Google Tag Manager on Shopify

With Shopify, instead of using Google Tag Manager, you are encouraged to enable Klaviyo onsite tracking via Klaviyo's app embed in Shopify. The app embed enables both Active on Site and Viewed Product tracking, given that the app embed is toggled on and that the Add Viewed Product tracking to my site setting is checked on the integration settings page. Our Shopify integration also enables Submitted Search, Viewed Collection, and Added to Cart via the Track behavioral events setting.

If you want to add onsite tracking via Google Tag Manager instead, make sure to toggle off the app embed first. Set up the Active on Site tag from the steps above to load Klaviyo.js on all pages. Then add the snippet below as a separate Viewed Product tag that fires only on product detail pages, after the base tag. This snippet does not load Klaviyo.js itself. Save, preview, and publish both tags, then complete both tracking tests above.

The Shopify product endpoint used below returns product tags, not collection membership, so the snippet captures Tags instead of collections.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];
var product_handle = location.pathname.replace(/\/$/, '').split('/').pop();
fetch(window.Shopify.routes.root + 'products/' + product_handle + '.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Tags,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Additional resources