Form Tracking for Klaviyo Forms on Google Tag Manager | BCS Form Tracking for Klaviyo Forms on Google Tag Manager | BCSBCS

Form Tracking for Klaviyo Forms on Google Tag Manager

Google Analytics BCS 1 days ago 14 Views 0 Comments

Update time: January 14, 2025

This article introduces how to track forms in Klaviyo Forms.

When the form is successfully submitted, klaviyoForms will be triggered, which can be used to send events, such as:

<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>

Now we need to track the form submission in https://www.klaviyo.com/demo-request

Next, let’s see how to implement form tracking:

Step 1 : Custom HTML to inject javascript

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Custom HTML」,Name it “HTML—Klaviyo Form listener”, and make the following settings: Form Tracking for Klaviyo Forms on Google Tag Manager

In fact, it is the addEventListener method. Read more: GA4 Event Tracking Series ⑦ —— Custom Events (addEventListener Method)

Step 2 : Set Up the Variables

From the code, we can know that there are data layer variables formId and formTitle in the data layer, which need to be obtained using data layer variables in GTM.

In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv-formid”, and then set as follows:Form Tracking for Klaviyo Forms on Google Tag Manager

Set dlv-formtitle in the same way:

Form Tracking for Klaviyo Forms on Google Tag Manager

 

Step 3 : Set Up the Trigger

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」,Name it “Custom Event- Klaviyo Forms Submit Form”, and make the following settings:

Form Tracking for Klaviyo Forms on Google Tag Manager

From the code, we can know that the event is klaviyo, so the event name is set to klaviyo

Step 4 : Set Up the Tags

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」,Name it “GA4-Event-Klaviyo Forms Submit Form”, and make the following settings:Form Tracking for Klaviyo Forms on Google Tag Manager

The event name is submit_form_klaviyo_forms

Step 5 : Preview and Publish

Next is preview debugging.

Form Tracking for Klaviyo Forms on Google Tag Manager

Tags is triggered and can be published.

Read More:

Step 6 : Custom Definitions

The next step is to register event parameters form_id and form_title , if you want to use it in GA4, you need to register it in the Custom definitions of GA4.

In GA4,click「Admin」——「Custom definitions」——「Create custom dimension」, then do the following configuration:

Form Tracking for Klaviyo Forms on Google Tag Manager

Set form_title in the same way

Step 7 : Verify Data in Reports

Generally, after 24 hours, we can see the data in GA4, such as:


If you don't understand, You can leave a comment below.
Like (0)
Post my comment
Cancel comment
Expression Bold Strikethrough Center Italic

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website