Adding Custom JavaScript Events to Forms

read

Overview

Klaviyo's new signup forms send an event to the window each time a form is opened (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. 

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, 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 Engagements for Tracked Profiles

While Klaviyo form analytics are not tied to profiles (so that you can measure conversio rates), you can trigger your own form view and engagement events that are tied to profiles. This can be useful if you want to build segments based on who has seen or engaged with 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', 'Engaged With Form - Tracked Profile', {
'formId' : e.detail.formId
}]);
}
});
</script>

Add a Subscriber to Multiple Lists

This allows you to add a subscriber to multiple lists once they submit a form. Please note that if the lists have double opt-in enabled, subscribers will receive the confirmation emails for both lists to confirm their subscriptions. The JavaScript below requires jquery 3.2.1 or higher. If you are using a lower version of jquery or no jquery, include this line:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

To add a subscriber to multiple lists:


<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'submit') {
var settings = {
"async": true,
"crossDomain": true,
"url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
"data": {
"g": "LIST_ID",
"email": e.detail.metaData.$email,
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});
}
});
</script>

In the above, be sure to replace LIST_ID with the second list's ID.

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
  • 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.
  • 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.
    • Additional Fields
      Any additional fields unique to the particular form will appear beneath the $email value.

 

Was this article helpful?
2 out of 5 found this helpful