Overview
You can 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.
Set Up 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 tracking. We recommend creating a separate trigger 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.
Select Custom HTML as the tag type.
To locate your Active on Site snippet in Klaviyo, click the account dropdown and select 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 Onsite 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.
Then, in your Klaviyo account, and navigate to Dashboard > Activity Feed. If your onsite 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 have 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
We recommend enabling Klaviyo onsite tracking for Shopify via our Shopify app embed, as opposed to Google Tag Manager. The app embed enables both Active on Site and Viewed Product tracking, given that it is toggled on and that the Viewed Product setting is checked on the integration settings page. If you want to add onsite tracking via Google Tag Manager instead, make sure to toggle off the app embed first.
Note that if you are adding Klaviyo's Viewed Product tracking snippet using Google Tag Manager, use the following snippet from this guide (Klaviyo's regular snippet, enabled automatically via the app embed, uses Shopify's liquid tags, which do not work when added to a site with Google Tag Manager).
<script type="text/javascript">
var _learnq = _learnq || [];
product_handle = product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/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
};
_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
}
}]);
// 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>