Form Event Tracking

Form event tracking allows you to monitor when customers view and submit your forms. This data helps you understand form performance, conversion rates, and user behavior.

What is Form Event Tracking?

Form tracking fires custom JavaScript events that you can capture with analytics platforms like:

• Google Analytics (GA4)
• Google Tag Manager
• Facebook Pixel
• Meta Pixel
• TikTok Pixel
• Hotjar
• Any custom analytics solution

Available Events

Event	Description	Use Case
Form View	Fires when a customer sees the form	Track form impressions, page views
Form Submit	Fires when a customer successfully submits	Track conversions, lead generation

Enabling Event Tracking

Step 1: Enable Tracking Options

1. Open your form in the Form Builder
2. Go to the Scripts tab in the left panel
3. Enable the tracking options you need:

Track Form View

• What it does: Fires an event when the form loads on the page
• Event name: qivra_form_view
• Event data: Includes form ID and form name

Track Form Submit

• What it does: Fires an event after successful submission
• Event name: qivra_form_submit
• Event data: Includes form ID, form name, and submission ID

Step 2: Get Your Tracking Code

1. Enable at least one tracking option

2. Click Get tracking setup code

3. Copy the provided JavaScript snippet and Click here to open it

4. Add it to your theme’s custom JavaScript or use a tag manager

Understanding the Tracking Code

The generated tracking code looks like this:

// Listen for form view events
window.addEventListener('qivra_form_view', function(event) {
  const { formId, formName } = event.detail;

  // Send to your analytics platform
  // Example: gtag('event', 'form_view', { form_id: formId, form_name: formName });
});

// Listen for form submit events
window.addEventListener('qivra_form_submit', function(event) {
  const { formId, formName, submissionId } = event.detail;

  // Send to your analytics platform
  // Example: gtag('event', 'form_submit', { form_id: formId, form_name: formName });
});

Event Data Structure

Each event includes:

Property	Type	Description
formId	String	Unique identifier for the form
formName	String	Name of the form
submissionId	String	Unique submission ID (submit event only)

Integration Examples

Google Analytics 4 (GA4)

window.addEventListener('qivra_form_view', function(event) {
  gtag('event', 'form_view', {
    form_id: event.detail.formId,
    form_name: event.detail.formName
  });
});

window.addEventListener('qivra_form_submit', function(event) {
  gtag('event', 'generate_lead', {
    form_id: event.detail.formId,
    form_name: event.detail.formName
  });
});

Google Tag Manager

window.addEventListener('qivra_form_view', function(event) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'qivra_form_view',
    form_id: event.detail.formId,
    form_name: event.detail.formName
  });
});

window.addEventListener('qivra_form_submit', function(event) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'qivra_form_submit',
    form_id: event.detail.formId,
    form_name: event.detail.formName
  });
});

Then in GTM, create triggers for:

• Custom Event: qivra_form_view
• Custom Event: qivra_form_submit

Facebook/Meta Pixel

window.addEventListener('qivra_form_view', function(event) {
  fbq('trackCustom', 'FormView', {
    form_id: event.detail.formId,
    form_name: event.detail.formName
  });
});

window.addEventListener('qivra_form_submit', function(event) {
  fbq('track', 'Lead', {
    content_name: event.detail.formName,
    content_id: event.detail.formId
  });
});

TikTok Pixel

window.addEventListener('qivra_form_submit', function(event) {
  ttq.track('SubmitForm', {
    content_id: event.detail.formId,
    content_name: event.detail.formName
  });
});

Adding the Tracking Code

Method 1: Theme Custom JavaScript

1. Go to Online Store > Themes
2. Click … > Edit code
3. Find or create assets/custom.js
4. Paste your tracking code
5. Save the file

Method 2: Using a Script Manager App

If you use a script manager app (like Script Manager, TinyIMG, etc.):

1. Open your script manager app
2. Add a new script
3. Set it to load on pages with forms
4. Paste your tracking code
5. Save and publish

Method 3: Shopify Theme Settings

Some themes allow custom JavaScript in theme settings:

1. Go to Online Store > Themes > Customize
2. Go to Theme Settings > Custom JavaScript
3. Paste your tracking code
4. Save

Method 4: Direct in Theme Layout

For advanced users:

1. Go to Online Store > Themes > Edit code
2. Open layout/theme.liquid
3. Add before </body>:

<script>
// Your tracking code here
</script>

4. Save

Testing Your Tracking

Verify Events are Firing

1. Open your form page
2. Open browser DevTools (F12)
3. Go to Console tab
4. Add this to test:

window.addEventListener('qivra_form_view', (e) => console.log('Form viewed:', e.detail));
window.addEventListener('qivra_form_submit', (e) => console.log('Form submitted:', e.detail));

5. Reload the page and submit the form
6. Check console for event logs

Verify in Analytics Platform

After setup, verify events are being received:

Platform	How to Verify
GA4	Realtime > Events report
GTM	Preview mode
Facebook Pixel	Events Manager
TikTok	Events Manager

Common Use Cases

Track Conversion Rate

Calculate form conversion rate by comparing:

Conversion Rate = (Form Submits / Form Views) × 100

Track Form Performance by Page

Use formName to compare performance across different pages.

Track Funnel Steps

Combine form view/submit with page view events to build conversion funnels.

Remarketing Campaigns

Create custom audiences based on form views (not submitted) or leads (submitted).

Troubleshooting

Events Not Firing

1. Check if tracking is enabled: Scripts tab toggles must be ON
2. Verify script placement: Script must load after the form
3. Check browser console: Look for JavaScript errors
4. Test in preview mode: Some analytics don’t work in preview

Events Not Appearing in Analytics

1. Verify event names: Match exactly what your analytics expects
2. Check data format: Ensure event data matches your setup
3. Allow time for processing: Some platforms have delays
4. Check ad blockers: Can block analytics scripts

Script Conflicts

If you have multiple tracking scripts:

1. Use unique names for your event listeners
2. Check for conflicts with other scripts
3. Test individually to isolate issues
4. Consider event delegation for multiple forms

Best Practices

Performance

• Load asynchronously: Don’t block page load
• Defer non-critical tracking: Load after main content
• Test impact: Monitor page load times

Privacy

• Comply with GDPR: Inform users about tracking
• Respect consent: Only track if user consents
• Anonymize data: Don’t collect personal info in events
• Use cookie consent: Integrate with cookie banners

Reliability

• Test regularly: Events can break with code changes
• Monitor data: Check for sudden drops in events
• Have backups: Use multiple tracking methods for key events
• Document setup: Keep notes on your tracking configuration

Video Tutorial

Play

Related Docs

• Form Builder Interface
• Submission Analytics
• Integrations Overview