Track custom events in Klaviyo via Javascript

Get the most out of your Klaviyo strategy by adding custom event tracking to your flow triggers! Let's look below on how you can implement a Page View event and any other event tracking.

 

What you need to get started:

  • A Klaviyo account

  • HTML & Javascript basic knowledge

 


 

Track Custom Page View (Not Active On Site)

The Viewed Page metric is similar to the Viewed Product metric, however it tracks when a customers visit a non-product page on the site. The good this is that you will be able to filter Flow Triggers by variable such as Page Title (currently not available with Active On Site event.

 

<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['track', 'Viewed Page', {
PageName: "AboutUs"}
]);
</script>

 

This will record a custom ‘Viewed Page’ metric in which the property name, ‘PageName’, equals the value, ‘AboutUs’.

 

If you'd like to make PageName dynamic you will need to add a variable such as {{ page.title }} (If you're using Shopify). The code will look like this:

 

<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['track', 'Viewed Page', {
PageName: "{{ page.title }}"}
]);
</script>

 

If you would like to track Viewed Page by URL instead of by page title, you can use this alternate snippet:

 

<script>
var _learnq = _learnq || [];
var page = window.location.href;
_learnq.push(['track', 'Viewed Page',
{url: page}
]);
</script>

 


 

Track any other custom event

By applying the same format of the View Page code, we can track custom events via Javascript such as Contact Form enquiries, Page Scroll, Visits above 1 minute or any other valuable information.

 

Use this code as template:

 

<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['track', 'MY CUSTOM EVENT NAME', {
PageName: "AboutUs"}
]);
</script>

 

Example with Contact Form enquiries:

 

<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['track', 'MY CUSTOM EVENT NAME', {
$email: "{{ form.email }}"
$source: "Contact form"}
]);
</script>

 


 

Klaviyo Special Properties

  • $first_name: first name

  • $last_name: last name

  • $phone_number: phone number

  • $title: job title

  • $organization: business name

  • $city: city

  • $region: region or state

  • $country: country

  • $zip: postal code

  • $address1: address line 1

  • $address2: address line 2

  • $timezone: time zone

  • $email: email address

  • $source: where a contact came from

Learn more here