How to configure google analytics goal tracking for a sign-up form

You will learn

Learn how to set up Google Analytics Goal Tracking for a Klaviyo sign-up form in order to track GA goals and conversions by following this two step process:

1. Add a code snippet to your website to send Klaviyo form data to Google Analytics 
2. Set up a corresponding goal in Google Analytics

Track sign-ups submitted using a Klaviyo form

You can track Klaviyo forms activity in Google Analytics by adding an event listener to the klaviyoForms event and then executing different GA tracking calls for each type of event. This code must be pasted in the main theme file of your site. 

• If you're using Shopify, paste the snippet into your theme.liquid file on a new line above the closing </body> tag. Note that if you are using custom product pages, you may need to add this snippet to a different theme file, or to your individual custom product pages.
• If you’re using Shopify 2.0, add the code to a Custom Liquid block
• If you're using BigCommerce, navigate to Storefront > Footer Scripts from your BigCommerce Admin panel and paste the snippet into the Footer code box on a new line

Below is the generic code for tracking all klaviyoForms event types in Google Analytics:

<script>
window.addEventListener("klaviyoForms", function(e) { 
  if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
    ga('send', 'event', 'Klaviyo form', 'form_open', e.detail.formId);
  }
  if (e.detail.type == 'submit') {
    ga('send', 'event', 'Klaviyo form', 'form_submit', e.detail.formId);
  }
  if (e.detail.type == 'stepSubmit') {
    ga('send', 'event', 'Klaviyo form', 'form_step_submit', e.detail.metaData.$step_name);
  }
  if (e.detail.type == 'redirectedToUrl') {
    ga('send', 'event', 'Klaviyo form', 'form_url_redirect', e.detail.formId);
  }
  if (e.detail.type == 'close') {
    ga('send', 'event', 'Klaviyo form', 'form_close', e.detail.formId);
  }
});
</script>

If you use gtag.js to load Google Analytics, use the JavaScript below instead:

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

If you are tracking form submits for a multi-step form, note that only one submit event will fire each time the form is filled out. The submit event will fire in the following circumstances: 

• For forms with email or SMS subscription actions, submitting an email or phone triggers a submit event
• For forms containing both email and SMS fields across multiple steps, submitting whichever appears first in the form triggers a submit event
• For forms without an email or SMS subscription action (e.g., a form containing only text fields), clicking a button with the Action set to Submit Form triggers a submit event

The stepSubmit event will fire when each step is submitted. 

Test your tracking code

Once you’ve installed the tracking code on your site, you can test it to ensure data is being tracked. To test your code: 

1. Navigate to your website and interact with your form (e.g., submit or close it)
2. Open Google Analytics and open Real Time > Events 
3. Click Events (last 30 min) to see your last 30 minutes of events 
4. Under Event Category, you should see Klaviyo form, with the action you took on the same row in the Event Action column

If you don’t see your events, make sure Google Analytics is set up correctly, and that the code snippet you used is correct. 

Set up corresponding goal in Google Analytics

After you have set up tracking for new sign-up events in Google Analytics, you can configure a corresponding "Goal." If you use the default code above, use the following event conditions:

• Category: Klaviyo form
• Action: use the action you’d like to track (e.g., form_open, form_close, form_submit) 
• Label (optional): use a six-digit form ID if you’d like to only track a specific form
• Value: leave blank

Additional resources

• How to add Klaviyo web tracking using Google Tag Manager
• Understanding UTM tracking in Klaviyo 
• Track Klaviyo form activity using Javascript