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.

Related reading: Setting Up Google Tag Manager for Local Business Websites

Related reading: Implementing Advanced Google Analytics 4 Tracking for Local Businesses

The post How to Track Klaviyo Form Submissions Using Google Tag Manager appeared first on gravityGone.

Calendly is a powerful tool for scheduling, but capturing critical user data like emails and sending it to Google Ads for conversion tracking adds extra value. By setting up Google Tag Manager (GTM), you can track Calendly bookings, capture user-provided data, and pass it to Google Ads for more accurate reporting.

Step-by-Step Guide to Track Calendly Bookings and Capture User Data

This guide will help you track events through GTM and capture data for Google Ads using the “Include user-provided data from your website” option.

Step 1: Add a Calendly Listener to GTM

You can add the Calendly listener directly into Google Tag Manager by following these steps:

1. In GTM, click on Tags and select New.
2. Choose Tag Configuration and select Custom HTML.
3. In the HTML field, paste the following Calendly listener script:

<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener('message', function(e) {
    if (e.data.event && e.data.event.indexOf('calendly') === 0) {
        if (e.data.event == 'calendly.event_scheduled') {
            var originalString = e.data.payload.invitee.uri;
            var regex_event = /scheduled_events\/(.*?)\/invitees/;
            var event_uuid = originalString.match(regex_event);
            var regex_invitee = /invitees\/(.*)/;
            var invitee_uuid = originalString.match(regex_invitee);

            window.dataLayer.push({
                'event': 'calendly',
                'calendly_event': e.data.event.split('.')[1],
                'event_uuid': event_uuid[1],
                'invitee_uuid': invitee_uuid[1]
            });
        } else {
            window.dataLayer.push({
                'event': 'calendly',
                'calendly_event': e.data.event.split('.')[1]
            });
        }
    }
});
</script>

4. Set the trigger to All Pages to ensure the listener runs on every page.

Step 2: Create Data Layer Variables in GTM

Go to Google Tag Manager and create two Data Layer Variables to capture the Event UUID and Invitee UUID.

1. Click Variables in GTM.
2. Under User-Defined Variables, click New.
3. Select Data Layer Variable.
4. Create the following variables:

• DLV – Calendly – event_uuid
• DLV – Calendly – invitee_uuid

These variables will store the unique Event ID and Invitee ID for each booking.

Step 3: Capture the Invitee’s Email for Google Ads

Create a Custom JavaScript Variable to capture the invitee’s email using the Calendly API:

1. In GTM, go to Variables.
2. Click New and select Custom JavaScript.
3. Name it something like JS – Calendly Invitee Email and enter the following code:

function() {
    if({{DLV - calendly_event}} === 'event_scheduled') {
        var xhr = new XMLHttpRequest();
        var calendly_url = 'https://api.calendly.com/scheduled_events/' + {{DLV - Calendly - event_uuid}} + '/invitees/' + {{DLV - Calendly - invitee_uuid}};
        var response;
        xhr.open('GET', calendly_url, false);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Authorization', 'Bearer YOUR_API_TOKEN');

        try {
            xhr.send();
            if (xhr.status === 200) {
                response = JSON.parse(xhr.responseText);
                return response.resource.email; // Adjust to your API response structure
            } else {
                return 'Error: ' + xhr.status;
            }
        } catch (error) {
            return 'Exception: ' + error.toString();
        }
    } else {
        return 'Condition not met';
    }
}

This makes a request to Calendly’s API to fetch the invitee’s email based on the event and invitee IDs.

Step 4: Set Up the Trigger in GTM

Now, create the trigger that fires when a Calendly booking is scheduled:

1. In GTM, go to Triggers and click New.
2. Select Custom Event Trigger.
3. Name the trigger Calendly Booking Trigger.
4. In the Event Name field, enter calendly.event_scheduled.
5. Set This Trigger Fires On to All Custom Events.

Step 5: Set Up the Google Ads Conversion Tag with User-Provided Data

Set up the Google Ads conversion tag and include user-provided data like the invitee’s email for better conversion tracking:

1. In GTM, go to Tags and click New.
2. Select Google Ads Conversion Tracking.
3. Add your Conversion ID and Conversion Label.
4. Scroll down to the section that says Include user-provided data from your website.
5. Enable this option and select the JavaScript variable you created for the invitee’s email (e.g., JS – Calendly Invitee Email).
6. Set the Trigger to the Calendly Booking Trigger you created.

Step 6: Insert the Conversion Linker Tag

To ensure the conversion data is tracked correctly, add the Conversion Linker tag:

1. In GTM, go to Tags and click New.
2. Select Conversion Linker.
3. Leave the default settings as they are.
4. Set the Trigger to All Pages.

Step 7: Publish Your GTM Container

Once all of the variables, tags, and triggers are set up, click Submit in Google Tag Manager to publish your container.

Benefits of Using Google Ads User-Provided Data

Using user-provided data (previously called Enhanced Conversions) improves your conversion tracking by securely hashing and sending customer data (such as emails) to Google Ads, helping to:

• Improve cross-device attribution.
• Enhance reporting accuracy.
• Optimize bidding strategies in Google Ads.
• Ensure data security by hashing customer information.

Wrapping It Up

By integrating Calendly with Google Tag Manager, you can track who’s booking meetings and capture their email addresses for use in Google Ads conversion tracking. This allows for deeper insights and better ad performance.

Need help tracking your small business marketing events? Mike from gravityGone, a web designer, SEO expert, automator, and marketing tech support guru, can assist you in scaling your business with smarter marketing data tracking.

Related reading: Setting Up Google Tag Manager for Local Business Websites

Related reading: Implementing Advanced Google Analytics 4 Tracking for Local Businesses

The post Track Calendly Bookings Embedded on Your Website | Capture Emails appeared first on gravityGone.