How to create a custom viewed page metric

You will learn

Learn how to create a custom Viewed Page metric and understand when your customers visit non-product pages on your site.

Before you begin

Before continuing, make sure Klaviyo's onsite JavaScript (Klaviyo.js) is installed on each page you want to track. For Shopify, integrate your store and enable onsite tracking using the setup guide. For other sites, follow Getting started with Klaviyo onsite tracking. The snippets below require Klaviyo.js to send events to your account.

It's important to add the following JavaScript code snippet to each page of your site that you want to track a Viewed Page metric for. This snippet will work for both landing pages and any other site pages.

Installing the snippet

1. Copy and paste the complete snippet below into each page you want to track. Before publishing, customize the page name and optional event name as described below, or use the alternate URL snippet.
2. Then save and publish your website files with the updated code.

<script type="text/javascript"> 
//Script to initialize 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"> 
//Script to track viewed page
klaviyo.track("Viewed Page", {           
   PageName: "About Us"   
}); 
</script>

When an identified visitor views a page containing this snippet, Klaviyo records an event under your custom Viewed Page metric, with the PageName value "About Us".

Changing the PageName value

You can change the example value above to represent another page name on your site.

1. Remove the example "About Us" value.
2. Add your desired text contained within the quotation marks. For example, if you want to track visits to your brand stories page, you could instead use "Customer Stories" as the value.

Changing the Viewed Page event name

You can change the Viewed Page event name to another name (e.g., Visited Page, Tracked Page, etc.).

1. Remove the example Viewed Page event name.
2. Add your desired text contained within the quotation marks.

Track Viewed Page by URL

To track Viewed Page by URL instead of by page name, use the alternate snippet below in place of the first snippet. Keep window.location.href exactly as shown, without quotation marks. It automatically sets the url property to the URL of the page the visitor is viewing.

<script type="text/javascript"> 
//Script to initialize 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"> 
//Script to track viewed page
klaviyo.track("Viewed Page", {           
      url: window.location.href   
}); 
</script>

Test your viewed page tracking

To test if your Viewed Page tracking is working, make sure your page has been published. Add ?utm_email=youremail@example.com to the page URL, replacing youremail@example.com with your own test email address. If the URL already contains a ?, use &utm_email=youremail@example.com instead. Add the parameter before any # fragment, then reload the page to identify your browser and track your visit.

1. After visiting your page, go into your Klaviyo account.
2. Navigate to Analytics > Metrics.
3. Search for Viewed Page (or, whatever alternative name you use for this metric) in the field above.

4. Click into your Viewed Page metric (or whatever metric you are using).
5. Select the Activity feed tab. Find the event for your test profile. Open its menu and select Activity details to check that the page name or URL matches the page you visited.

If you can view your activity, that means the metric is tracking successfully. If you don’t see your activity, try reloading the page in Klaviyo. If it still does not appear, confirm that Klaviyo.js and your chosen snippet are installed on the published page, then revisit it with your test email address. For Shopify, also check the consent requirement below.

Additional resources