Unless you’ve been living under a rock, you’ll be aware that Google is sunsetting its extremely popular tracking platform, Google Universal Analytics, in favour of its new, shiny and somewhat divisive platform, Google Analytics 4.

Google Analytics 4 (GA4) has left many marketeers scratching their heads as they navigate this new platform. One of the good things about Universal Analytics was its ability to read event code from almost anything - buttons, inline links and even Klaviyo. GA4 has done away with that; if the event you want to track is not in its extensive list of automatically tracked events, you’ll need to build a Google Tag Manager Event to track it! In this blog, we’ll create a tag manager event to track Klaviyo email sign-ups.

Klaviyo Form Listener Tag

Let's start by creating a custom event ‘auto listener’ to check for successful Klaviyo form submissions. Open up Google Tag Manager and create a new tag > Tag Configuration > Choose Custom HTML as the approach, and paste the code below:

<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'submit') {
dataLayer.push({
'event' : 'klaviyo',
'formId' : e.detail.formId,
'formTitle' : e.detail.metaData.$source
});
}
});
</script>

This listener tag will push data from the Klaviyo form to the data layer. Set this tag to fire on all pages. Triggering > then tick 'All Pages'.

Data Layer Variables

Next, we will create 2 Data Layer Variables, allowing us to pull more information to GA4 from Klaviyo.

The first variable to create is formId. In Tag Manager, open Variables and click New in the User-defined Variables section. Copy the settings below.

The I of id is uppercase, as this is how it is named in the data layer.

Next up, we will create the variable for the form title. Again navigate to Variables, then click New in the User-defined Variables section. Copy the settings below.

Custom Event Trigger 

Next, we must create a custom event trigger to fire when a user signs up. Navigate to Triggers and click New. Copy the settings below:

GA4 Event Tag

Let's wrap up all the variables and triggers into one tag that will send data to GA4. First, you must create a Google Analytics: GA4 Configuration tag and link it to your GA4 property. Next, navigate to the Tags screen and click New. Click Tag Configuration > Google Analytics: GA4 Event, choose the correct GA4 configurator > input klaviyo_signup as the Event Name, and Add the following event parameters -

Name - Value
Action - form id {{dlv - formId}}
Label - {{dlv - formTitle}}

In the Triggering section, click Custom - Klaviyo trigger - the one you created in the last step. Your tag should look like this:

Testing

In Google Tag Manager, click the Preview button in the top right and follow the steps until your website appears. Find your Klaviyo signup form, fill it out, and return to the Tag Assistant preview page. Look for klaviyo in the list on the left if you see it as fired, return to the main screen and click Submit.

Finding the event in GA4 and marking it as a Conversion.

The final step to track Klaviyo in GA4 is to find this new event that Tag manager is pushing to GA4. Open your GA4 property and navigate to the Real Time screen within Reports > click on the tile Event Count by Event name > If you see that event, click into the admin section of GA4 and navigate to the Conversions screen, click New conversion event > input klaviyo_signup as event name, and click save.