How to Track Klaviyo Form Submissions Using Google Tag Manager

Do not scrape the form

The common approach, and the one this guide used to recommend, is a MutationObserver that waits for Klaviyo's form to appear, finds the button, finds the email field, and attaches a click listener.

It works until it does not. It depends on Klaviyo's internal class names and button markup, neither of which is yours, and both of which change without warning. Worse, those examples usually finish by calling form.submit(), which bypasses Klaviyo's own handler. You can break the actual signup while trying to measure it.

There is no need. Klaviyo fires a documented klaviyoForms event on the window for every form interaction. Open, embed load, submit, redirect. It is supported, it is stable, and it is three lines.

Step 1: listen for the Klaviyo event

In GTM: Tags, New, Custom HTML. Paste this, and set the trigger to All Pages.

<script>
window.addEventListener('klaviyoForms', function(e) {
    if (e.detail.type === 'submit') {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'klaviyo_form_submit',
            'klaviyo_form_id': e.detail.formId
        });
    }
});
</script>

No observers, no class names, nothing that breaks when Klaviyo ships a redesign.

Note what is not in there. No email.

Klaviyo passes submitted field data on e.detail.metaData, but the keys depend on how you built your form. Before you rely on it, add a temporary console.log(e.detail), submit your own form, and read what actually comes back. Then pull the field you want by its real name.

Take the log statement back out before you publish. Debug output does not belong in front of visitors.

Step 2: trigger and variable

Trigger. Triggers, New, Custom Event. Event name klaviyo_form_submit, firing on all custom events.

Variable. Variables, New, Data Layer Variable. If you added the email to the push in step one, name the variable to match that key exactly. A mismatch here fails quietly, which is the worst way for anything to fail.

Step 3: send it to Google Ads

Create a Google Ads Conversion Tracking tag with your Conversion ID and Label. Scroll to Include user-provided data from your website, turn it on, and point it at your email variable.

Set the trigger to the one from step two. Then add a Conversion Linker tag on All Pages if you do not already have one, since conversions attribute poorly without it.

Google hashes the email before it leaves the browser, which is what makes this acceptable to send. It is still customer data, so only collect it if you have a reason to.

Validate before you publish

Open GTM Preview and submit your own form. You want to see three things in order: the klaviyo_form_submit event appear, your variable populate with a real value, and the tag fire.

Then check that the submission actually reached Klaviyo. This is the step people skip. Tracking a signup that no longer works is worse than not tracking it, because now the number looks fine.

If you want the wider setup this sits inside, it is in setting up Google Tag Manager for local business websites.

Common questions

Why shouldn't I scrape the Klaviyo form instead?

Because scraping depends on Klaviyo's internal class names and button markup, neither of which is yours, and both change without warning. Worse, most of those examples call form.submit(), which bypasses Klaviyo's own handler, so you can break the actual signup while trying to measure it.

What should I listen for instead?

Klaviyo fires a documented klaviyoForms event on the window for every form interaction, including submits. Listen for it in a Custom HTML tag, push it into the data layer, and fire your tags off that. No observers, no class names, nothing that breaks when Klaviyo ships a redesign.

How do I capture the submitted email address?

Klaviyo passes field data on e.detail.metaData, but the keys depend on how you built your form. Add a temporary console.log(e.detail), submit your own form, and read what actually comes back, then pull the field you want by its real name. Take the log back out before you publish.

How do I know the tracking actually works?

Open GTM Preview and submit your own form. You want three things in order: the klaviyo_form_submit event appears, your variable populates with a real value, and the tag fires. Then check the submission actually reached Klaviyo, because tracking a signup that no longer works is worse than not tracking it.