Track Klaviyo form activity using JavaScript
Learn how to use event listeners to trigger custom JavaScript based on how a site visitor interacts with a form, in order to learn about their behavior or interact with your site visitors more personally.
Klaviyo form events
Klaviyo forms send an event called "klaviyoForms"
to the window each time activity occurs on a form. The Klaviyo form event gets dispatched like so, in the following code example. See the object for a sample event payload.
const event = new CustomEvent("klaviyoForms", {
detail: {
type: 'submit',
formId: 'F12345',
companyId: 'C12345',
metaData: {
email: '[email protected]',
// additional fields
}
}});
window.dispatchEvent(event);
Form event types
The type
field in the event object will be one of the following six event types:
- open
This event fires when a popup or flyout form initially displays on a page - embedOpen
This event fires when an embedded form loads on a page - close
This event fires when a visitor closes a form - redirectedToUrl
This event fires when a visitor clicks a button on a form that is set to redirect them to a URL - submit
This event fires when a visitor submits the main conversion action of a form (e.g., the first email or SMS subscription action), and will only fire once per form - stepSubmit
This event fires when each step is submitted, and it can fire multiple times per form
When choosing which event to use, consider what you’re trying to track. If you are tracking general form analytics (e.g., tracking form submissions in Google Analytics), use submit
, which only fires once per form. If your goal is passing detailed data to a third party, use stepSubmit
so all submitted data is captured.
Submit events: submit vs. stepSubmit
The stepSubmit
event fires every time a step is submitted and can fire multiple times for the same form. For a multi-step form, the submit event fires just once per form, following these criteria:
- For forms with email or SMS subscription actions, submitting an email or phone number triggers a
submit
event - For forms containing both email and SMS fields across multiple steps, submitting whichever appears first in the form triggers a
submit
event - For forms without an email or SMS subscription action (e.g., a form containing only text fields), clicking a button with the Action set to Submit Form triggers a
submit
event
Additional event details
In addition to the event type, the event detail
object includes the following:
- formID
The ID of the form, which can be found in the form’s URL within Klaviyo. This is a six-character alphanumeric code and uniquely identifies each form in Klaviyo. - companyId
Your account's unique six-character public API key. - metaData
Data related to each uniquesubmit
orstepSubmit
event. This field contains all of the fields submitted to Klaviyo.- email
The email address of the person who submits the form, if submitted through the current form. - phone_number
The phone number of the person who submits the form, if submitted through the current form. - stepName
The metadata ofstepSubmit
events will include the step's name. - Additional Fields
Any additional fields unique to the particular form will appear beneath the email value.
- email
Structure of an event listener
Below, you'll find the general structure you should use when creating your own custom event listener for form events. The field open
can be changed to any other form event type (mentioned above in Form event types), depending on your use case. Replace Custom JS
with the JavaScript that should run when the event occurs.
<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open') {
// Custom JS
}
});
</script>
To reference the event’s timestamp in your custom JavaScript, use e.timeStamp
.
Example use cases
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 == '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 submit a form after selecting a specific radio button on a form. In the example below, "coffee"
is one radio button's value and "tea"
is another. The value of the radio button will be used to update the profile's custom Favorite Beverage
property.
The radio button's value will appear under e.detail.metaData
keyed under the relevant profile property name, i.e. e.detail.metaData.department
.
<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'submit') {
switch (e.detail.metaData['Favorite Beverage']) {
case 'coffee':
window.location.replace('/coffee');
break;
case 'tea':
window.location.replace('/tea');
break;
}
}
});
</script>
Update a profile property on form 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. Note that only identified visitors (i.e., those who were cookied when they viewed the form, or who filled out the form) can have their profiles updated using this method.
For this and the following examples referencing the klaviyo
object, you will need to have this loaded on your site. This may happen automatically for you if you're using the Klaviyo Onsite script.
<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open') {
klaviyo.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.
Track Klaviyo profile form activity using JavaScript
<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
klaviyo.track('Viewed Form - Tracked Profile', {
formId: e.detail.formId
});
}
if (e.detail.type == 'submit' || e.detail.type == 'redirectedToUrl') {
klaviyo.track('Submitted Form - Tracked Profile', {
formId: e.detail.formId
});
}
});
</script>
Updated 23 days ago