Add Klaviyo Web Tracking using Google Tag Manager

Overview

You can add Klaviyo's web 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 web tracking falls into this category, and can be added and managed through Google Tag Manager.

Setup Google Tag Manager

If you haven't already, create a Google Tag Manager account and 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.

Create a new Tag

Within the workspace for your site, create a new trigger for your Klaviyo Active on Site Web Tracking. We recommend creating a separate trigger for your Active on Site and Viewed Product tracking. This is because your Viewed Product tracking will only trigger on your product pages, whereas your Active on Site tracking should trigger on every page of your site.

Select Custom HTML as the tag type.

From your Klaviyo account, you can locate your Active on Site snippet by clicking the account dropdown and selecting Setup Web Tracking. Copy the first snippet. 

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

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.

Save your new tag. This completes adding your Active on Site tracking snippet using Google Tag Manager.

You can add your Viewed Product snippet using the same method. Modify the trigger to only fire on pages that include your products. On some sites, this can be accomplished by limiting the trigger to only fire on pages where the url includes the word "product".

Test your Web Tracking

Navigate to your site and add the following to the end of the url:

utm_email=klaviyogreen@gmail.com

You can replace "klaviyogreen@gmail.com" with your own email address.

Press enter to reload the page.

Switch to your Klaviyo account and navigate to Dashboard > Activity Feed. If you're web tracking is installed correctly, you will see a new Active on Site event at the top of your activity feed from the email you entered in the URL parameter above.

Troubleshooting

If you're having trouble getting your Viewed Product event to fire, ensure 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.

If you get an error when trying to save either of the tracking snippets in Google Tag Manager, you will have to paste the snippets directly into your site.

Using Google Tag Manager on Shopify

When setting up Klaviyo's tracking snippets with Shopify, there are two important differences to be aware of:

1. For the Shopify integration, Klaviyo automatically injects Klaviyo's active on site tracking onto your site when you select the option to Automatically add Klaviyo onsite javascript (recommended) from your Shopify integration settings page.
2. Our pre-built viewed product tracking takes advantage of Shopify's liquid tags, and these tags do not work when added to a site with Google Tag Manager.

If you check the setting to automatically inject Klaviyo's active on site tracking, then you do not need to add this snippet using Google Tag Manager.

If you're adding Klaviyo's viewed product tracking snippet using Google Tag Manager, use the following snippet from this guide. Do not use the snippet inside of your account.

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

  product_handle = product_handle = location.href.split( '/' ).pop().split( '?' )[0];
  jQuery.getJSON('/products/'+product_handle+'.js', 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
    };

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