What is Klaviyo, and How to Track Form Submissions Using Google Tag Manager (GTM)

Klaviyo is a powerful email and SMS marketing platform that helps businesses create personalized, data-driven marketing campaigns. One of the platform’s key features is the ability to track customer interactions, such as form submissions, and use that data to enhance marketing strategies. In this guide, we’ll explore what Klaviyo is and how to track form submissions on your website using Google Tag Manager (GTM) to capture email addresses and send them to Google Ads for conversion tracking.

What is Klaviyo?

Klaviyo is an email and SMS marketing platform designed for businesses looking to personalize their marketing efforts. By using data insights from user behavior and purchase history, Klaviyo allows businesses to send targeted emails and SMS messages. Whether you’re running an e-commerce site, a service business, or any other kind of online venture, Klaviyo’s ability to leverage customer data makes it an excellent tool for improving engagement and driving conversions.

• Automate and personalize your marketing campaigns.
• Segment your audience based on customer behavior and interactions.
• Integrate with various platforms like Shopify, WooCommerce, and more.

Tracking Klaviyo Form Submissions Using Google Tag Manager (GTM)

By integrating Klaviyo with Google Tag Manager (GTM), you can track form submissions, capture email data, and pass that data to platforms like Google Ads for enhanced conversion tracking.

Step 1: Embed the Klaviyo Form on Your Website

If you’re using a Klaviyo form, you’ll need to embed it on your website. You can use an iframe or HTML code, depending on how Klaviyo provides the form.

<iframe src="https://www.your-klaviyo-form-url.com" width="100%" height="500px" frameborder="0"></iframe>

Step 2: Add the Listener in GTM

To track form submissions, you’ll need to add a listener that detects when the Klaviyo form is submitted and captures the email.

1. In GTM, create a new Custom HTML Tag:
– Go to Tags > New > Tag Configuration > Custom HTML.
– Paste the following code:

<script>
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var form = document.querySelector('.klaviyo-form');
            if (form) {
                console.log("Klaviyo form detected.");

                var button = form.querySelector('button[type="button"]');
                var emailInput = form.querySelector('input[type="email"]');

                if (button && emailInput) {
                    button.addEventListener('click', function() {
                        console.log("Subscribe button clicked");
                        var email = emailInput.value;

                        if (email) {
                            console.log("Email captured:", email);
                            window.dataLayer = window.dataLayer || [];
                            window.dataLayer.push({
                                'event': 'klaviyoFormSubmission',
                                'email': email
                            });

                            form.submit();
                        } else {
                            console.log("No email entered.");
                        }
                    });

                    observer.disconnect(); // Stop observing once the form is found
                }
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
</script>

2. Trigger Setup:
– Set the trigger for this tag as DOM Ready. This ensures the listener is loaded when the page is fully loaded and ready.

Step 3: Create a Custom Event Trigger in GTM

Next, capture the form submission event and pass the email to the data layer.

1. In GTM, go to Triggers and click New.
2. Select Custom Event Trigger.
3. Name the trigger something like Klaviyo Form Submission.
4. In the Event Name field, enter klaviyoFormSubmission.
5. Set the trigger to fire on All Custom Events.

Step 4: Create a Data Layer Variable for Email

To capture the email for Google Ads conversions, create a Data Layer Variable (DLV) in GTM.

1. In GTM, go to Variables and click New.
2. Select Data Layer Variable and name it something like DLV – Email.
3. In the Data Layer Variable Name field, enter `email` (which matches the email variable pushed to the data layer by your Custom HTML tag).

Step 5: Set Up Google Ads Conversion Tracking

Once the form submission and email capture are set up, you can pass that data to Google Ads for conversion tracking.

1. In GTM, create a new Google Ads Conversion Tag:
– Go to Tags > New > Tag Configuration > Google Ads Conversion Tracking.
– Enter your Conversion ID and Conversion Label from your Google Ads account.

2. Scroll down to the Include user-provided data from your website section:
– Enable this option and select the DLV – Email variable created earlier.

3. Set the trigger to the Klaviyo Form Submission trigger you created.

Step 6: Insert the Conversion Linker Tag

To ensure that conversions are tracked correctly, you’ll need to add a Conversion Linker tag.

1. In GTM, create a new tag:
– Go to Tags > New > Tag Configuration > Conversion Linker.
– Leave the default settings and set the trigger to All Pages.

Step 7: Publish Your GTM Container

After setting everything up, click Submit to publish your GTM container. This will make the changes live on your website, and you’ll start tracking form submissions and capturing email data.

Conclusion

By integrating Klaviyo with Google Tag Manager, you can efficiently track form submissions, capture valuable user data, and pass that data to Google Ads for enhanced conversion tracking. This setup helps you gain deeper insights into your marketing performance and optimize your advertising strategy.

If you need help tracking your marketing events or scaling your business, Mike from gravityGone can assist you with web design, SEO, marketing automation, and tracking setup to grow your business with data-driven strategies.