Adding Custom JavaScript Events to Forms

read
Last updated at:

Overview

Klaviyo tracks each time a form is shown, closed, or submitted. Using event listeners, you can run custom JavaScript based on how the visitor is interacting with the form. For example, you may want to add a custom property to their profile once they are shown a particular form. This can be done using event listeners.

This guide is provided to offer general guidelines for creating custom JavaScript events. You may need to customize the scripts to meet your site's needs. Klaviyo's support team is not able to assist with customizing JavaScript.

General Structure of an Event Listener

Below, you'll find the general structure you should use when creating your own custom event listener, which will need to be pasted on your site:

  • If you're using Shopify, paste the snippet into your theme.liquid file on a new line above the closing </body> tag.
  • If you're using a BigCommerce Stencil theme, navigate to Storefront > Footer Scripts from your BigCommerce Admin panel and paste the snippet into the Footer code box on a new line.
  • If you're using a BigCommerce Blueprint theme (a legacy theme engine that is being phased out), paste the code into the Footer.html file on a new line at the end of the file.

The field "open" can be changed to "submit" or "closed," depending on your use case. Replace "Custom JS" with your custom event listener.

<script>

window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open') {
Custom JS
}
});
</script>

Example Use Cases

These are some examples use cases in which you may want to add an event listener to the Klaviyo forms event.

Google Analytics Tracking on Submit

Track an event in Google Analytics when someone submits a specific form.

<script>

window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open') {
ga('send', 'event', 'Klaviyo form', 'form_open', e.detail.formId);
}
if (e.detail.type == 'submit') {
ga('send', 'event', 'Klaviyo form', 'form_submit', e.detail.formId);
}
});
</script>

Redirect to Another Page Based on Which Radio Button They Selected

Redirect subscribers to another page when they select a specific radio button on a form. In the example below, "mens" is one button and "womens" is another. These buttons are submitting to the profile property "department."

<script>

window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'submit') {
switch (e.detail.metaData.department) {
case 'yes':
window.location.replace('/mens');
break;
case 'no':
window.location.replace('/womens');
break;
}
}
});
</script>

Update a Profile Property on Open

This can be useful if you would like to attach or update a profile property to a browser when a customer is shown a specific form.

<script>

window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open') {
_learnq.push(['identify', {
'shownHomepageForm' : 'true',
}]);
}
});
</script>

Track Form Views and Submissions for Tracked Profiles

While Klaviyo form analytics are not tied to profiles (so that you can measure conversion rates), you can trigger your own form view and submission events that are tied to profiles. This can be useful if you want to build segments based on who has seen or submitted a form.

<script>

window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
_learnq.push(['track', 'Viewed Form - Tracked Profile', {
'formId' : e.detail.formId
}]);
}
if (e.detail.type == 'submit' || e.detail.type == 'redirectedToUrl') {
_learnq.push(['track', 'Submitted Form - Tracked Profile', {
'formId' : e.detail.formId
}]);
}
});
</script>

General Structure of the klaviyoForms Event

Klaviyo forms send an event called klaviyoForms to the window each time a form is shown, closed, or submitted. You add one listener to your page for all Klaviyo form events. Below is the structure of the Klaviyo form event:

var event = new CustomEvent("klaviyoForms", {

detail: {
type: 'submit',
formId: 'F12345',
companyId: 'C12345',
metaData: {
g: '12345',
$email: 'test@example.com',
}
}
});
window.dispatchEvent(event);

In the above, the following values are:

  • type
    This specifies if the event listener is triggered when the form is opened, closed, or submitted. The possible values are:
    • open - When a popup or flyout form appears to the visitor.
    • embedOpen - When an embedded form appears to the visitor.
    • close - When a visitor closes the form
    • submit - When a visitor submits the form
    • redirectedToUrl - When a visitor clicks a "Go to URL" button action

Only one submit event will fire when someone fills out a form, regardless of the number of steps in the form. For a multi-step form, the submit event fires when someone submits the primary conversion action of the form.

  • For forms with email or SMS subscription actions, submitting an email or phone number counts as a submit
  • For forms containing both email and SMS fields across multiple steps, submitting whichever appears first in the form counts as a submit
  • For forms without an email or SMS subscription action (e.g., a flash sale popup with a “Go to URL” action), clicking the “Go to URL” button counts as a submit
  • formId
    This is the ID of the form, which can be found in the URL of the form within Klaviyo. This is a six digit alphanumeric code and uniquely identifies each form in Klaviyo.
    2018-05-16_10-57-36.png
  • companyId
    This is your company's unique public API key, which can be found by navigating to Account > Setttings > API Keys in Klaviyo. For more information, check out How to Manage Your Account's API Keys
  • metaData
    This category is populated with data related to each unique submit event and contains all of the fields submitted to Klaviyo.
    • g
      This is the unique ID of the list that is linked to the form. For example, if your welcome popup is set to submit new subscribers to your Newsletter list, this would be the ID that is included in the event.
    • $email
      This is the email address of the person who submits the form, if available.
    • $phone_number
      This is the phone number of the person who submits the form, if available.
    • Additional Fields
      Any additional fields unique to the particular form will appear beneath the $email value.

Additional Resources

 

x
Was this article helpful?
48 out of 120 found this helpful